seg_yinzy
/
myems
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

updated Web UI README

pull/67/head
13621160019@163.com 2021-09-07 12:24:28 +08:00 committed by Caozhenhui
parent 16630dc30e
commit 53bb7e2cef
4 changed files with 45 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
web/README.md vendored
View File

@ -1,76 +1,63 @@
# MyEMS Web # MyEMS Web
## Introduction ## Introduction
MyEMS Web 用户界面，用于能源数据分析 MyEMS Web 用户界面，用于查询能源报表
Providing Web UI for MyEMS users to analysis energy data Providing Web UI of MyEMS for viewing energy reports
## Prerequisites ## Prerequisites
Node.js Node.js
nginx-1.18.0 or later ## Running in Local Environment for Development
## Running in Local environment
This project is scaffolded using Create React App.
* Install Node.js via binary archive on Linux * Install Node.js via binary archive on Linux
Download Current Linux Binaries (x64) from https://nodejs.org/en/download/current/ Download Current Linux Binaries (x64) from https://nodejs.org/en/download/current/
Unzip the binary archive to /usr/local/bin/nodejs,
```bash ```bash
sudo mkdir -p /usr/local/lib/nodejs 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/: Test installation
```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
```bash ```bash
node -v node -v
```
```bash
npm version npm version
```
```bash
npx -v npx -v
``` ```
* Open the “myems/web” directory with your cmd or terminal * Download all the necessary dependencies into the node_modules directory.
```bash ```bash
cd myems/web cd myems/web
sudo npm i --unsafe-perm=true --allow-root sudo npm i --unsafe-perm=true --allow-root
``` ```
* If you modified any scss files then you need to compile SCSS, else you can safely ignore this step.
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
Run below command in your project directory to compile scss. Run below command in your project directory to compile scss.
```bash ```bash
sudo npm run scss sudo npm run scss
``` ```
* Run 'sudo npm start' * Starting the Development Server
A local web server will start at http://localhost:3000. 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. 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. * 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 ```bash
sudo npm run build 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. ## Install Production Build Option 2: on NGINX Server (Highly Recommended)
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 NGINX Server * Install NGINX Server
refer to http://nginx.org/en/docs/install.html refer to http://nginx.org/en/docs/install.html
* Configure NGINX * Configure NGINX
@ -116,16 +103,16 @@ Restart NGINX
sudo systemctl restart nginx sudo systemctl restart nginx
``` ```
* Download myems: * Download MyEMS:
```bash ```bash
cd ~ cd ~
git clone https://github.com/MyEMS/myems.git git clone https://github.com/MyEMS/myems.git
``` ```
* Install myems-web : * Install MyEMS Web UI:
Check and change the config file if necessary: Check and change the config file if necessary:
```bash ```bash
cd ~/myems/web cd myems/web
sudo nano src/config.js sudo nano src/config.js
``` ```
Build and Compress Build and Compress
@ -142,7 +129,7 @@ sudo rm -r /var/www/html/web
sudo mv build /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 * Install Apache2 Server
refer to https://httpd.apache.org/docs/2.4/install.html refer to https://httpd.apache.org/docs/2.4/install.html
@ -174,21 +161,21 @@ Add a new 'VirtualHost' as below
</VirtualHost> </VirtualHost>
``` ```
* Download myems: * Download MyEMS:
```bash ```bash
cd ~ cd ~
git clone https://github.com/MyEMS/myems.git git clone https://github.com/MyEMS/myems.git
``` ```
* Install myems-web : * Install MyEMS Web UI:
Check and change the config file if necessary: Check and change the config file if necessary:
```bash ```bash
cd ~/myems/web cd myems/web
sudo nano src/config.js sudo nano src/config.js
``` ```
Build and Compress Build and Compress
```bash ```bash
cd ~/myems/web/ cd myems/web/
sudo npm run build sudo npm run build
tar czvf myems-web.tar.gz build tar czvf myems-web.tar.gz build
``` ```

11
web/package-lock.json generated vendored
View File

@ -30,6 +30,7 @@
"echarts-for-react": "^2.0.16", "echarts-for-react": "^2.0.16",
"element-resize-event": "^3.0.3", "element-resize-event": "^3.0.3",
"emoji-mart": "^3.0.0", "emoji-mart": "^3.0.0",
"express-rate-limit": "^5.3.0",
"fuse.js": "^6.4.3", "fuse.js": "^6.4.3",
"google-maps-react": "^2.0.6", "google-maps-react": "^2.0.6",
"i18next": "^19.6.3", "i18next": "^19.6.3",
@ -8599,6 +8600,11 @@
"node": ">= 0.10.0" "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": { "node_modules/express/node_modules/array-flatten": {
"version": "1.1.1", "version": "1.1.1",
"integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" "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": { "ext": {
"version": "1.4.0", "version": "1.4.0",
"integrity": "sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==", "integrity": "sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==",

1
web/package.json vendored
View File

@ -25,6 +25,7 @@
"echarts-for-react": "^2.0.16", "echarts-for-react": "^2.0.16",
"element-resize-event": "^3.0.3", "element-resize-event": "^3.0.3",
"emoji-mart": "^3.0.0", "emoji-mart": "^3.0.0",
"express-rate-limit": "^5.3.0",
"fuse.js": "^6.4.3", "fuse.js": "^6.4.3",
"google-maps-react": "^2.0.6", "google-maps-react": "^2.0.6",
"i18next": "^19.6.3", "i18next": "^19.6.3",

4
web/server.js vendored
View File

@ -21,6 +21,6 @@ app.use(limiter);
app.get('*', function(req, res) { app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html')); res.sendFile(path.join(__dirname, 'build', 'index.html'));
}); });
app.listen(process.env.PORT || 5000, function() { app.listen(process.env.PORT || 80, function() {
console.log(`Frontend start on http://localhost:5000`); console.log(`Frontend start on http://localhost:80`);
}); });