updated Web UI README
13621160019@163.com
parent
f24deea941
commit
111b3b9259
|
|
@ -1,76 +1,63 @@
|
|||
# MyEMS Web
|
||||
|
||||
## Introduction
|
||||
MyEMS Web 用户界面，用于能源数据分析
|
||||
Providing Web UI for MyEMS users to analysis energy data
|
||||
MyEMS Web 用户界面，用于查询能源报表
|
||||
Providing Web UI of MyEMS for viewing energy reports
|
||||
|
||||
## Prerequisites
|
||||
Node.js
|
||||
|
||||
nginx-1.18.0 or later
|
||||
|
||||
## Running in Local environment
|
||||
This project is scaffolded using Create React App.
|
||||
## Running in Local Environment for Development
|
||||
|
||||
* Install Node.js via binary archive on Linux
|
||||
Download Current Linux Binaries (x64) from https://nodejs.org/en/download/current/
|
||||
|
||||
Unzip the binary archive to /usr/local/bin/nodejs,
|
||||
```bash
|
||||
sudo mkdir -p /usr/local/lib/nodejs
|
||||
sudo tar -xJvf node-v1x.x.x-linux-x64.tar.xz -C /usr/local/lib/nodejs
|
||||
sudo tar -xJvf node-vxx.x.x-linux-x64.tar.xz -C /usr/local/lib/nodejs
|
||||
sudo ln -s /usr/local/lib/nodejs/node-vxx.x.x-linux-x64/bin/node /usr/bin/node
|
||||
sudo ln -s /usr/local/lib/nodejs/node-vxx.x.x-linux-x64/bin/npm /usr/bin/npm
|
||||
sudo ln -s /usr/local/lib/nodejs/node-vxx.x.x-linux-x64/bin/npx /usr/bin/npx
|
||||
```
|
||||
Using sudo to symlink node, npm, and npx into /usr/bin/:
|
||||
```bash
|
||||
sudo ln -s /usr/local/lib/nodejs/node-v1x.x.x-linux-x64/bin/node /usr/bin/node
|
||||
```
|
||||
```bash
|
||||
sudo ln -s /usr/local/lib/nodejs/node-v1x.x.x-linux-x64/bin/npm /usr/bin/npm
|
||||
```
|
||||
```bash
|
||||
sudo ln -s /usr/local/lib/nodejs/node-v1x.x.x-linux-x64/bin/npx /usr/bin/npx
|
||||
```
|
||||
Test installation using
|
||||
Test installation
|
||||
```bash
|
||||
node -v
|
||||
```
|
||||
```bash
|
||||
npm version
|
||||
```
|
||||
```bash
|
||||
npx -v
|
||||
```
|
||||
|
||||
* Open the “myems/web” directory with your cmd or terminal
|
||||
* Download all the necessary dependencies into the node_modules directory.
|
||||
```bash
|
||||
cd myems/web
|
||||
sudo npm i --unsafe-perm=true --allow-root
|
||||
```
|
||||
|
||||
This command will download all the necessary dependencies for falcon in the node_modules directory.
|
||||
* If you modified any scss files, then you need to compile SCSS
|
||||
* If you modified any scss files then you need to compile SCSS, else you can safely ignore this step.
|
||||
Run below command in your project directory to compile scss.
|
||||
```bash
|
||||
sudo npm run scss
|
||||
```
|
||||
* Run 'sudo npm start'
|
||||
* Starting the Development Server
|
||||
A local web server will start at http://localhost:3000.
|
||||
We are using webpack and webpack-serve to automatically detect file changes. So, if you edit and save a file, your browser will automatically refresh and preview the change.
|
||||
```
|
||||
sudo npm start
|
||||
```
|
||||
|
||||
## Creating a Production Build
|
||||
## Install Production Build Option 1: on Node.js Web Server
|
||||
* Run below command in your project directory to make the Production build.
|
||||
This will create an optimized production build by compililing, merging and minifying all the source files as necessary and put them in the build/ folder.
|
||||
```bash
|
||||
sudo npm run build
|
||||
```
|
||||
* Run the production build locally at http://localhost:80.
|
||||
If you want to listen on other port, change it in myems/web/server.js
|
||||
```
|
||||
sudo node server.js
|
||||
```
|
||||
|
||||
This will create an optimized production build by compililing, merging and minifying all the source files as necessary and put them in the build/ folder.
|
||||
|
||||
You can run 'node server.js' to run the production build locally at http://localhost:5000.
|
||||
|
||||
## Option 1: Install Production Build on NGINX Server
|
||||
## Install Production Build Option 2: on NGINX Server (Highly Recommended)
|
||||
|
||||
* Install NGINX Server
|
||||
|
||||
refer to http://nginx.org/en/docs/install.html
|
||||
|
||||
* Configure NGINX
|
||||
|
|
@ -116,16 +103,16 @@ Restart NGINX
|
|||
sudo systemctl restart nginx
|
||||
```
|
||||
|
||||
* Download myems:
|
||||
* Download MyEMS:
|
||||
```bash
|
||||
cd ~
|
||||
git clone https://github.com/MyEMS/myems.git
|
||||
```
|
||||
* Install myems-web :
|
||||
* Install MyEMS Web UI:
|
||||
|
||||
Check and change the config file if necessary:
|
||||
```bash
|
||||
cd ~/myems/web
|
||||
cd myems/web
|
||||
sudo nano src/config.js
|
||||
```
|
||||
Build and Compress
|
||||
|
|
@ -142,7 +129,7 @@ sudo rm -r /var/www/html/web
|
|||
sudo mv build /var/www/html/web
|
||||
```
|
||||
|
||||
## Option 2: Install Production Build on Apache2 Server
|
||||
## Install Production Build Option 3: on Apache2 Server
|
||||
* Install Apache2 Server
|
||||
|
||||
refer to https://httpd.apache.org/docs/2.4/install.html
|
||||
|
|
@ -174,21 +161,21 @@ Add a new 'VirtualHost' as below
|
|||
</VirtualHost>
|
||||
```
|
||||
|
||||
* Download myems:
|
||||
* Download MyEMS:
|
||||
```bash
|
||||
cd ~
|
||||
git clone https://github.com/MyEMS/myems.git
|
||||
```
|
||||
* Install myems-web :
|
||||
* Install MyEMS Web UI:
|
||||
|
||||
Check and change the config file if necessary:
|
||||
```bash
|
||||
cd ~/myems/web
|
||||
cd myems/web
|
||||
sudo nano src/config.js
|
||||
```
|
||||
Build and Compress
|
||||
```bash
|
||||
cd ~/myems/web/
|
||||
cd myems/web/
|
||||
sudo npm run build
|
||||
tar czvf myems-web.tar.gz build
|
||||
```
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
"echarts-for-react": "^2.0.16",
|
||||
"element-resize-event": "^3.0.3",
|
||||
"emoji-mart": "^3.0.0",
|
||||
"express-rate-limit": "^5.3.0",
|
||||
"fuse.js": "^6.4.3",
|
||||
"google-maps-react": "^2.0.6",
|
||||
"i18next": "^19.6.3",
|
||||
|
|
@ -8599,6 +8600,11 @@
|
|||
"node": ">= 0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/express-rate-limit": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-5.3.0.tgz",
|
||||
"integrity": "sha512-qJhfEgCnmteSeZAeuOKQ2WEIFTX5ajrzE0xS6gCOBCoRQcU+xEzQmgYQQTpzCcqUAAzTEtu4YEih4pnLfvNtew=="
|
||||
},
|
||||
"node_modules/express/node_modules/array-flatten": {
|
||||
"version": "1.1.1",
|
||||
"integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
|
||||
|
|
@ -28780,6 +28786,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"express-rate-limit": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-5.3.0.tgz",
|
||||
"integrity": "sha512-qJhfEgCnmteSeZAeuOKQ2WEIFTX5ajrzE0xS6gCOBCoRQcU+xEzQmgYQQTpzCcqUAAzTEtu4YEih4pnLfvNtew=="
|
||||
},
|
||||
"ext": {
|
||||
"version": "1.4.0",
|
||||
"integrity": "sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==",
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
"echarts-for-react": "^2.0.16",
|
||||
"element-resize-event": "^3.0.3",
|
||||
"emoji-mart": "^3.0.0",
|
||||
"express-rate-limit": "^5.3.0",
|
||||
"fuse.js": "^6.4.3",
|
||||
"google-maps-react": "^2.0.6",
|
||||
"i18next": "^19.6.3",
|
||||
|
|
|
|||
|
|
@ -21,6 +21,6 @@ app.use(limiter);
|
|||
app.get('*', function(req, res) {
|
||||
res.sendFile(path.join(__dirname, 'build', 'index.html'));
|
||||
});
|
||||
app.listen(process.env.PORT || 5000, function() {
|
||||
console.log(`Frontend start on http://localhost:5000`);
|
||||
app.listen(process.env.PORT || 80, function() {
|
||||
console.log(`Frontend start on http://localhost:80`);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue