|
| 1 | +# Compilation |
| 2 | + |
| 3 | +## Getting Started |
| 4 | + |
| 5 | +### Prerequisites |
| 6 | + |
| 7 | +Install Node.js on your computer. Download Link: [http://nodejs.cn/download/](http://nodejs.cn/download/). Recommend using the latest stable version. |
| 8 | + |
| 9 | +**Only do this step at the first time.** |
| 10 | + |
| 11 | +### Installation |
| 12 | + |
| 13 | +Run the following commands in terminal: |
| 14 | + |
| 15 | +``` |
| 16 | +git clone https://github.com/WeBankFinTech/Scriptis.git |
| 17 | +cd wds-ide |
| 18 | +npm install |
| 19 | +``` |
| 20 | + |
| 21 | + Commands explanation: |
| 22 | + |
| 23 | +1. Pull remote repository to local: `git clone https://github.com/WeBankFinTech/Scriptis.git` |
| 24 | + |
| 25 | +2. Change to the root directory of the project: `cd wds-ide` |
| 26 | + |
| 27 | +3. Install all dependencies required for the project: `npm install` |
| 28 | + |
| 29 | +**Only do this step at the first time.** |
| 30 | + |
| 31 | +### Configuration |
| 32 | + |
| 33 | +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. |
| 34 | + |
| 35 | +``` |
| 36 | +// Port address of backend server |
| 37 | +VUE_APP_MN_CONFIG_PREFIX=http://yourIp:yourPort/yourPath |
| 38 | +// Socket address |
| 39 | +VUE_APP_MN_CONFIG_SOCKET=/yourSocketPath |
| 40 | +``` |
| 41 | + |
| 42 | +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) |
| 43 | + |
| 44 | +### Building project |
| 45 | + |
| 46 | +You can run the following command in terminal to build the project: |
| 47 | + |
| 48 | +``` |
| 49 | +npm run build |
| 50 | +``` |
| 51 | + |
| 52 | +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. |
| 53 | + |
| 54 | +### How to run |
| 55 | + |
| 56 | +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. |
| 57 | + |
| 58 | +``` |
| 59 | +npm run serve |
| 60 | +``` |
| 61 | + |
| 62 | +Access the application in browser (Chrome recommended) via link: [http://localhost:8080/](http://localhost:8080/) . |
| 63 | + |
| 64 | +Changes you make to the code would dynamically reflect on the |
| 65 | +effects shown on browser when using the method described above to run project. |
| 66 | + |
| 67 | +**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.** |
| 68 | + |
| 69 | +e.g. Chrome browser: |
| 70 | + |
| 71 | +Configuration in Windows: |
| 72 | + |
| 73 | +1. Close all browser windows. |
| 74 | + |
| 75 | +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 . |
| 76 | +3. Use shortcut to open the browser. |
| 77 | + |
| 78 | +Configuration in MacOS: |
| 79 | + |
| 80 | +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=") |
| 81 | + |
| 82 | +``` |
| 83 | +open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/yourname/MyChromeDevUserData/ |
| 84 | +``` |
| 85 | + |
| 86 | +### FAQ |
| 87 | + |
| 88 | +#### Failed installation when running npm install |
| 89 | + |
| 90 | +Try to use Taobao npm mirror: |
| 91 | + |
| 92 | +``` |
| 93 | +npm install -g cnpm --registry=https://registry.npm.taobao.org |
| 94 | +``` |
| 95 | + |
| 96 | +Next, run the following command instead of npm install: |
| 97 | + |
| 98 | +``` |
| 99 | +cnpm install |
| 100 | +``` |
| 101 | + |
| 102 | +Note that you can still use `npm run serve` and `npm run build` to run and build project. |
0 commit comments