web compilation

docs/en_US/ch4/Web Compilation.md

@@ -0,0 +1,102 @@
+# Compilation
+
+## Getting Started
+
+### Prerequisites
+
+Install Node.js on your computer. Download Link:  [http://nodejs.cn/download/](http://nodejs.cn/download/). Recommend using the latest stable version.
+
+**Only do this step at the first time.**
+
+### Installation
+
+Run the following commands in terminal:
+
+```
+git clone https://github.com/WeBankFinTech/Scriptis.git
+cd DataSphereStudio/web
+npm install
+```
+
+ Commands explanation:
+
+1. Pull remote repository to local:	`git clone https://github.com/WeBankFinTech/Scriptis.git`
+
+2. Change to the root directory of the project:	`cd DataSphereStudio/web`
+
+3. Install all dependencies required for the project:	`npm install`
+
+**Only do this step at the first time.**
+
+### Configuration
+
+You need to make some configurations in your code, such as port address of backend server and socket address of backend server in .env.development file in root directory.
+
+```
+// Port address of backend server
+VUE_APP_MN_CONFIG_PREFIX=http://yourIp:yourPort/yourPath
+// Socket address
+VUE_APP_MN_CONFIG_SOCKET=/yourSocketPath
+```
+
+You can refer to the official documentation of vue-cli for detailed explanation. [Modes and environment variables](https://cli.vuejs.org/guide/mode-and-env.html#modes)
+
+### Building project
+
+You can run the following command in terminal to build the project:
+
+```
+npm run build
+```
+
+A folder named "dist" would appear in your project's root directory if the command has run successfully and you can directly put "dist" to your static server.
+
+### How to run
+
+You would need to run the following command in terminal if you want to run project on your local browser and see corresponding effects after making changes to the code.
+
+```
+npm run serve
+```
+
+Access the application in browser (Chrome recommended) via link: [http://localhost:8080/](http://localhost:8080/) .
+
+Changes you make to the code would dynamically reflect on the
+effects shown on browser when using the method described above to run project.
+
+**Notes:  Since frontend and backend are developed separately, when running on local browser you need to allow cross domain access in order to access the port of backend server.**
+
+e.g. Chrome browser:
+
+Configuration in Windows:
+
+1. Close all browser windows.
+
+2. Create a shortcut of chrome,  right-click to choose "properties" , then go to "Shortcut" tab find "Target" and add`--args --disable-web-security --user-data-dir=C:\MyChromeDevUserData`  to it .
+3. Use shortcut to open the browser.
+
+Configuration in MacOS:
+
+Run the following command. (You need to replace "yourname" in the path. If it's not working, check the path of MyChromeDevUserData on your machine and copy its path to the place right after "--user-data-dir=")
+
+```
+open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/yourname/MyChromeDevUserData/
+```
+
+### FAQ
+
+#### Failed installation when running npm install
+
+Try to use Taobao npm mirror:
+
+```
+npm install -g cnpm --registry=https://registry.npm.taobao.org
+```
+
+Next,  run the following command instead of npm install:
+
+```
+cnpm install
+```
+
+Note that you can still use `npm run serve` and `npm run build` to run and build project.

docs/zh_CN/ch4/前端编译文档.md

@@ -0,0 +1,86 @@
+# 编译文档中文版
+
+## 启动流程
+
+### 一、安装Node.js
+将Node.js下载到电脑本地，安装即可。下载地址：[http://nodejs.cn/download/](http://nodejs.cn/download/) （建议使用最新的稳定版本）
+**该步骤仅第一次使用时需要执行。**
+
+### 二、安装项目
+在终端命令行中执行以下指令：
+
+```
+git clone ${ipAddress}
+cd DataSphereStudio/web
+npm install
+```
+
+指令简介：
+1. 将项目包从远程仓库拉取到电脑本地：git clone ${ipAddress}
+2. 进入项目包根目录：cd DataSphereStudio/web
+3. 安装项目所需依赖：npm install
+
+**该步骤仅第一次使用时需要执行。**
+
+### 三、配置
+您需要在代码中进行一些配置，如后端接口地址，后端socket地址等，如根目录下的.env.development文件：
+
+```
+// 后端接口地址
+VUE_APP_MN_CONFIG_PREFIX=http://yourIp:yourPort/yourPath
+// 后端socket地址
+VUE_APP_MN_CONFIG_SOCKET=/yourSocketPath
+```
+
+配置的具体解释可参考vue-cli官方文档：[环境变量和模式](https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E5%92%8C%E6%A8%A1%E5%BC%8F)
+
+### 打包项目
+您可以通过在终端命令行执行以下指令对项目进行打包，生成压缩后的代码：
+
+```
+npm run build
+```
+
+该指令成功执行后，项目根目录下会出现一个名叫 “dist” 的文件夹，该文件夹即为打包好的代码。您可以直接将该文件夹放进您的静态服务器中。
+
+### 运行项目
+如果您想在本地浏览器上运行该项目并且改动代码查看效果，需要在终端命令行中执行以下指令：
+
+```
+npm run serve
+```
+
+在浏览器中（建议Chrome浏览器）通过链接访问应用：[http://localhost:8080/](http://localhost:8080/) .
+当您使用该方式运行项目时，您对代码的改动产生的效果，会动态体现在浏览器上。
+
+**注意：因为项目采用前后端分离开发，所以在本地浏览器上运行时，需要对浏览器进行设置跨域才能访问后端接口：**
+
+比如chrome浏览器：
+windows系统下的配置方式：
+1. 关闭所有的chrome浏览器。
+2. 新建一个chrome快捷方式，右键“属性”，“快捷方式”选项卡里选择“目标”，添加  --args --disable-web-security --user-data-dir=C:\MyChromeDevUserData
+3. 通过快捷方式打开chrome浏览器
+mac系统下的配置方式：
+在终端命令行执行以下命令(需要替换路径中的yourname，若还不生效请检查您机器上MyChromeDevUserData文件夹的位置并将路径复制到下面指令的“--user-data-dir=”后面)
+
+```
+open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/yourname/MyChromeDevUserData/
+```
+
+
+### 常见问题
+
+#### npm install无法成功
+如果遇到该情况，可以使用国内的淘宝npm镜像：
+
+```
+npm install -g cnpm --registry=https://registry.npm.taobao.org
+```
+
+接着，通过执行以下指令代替npm install指令
+
+```
+cnpm install
+```
+
+注意，项目启动和打包时，仍然可以使用npm run build和npm run serve指令