Optimized debugging cross-domain setup issues and updated documentation

.env

@@ -1,3 +1,5 @@
-VUE_APP_HOST=
 VUE_APP_MN_CONFIG_PREFIX=/api/rest_j/v1/
 VUE_APP_MN_CONFIG_SOCKET=/ws/api/entrance/connect
+VUE_APP_HOST=
+SERVER_HOST=http://192.168.9.180:9001
+PORT=8080

README.md

@@ -9,7 +9,7 @@ English | [Chinese](docs/zh_CN/README.md)
 
 Scriptis is for interactive data analysis with script development(SQL, Pyspark, HiveQL), task submission(Spark, Hive), UDF, function, resource management and intelligent diagnosis.
 
-![运行时功能](docs/zh_CN/images/readme/running.gif)
+![running](docs/en_US/images/readme/running.gif)
 
 ## Features
 
@@ -30,11 +30,22 @@ Scriptis is for interactive data analysis with script development(SQL, Pyspark,
 
 ## QuickStart
 
-Read the Quick Start [Quick Start](/docs/en_US/ch3/Scriptis_Quick_Start.md)
+Read the Quick Start [Quick Start](docs/en_US/ch1/Front-end_deployment_documentation.md)
 
 ## Comparison with similar scheduler systems
+
 ![Comparison](/docs/en_US/images/readme/Comparison.png)
 
+## Documentations
+
+[Quick Start](docs/en_US/ch1/Front-end_deployment_documentation.md)
+
+[Quick Use](docs/en_US/ch3/Scriptis_Quick_Start.md)
+
+[User Manual](docs/en_US/ch4/Scriptis_Manual.md)
+
+[Compilation](docs/en_US/ch2/Compilation.md)
+
 ## Community
 If you desire immediate response, please kindly raise issues to us or scan the below QR code by WeChat and QQ to join our group:
 

docs/en_US/ch1/Front-end_deployment_documentation.md

@@ -4,15 +4,15 @@ Scriptis is a data analysis tool based on Linkis. Before deploying Scriptis, you
 
 1. Select the corresponding installation package to download.
 
-2. Unzip the downloaded installation package in the installation directory: unzip wedatasphere-scriptis-0.5.0-dist.zip.
+2. Unzip the downloaded installation package in the installation directory: unzip wedatasphere-scriptis-0.7.0-dist.zip.
 
 ## 2 Deploy
 
-​	There are two deployment methods, automated and manual deployment.  
+​	There are two deployment methods, automated and manual deployment.
 
 ### 2.1 Automated deployment
 
-Go to the frontend directory ```wedatasphere-scriptis``` and edit ```vi config.sh ``` to change the interface address of the frontend and backend port. backend port interface address is the gateway address of linkis. 
+Go to the frontend directory ```wedatasphere-scriptis``` and edit ```vi config.sh ``` to change the interface address of the frontend and backend port. backend port interface address is the gateway address of linkis.
 
 ### (3) Modify and save the configuration file created above
 
@@ -29,7 +29,7 @@ scriptis_ipaddr=$(ip addr | awk '/^[0-9]+: / {}; /inet.*global/ {print gensub(/(
 
 After the modification, run the following command in the directory: ```sudo sh install.sh > install.log 2>&1```
 
-Next, you can access ```http://scriptis_ipaddr:scriptis_port``` directly via Chrome, scriptis_port is the port configured in config.sh and scriptis_ipaddr is the IP of the machine that used for installation. 
+Next, you can access ```http://scriptis_ipaddr:scriptis_port``` directly via Chrome, scriptis_port is the port configured in config.sh and scriptis_ipaddr is the IP of the machine that used for installation.
 
 If encounter access failure,  please check install.log and find out the errors.
 
@@ -48,11 +48,11 @@ server {
             #charset koi8-r;
             #access_log  /var/log/nginx/host.access.log  main;
             location / {
-            root   /appcom/Install/scriptis/ROOT; # directory where package decompressed 
+            root   /appcom/Install/scriptis/ROOT; # directory where package decompressed
             #in the fronted
             index  index.html index.html;
             }
-            location /ws {#webSocket configure spport 
+            location /ws {#webSocket configure spport
             proxy_pass http://192.168.xxx.xxx:9001;#IP port of the linkis gateway service
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
@@ -84,11 +84,11 @@ server {
 
 3. Copy the frontend package to the corresponding directory: ```/appcom/Install/scriptis/ROOT; # directory where package decompressed in the frontend```
 4. Start service: ```sudo systemctl restart nginx```
-5. You can directly access ```http://nginx_ip:nginx_port``` via Chrome after execution. 
+5. You can directly access ```http://nginx_ip:nginx_port``` via Chrome after execution.
 
 ## 3 FAQs
 
-(1) limitations on the size of files that being uploaded 
+(1) limitations on the size of files that being uploaded
 
 ```
 sudo vi /etc/nginx/nginx.conf

docs/en_US/ch2/Compilation.md

@@ -0,0 +1,82 @@
+# 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 wds-ide
+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 wds-ide`
+
+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.
+
+```
+//prefix of Backend service
+VUE_APP_MN_CONFIG_PREFIX=/api/rest_j/v1/
+//prefix of websocket service
+VUE_APP_MN_CONFIG_SOCKET=/ws/api/entrance/connect
+//server host  example http://yourIp:yourPort
+SERVER_HOST=
+//front end run port  default 8080
+PORT=
+```
+
+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
+```
+
+### 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/ch1/前台部署文档.md

@@ -3,7 +3,7 @@ Scriptis是基于Linkis开发的数据分析工具，部署Scriptis前需要先
 ## 1、准备工作
 
 1. 点击release 选择对应的安装包进行下载
-2. 将下载下来的安装包在安装目录进行解压：unzip wedatasphere-scriptis-0.5.0-dist.zip
+2. 将下载下来的安装包在安装目录进行解压：unzip wedatasphere-scriptis-0.7.0-dist.zip
 
 ## 2、部署
     分为两种部署方式，自动化部署和手动部署
@@ -31,7 +31,7 @@ scriptis_ipaddr=$(ip addr | awk '/^[0-9]+: / {}; /inet.*global/ {print gensub(/(
 ### 2.2 手动部署
 1.安装Nginx:```sudo yum install nginx -y```
 
-2.修改配置文件：sudo vi /etc/nginx/conf.d/scriptis.conf  
+2.修改配置文件：sudo vi /etc/nginx/conf.d/scriptis.conf
 添加如下内容：
 ```
 server {

docs/zh_CN/ch2/编译文档.md

@@ -26,10 +26,13 @@ npm install
 您需要在代码中进行一些配置，如后端接口地址，后端socket地址等，如根目录下的.env.development文件：
 
 ```
-// 后端接口地址
-VUE_APP_MN_CONFIG_PREFIX=http://yourIp:yourPort/yourPath
-// 后端socket地址
-VUE_APP_MN_CONFIG_SOCKET=/yourSocketPath
+//restful http接口版本路径前缀，linkis后端不改一般不需要改一般不需要改 通过代理访问
+VUE_APP_MN_CONFIG_PREFIX=/api/rest_j/v1/
+//restful websocket接口版本路径前缀，linkis后端不改一般不需要改一般不需要改
+VUE_APP_MN_CONFIG_SOCKET=/ws/api/entrance/connect
+//后端host  后端gateway服务
+SERVER_HOST=http://192.168.9.180:9001
+PORT= 前端本地调试端口
 ```
 
 配置的具体解释可参考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)
@@ -53,20 +56,6 @@ 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/
-```
-
 
 ### 常见问题
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "scriptis",
-  "version": "0.5.0",
+  "version": "0.7.2",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -40,6 +40,7 @@
     "eslint-config-google": "^0.13.0",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-vue": "^5.0.0",
+    "filemanager-webpack-plugin": "^2.0.5",
     "monaco-editor-webpack-plugin": "^1.7.0",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.1.0",