8 Commits

Author SHA1 Message Date
Mars Hall
838b163487 📚 multi-processing w/ Node Cluster API 2018-02-05 22:03:51 -08:00
Mars Hall
d88e7b287c Multi-process across all CPU cores 2018-02-05 21:51:32 -08:00
Mars Hall
e7a5eb4ca5 Update deployment runtime to Node 8.9.x (#16) 2018-02-05 21:10:11 -08:00
Mars Hall
342b99fb18 Update CRA packages to current versions (#15) 2018-02-05 21:01:57 -08:00
Mars Hall
2b17c2aa4a Add Heroku generated app.json 2018-02-05 20:52:56 -08:00
Mars Hall
71e2496d10 📚 demote alert re: package-lock.json 2017-07-05 11:17:15 -07:00
Mars Hall
80bbce5c5d Support for npm 5 package-lock.json (#10)
* Add npm 5’s `package-lock.json`

* Upgrade deployment to Node 6.11

* Fix react-ui build command to work with npm 5.

* Revise react-ui build to honor lock file for production dependencies
2017-07-05 11:13:35 -07:00
Mars Hall
cace55f3b7 🚨 Alert for users of npm 5’s new package-lock.json 2017-07-02 15:26:00 -07:00
6 changed files with 7108 additions and 2490 deletions

View File

@@ -10,7 +10,7 @@ To deploy a frontend-only React app, use the static-site optimized
## Design Points ## Design Points
A combo of two npm projects, the backend server and the frontend UI. So there are two `package.json` configs. A combo of two npm projects, the backend server and the frontend UI. So there are two `package.json` configs and thereforce two places to run `npm` commands:
1. [`package.json`](package.json) for [Node server](server/) & [Heroku deploy](https://devcenter.heroku.com/categories/deployment) 1. [`package.json`](package.json) for [Node server](server/) & [Heroku deploy](https://devcenter.heroku.com/categories/deployment)
* `heroku-postbuild` script compiles the webpack bundle during deploy * `heroku-postbuild` script compiles the webpack bundle during deploy
@@ -18,6 +18,7 @@ A combo of two npm projects, the backend server and the frontend UI. So there ar
2. [`react-ui/package.json`](react-ui/package.json) for [React web UI](react-ui/) 2. [`react-ui/package.json`](react-ui/package.json) for [React web UI](react-ui/)
* generated by [create-react-app](https://github.com/facebookincubator/create-react-app) * generated by [create-react-app](https://github.com/facebookincubator/create-react-app)
Includes a minimal [Node Cluster](https://nodejs.org/docs/latest-v8.x/api/cluster.html) [implementation](server/index.js) to parallelize the single-threaded Node process across the available CPU cores.
## Demo ## Demo
@@ -43,6 +44,8 @@ This deployment will automatically:
* serves `../react-ui/build/` as static files * serves `../react-ui/build/` as static files
* customize by adding API, proxy, or route handlers/redirectors * customize by adding API, proxy, or route handlers/redirectors
⚠️ Using npm 5s new `package-lock.json`? We resolved a compatibility issue. See [PR](https://github.com/mars/heroku-cra-node/pull/10) for more details.
👓 More about [deploying to Heroku](https://devcenter.heroku.com/categories/deployment). 👓 More about [deploying to Heroku](https://devcenter.heroku.com/categories/deployment).

21
app.json Normal file
View File

@@ -0,0 +1,21 @@
{
"name": "heroku-cra-node",
"description": "web app made of create-react-app UI + Node API",
"scripts": {
},
"env": {
},
"formation": {
"web": {
"quantity": 1
}
},
"addons": [
],
"buildpacks": [
{
"url": "heroku/nodejs"
}
]
}

View File

@@ -3,7 +3,7 @@
"version": "1.0.0", "version": "1.0.0",
"description": "How to use create-react-app with a custom Node API on Heroku", "description": "How to use create-react-app with a custom Node API on Heroku",
"engines": { "engines": {
"node": "6.11.x" "node": "8.9.x"
}, },
"scripts": { "scripts": {
"start": "node server", "start": "node server",

File diff suppressed because it is too large Load Diff

View File

@@ -3,11 +3,11 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"devDependencies": { "devDependencies": {
"react-scripts": "0.9.5" "react-scripts": "^1.1.0"
}, },
"dependencies": { "dependencies": {
"react": "^15.4.2", "react": "^16.2.0",
"react-dom": "^15.4.2" "react-dom": "^16.2.0"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

View File

@@ -1,23 +1,41 @@
const express = require('express'); const express = require('express');
const path = require('path'); const path = require('path');
const cluster = require('cluster');
const numCPUs = require('os').cpus().length;
const app = express();
const PORT = process.env.PORT || 5000; const PORT = process.env.PORT || 5000;
// Priority serve any static files. // Multi-process to utilize all CPU cores.
app.use(express.static(path.resolve(__dirname, '../react-ui/build'))); if (cluster.isMaster) {
console.error(`Node cluster master ${process.pid} is running`);
// Answer API requests. // Fork workers.
app.get('/api', function (req, res) { for (let i = 0; i < numCPUs; i++) {
cluster.fork();
}
cluster.on('exit', (worker, code, signal) => {
console.error(`Node cluster worker ${worker.process.pid} exited: code ${code}, signal ${signal}`);
});
} else {
const app = express();
// Priority serve any static files.
app.use(express.static(path.resolve(__dirname, '../react-ui/build')));
// Answer API requests.
app.get('/api', function (req, res) {
res.set('Content-Type', 'application/json'); res.set('Content-Type', 'application/json');
res.send('{"message":"Hello from the custom server!"}'); res.send('{"message":"Hello from the custom server!"}');
}); });
// All remaining requests return the React app, so it can handle routing. // All remaining requests return the React app, so it can handle routing.
app.get('*', function(request, response) { app.get('*', function(request, response) {
response.sendFile(path.resolve(__dirname, '../react-ui/build', 'index.html')); response.sendFile(path.resolve(__dirname, '../react-ui/build', 'index.html'));
}); });
app.listen(PORT, function () { app.listen(PORT, function () {
console.log(`Listening on port ${PORT}`); console.error(`Node cluster worker ${process.pid}: listening on port ${PORT}`);
}); });
}