From 1bc1c0546f574a9a05e501dc2e21ecc35f6f93d0 Mon Sep 17 00:00:00 2001 From: Novikov Bogdan Date: Wed, 24 Feb 2016 18:29:55 +0200 Subject: [PATCH 1/2] add "how to setup own server" --- README.md | 1 + docs/README.md | 1 + docs/local-server.md | 116 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 118 insertions(+) create mode 100644 docs/local-server.md diff --git a/README.md b/README.md index 7851ffd..5f0b1bb 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,7 @@ Packages: * [Generate component](./docs/generate-component.md) * [React-router howto](./docs/react-router-howto.md) * [How to create CRUD](./docs/crud.md) +* [Configure and setup own server](./docs/local-server.md) ## Dependency docs diff --git a/docs/README.md b/docs/README.md index e634cee..709e000 100644 --- a/docs/README.md +++ b/docs/README.md @@ -10,6 +10,7 @@ * [Generate component](./generate-component.md) * [React-router howto](./react-router-howto.md) * [How to create CRUD](./crud.md) +* [Configure and setup own server](./docs/local-server.md) ### Dependency diff --git a/docs/local-server.md b/docs/local-server.md new file mode 100644 index 0000000..ae148c7 --- /dev/null +++ b/docs/local-server.md @@ -0,0 +1,116 @@ +## Setup own server, without Docker and cloud-based solutions + +This approach is relevant if you want to: + +* speed up your dev-computer +* deploy application on a dedicated server (or vps) +* run app in corporate network + +General scheme will looks like: +``` ++------+ +------------+ +----------------+ +| user +---> | web server +----> | express server | ++------+ +------------+ +----------------+ +``` + +First you need pre-installed and configured linux/nix system (not windows/osx). +I will consider the example of ubuntu-server. + +Install nvm (node version manager): + +``` +$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash +``` + +Then install Node.js 5.x, and setup default node version: +``` +$ nvm install 5.4 +$ nvm alias default 5.4 +``` + +Then you need process manager for Node.js app server. This may be one of the: + +* [pm2](https://github.com/Unitech/pm2) +* [forever](https://github.com/foreverjs/forever) +* other managers... + +I chose `pm2`: +``` +$ npm install pm2 -g +``` + +Next you need build you app and upload on server, for example to `/var/www/myapp` (better to use git hooks or npm task for this). + +``` +$ npm run build -- --production && rsync . to@my.host:/var/www/myapp +``` + +If you app successfully loaded, configure you process manager and start application: +``` +web@server:/var/www/myapp# PORT=5000 NAME=awesomeapp.com pm2 add --name "my-awesome-app" ./build/server.js + +┌─────────────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────────────┬──────────┐ +│ App name │ id │ mode │ pid │ status │ restart │ uptime │ memory │ watching │ +├─────────────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────────────┼──────────┤ +│ my-awesome-app │ 1 │ fork │ 777 │ online │ 0 │ 0m │ 7 MB │ disabled │ +└─────────────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────────────┴──────────┘ + +``` + +We specified port and application name in the environment variables (NAME and PORT). + +Next you need web server, such as: + +* nginx +* apache2 +* lighttpd +* other web-servers.. + +Once you have installed the server, you will need to configure it. + +Basic apache2 (with mod_proxy) configuration could look like this: +``` + + ServerAdmin i@awesomeapp.com + ServerName awesomeapp.com + ServerAlias www.awesomeapp.com + + ProxyRequests off + + + Order deny,allow + Allow from all + + + + ProxyPass http://127.0.0.1:5000/ + ProxyPassReverse http://127.0.0.1:5000/ + + + +``` + +Basic nginx configuration: +``` +upstream nodeserver { + server 127.0.0.1:5000; +} + +server { + listen 0.0.0.0:80; + server_name awesomeapp.com; + access_log /var/log/nginx/awesomeapp.com.log; + + location / { + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header Host $http_host; + proxy_set_header X-NginX-Proxy true; + + proxy_pass http://nodeserver/; + proxy_redirect off; + } + } +``` + +Setup and reload web server - now your application server is ready. From 9b07dc8a46aec89858e32b7b70f6823476fd18d0 Mon Sep 17 00:00:00 2001 From: Novikov Bogdan Date: Thu, 25 Feb 2016 22:36:24 +0200 Subject: [PATCH 2/2] add production build plugins, fix typo, upgrade docs --- .babelrc | 11 ++++++++++- docs/getting-started.md | 2 +- docs/local-server.md | 13 ++++++++----- package.json | 7 +++++-- src/components/PrivatePage/PrivatePage.js | 2 +- tools/webpack.config.js | 2 +- 6 files changed, 26 insertions(+), 11 deletions(-) diff --git a/.babelrc b/.babelrc index 7ff4904..9641d87 100644 --- a/.babelrc +++ b/.babelrc @@ -7,5 +7,14 @@ "plugins": [ "transform-runtime", "transform-decorators-legacy" - ] + ], + "env": { + "production": { + "plugins": [ + "transform-react-remove-prop-types", + "transform-react-constant-elements", + "transform-react-inline-elements" + ] + } + } } diff --git a/docs/getting-started.md b/docs/getting-started.md index 9df5178..19cbef8 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -69,7 +69,7 @@ $ npm run build or, for a production build: ```shell -$ npm run build -- --release +$ BABEL_ENV=production npm run build -- --release ``` After running this command, the `/build` folder will contain the compiled diff --git a/docs/local-server.md b/docs/local-server.md index ae148c7..5d82ea9 100644 --- a/docs/local-server.md +++ b/docs/local-server.md @@ -39,15 +39,17 @@ I chose `pm2`: $ npm install pm2 -g ``` -Next you need build you app and upload on server, for example to `/var/www/myapp` (better to use git hooks or npm task for this). +Next you need build you app and upload on server, for example to `/var/www/myapp` +(better to use git hooks or npm task for this). ``` -$ npm run build -- --production && rsync . to@my.host:/var/www/myapp +$ BABEL_ENV=production npm run build -- --release && rsync . to@my.host:/var/www/myapp ``` If you app successfully loaded, configure you process manager and start application: -``` -web@server:/var/www/myapp# PORT=5000 NAME=awesomeapp.com pm2 add --name "my-awesome-app" ./build/server.js + +```shell +web@server:/var/www/myapp# NODE_ENV=production PORT=5000 NAME=awesomeapp.com pm2 add --name "my-awesome-app" ./build/server.js ┌─────────────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────────────┬──────────┐ │ App name │ id │ mode │ pid │ status │ restart │ uptime │ memory │ watching │ @@ -57,7 +59,8 @@ web@server:/var/www/myapp# PORT=5000 NAME=awesomeapp.com pm2 add --name "my-awes ``` -We specified port and application name in the environment variables (NAME and PORT). +Please note that we have specified `NODE_ENV=production` and other environment +variables (NAME and PORT). Next you need web server, such as: diff --git a/package.json b/package.json index 7871f2d..b0d0a7b 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,6 @@ "dependencies": { "alt": "^0.18.1", "axios": "^0.9.1", - "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-polyfill": "^6.5.0", "babel-runtime": "^6.5.0", "bluebird": "3.3.1", @@ -43,6 +42,10 @@ "babel-eslint": "^5.0.0", "babel-loader": "^6.2.3", "babel-plugin-react-transform": "^2.0.0", + "babel-plugin-transform-decorators-legacy": "^1.3.4", + "babel-plugin-transform-react-constant-elements": "^6.5.0", + "babel-plugin-transform-react-inline-elements": "^6.5.0", + "babel-plugin-transform-react-remove-prop-types": "^0.2.2", "babel-plugin-transform-runtime": "^6.5.2", "babel-preset-es2015": "^6.5.0", "babel-preset-react": "^6.5.0", @@ -66,8 +69,8 @@ "mkdirp": "^0.5.1", "ncp": "^2.0.0", "postcss": "^5.0.16", - "postcss-import": "^8.0.2", "postcss-custom-media": "^5.0.0", + "postcss-import": "^8.0.2", "postcss-loader": "^0.8.1", "precss": "^1.4.0", "raw-loader": "^0.5.1", diff --git a/src/components/PrivatePage/PrivatePage.js b/src/components/PrivatePage/PrivatePage.js index 07613c0..239f0ca 100644 --- a/src/components/PrivatePage/PrivatePage.js +++ b/src/components/PrivatePage/PrivatePage.js @@ -70,7 +70,7 @@ class PrivatePage extends Component { return (
-

This is example of prtected page

+

This is example of protected page

You profile info:

diff --git a/tools/webpack.config.js b/tools/webpack.config.js index 2f46ca6..ac542a0 100644 --- a/tools/webpack.config.js +++ b/tools/webpack.config.js @@ -113,7 +113,7 @@ const clientConfig = extend(true, {}, config, { output: { path: path.join(__dirname, '../build/public'), - publicPath: DEBUG ? 'http://localhost:5000/' : '/', + publicPath: DEBUG ? 'http://localhost:3000/' : '/', filename: DEBUG ? '[name].js?[hash]' : '[name].[hash].js', },