Deploy Nodejs+Express+React+Webpack app on heroku

2
votes

I have made a web app using node js, express, webpack, react and socket io and I would like to deploy it on heroku. When I try it I can access to the website but it shows me an error message:

Cannot GET /

Here is my configuration:

    "scripts": {
    "start": "npm run dev",
    "build": "webpack --mode production",
    "client": "webpack-dev-server --mode development --devtool inline-source-map --hot",
    "server": "nodemon src/server/index.js",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install && npm run build"
  }

The start script was node src/server/index.js before I change it because I run npm run dev to start my app locally.

Here is my repository: http://git.kamal-allali.fr/kamal/prog_web_5a

Here is the heroku link: https://fast-earth-60949.herokuapp.com

Here are the heroku logs:

2018-11-05T21:42:44.984679+00:00 app[web.1]: 1 Built at: 11/05/2018 9:42:44 PM

2018-11-05T21:42:44.984681+00:00 app[web.1]: 1 Asset
Size Chunks Chunk Names

2018-11-05T21:42:44.984683+00:00 app[web.1]: 1 bundle.js 7.42 MiB main [emitted] main

2018-11-05T21:42:44.984685+00:00 app[web.1]: 1 favicon.ico 40.4 KiB [emitted]

2018-11-05T21:42:44.984686+00:00 app[web.1]: 1 index.html 717 bytes [emitted]

2018-11-05T21:42:44.984688+00:00 app[web.1]: 1 Entrypoint main = bundle.js

2018-11-05T21:42:44.984710+00:00 app[web.1]: 1 [./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]

2018-11-05T21:42:44.984712+00:00 app[web.1]: 1 [./node_modules/react-dom/index.js] 1.33 KiB {main} [built]

2018-11-05T21:42:44.984713+00:00 app[web.1]: 1 [./node_modules/react/index.js] 190 bytes {main} [built] 2018-11-05T21:42:44.984715+00:00 app[web.1]: 1 [./node_modules/url/url.js] 22.8 KiB {main} [built]

2018-11-05T21:42:44.984718+00:00 app[web.1]: 1 [./node_modules/webpack-dev-server/client/index.js?http://localhost:3000] (webpack)-dev-server/client?http://localhost:3000 7.78 KiB {main} [built]

2018-11-05T21:42:44.984720+00:00 app[web.1]: 1 [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]

2018-11-05T21:42:44.984723+00:00 app[web.1]: 1 [0] multi (webpack)-dev-server/client?http://localhost:3000 (webpack)/hot/dev-server.js ./src/client/index.js 52 bytes {main} [built]

2018-11-05T21:42:44.984724+00:00 app[web.1]: 1 [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]

2018-11-05T21:42:44.984726+00:00 app[web.1]: 1 [./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]

2018-11-05T21:42:44.984728+00:00 app[web.1]: 1 [./node_modules/webpack/hot sync ^./log$] (webpack)/hot sync nonrecursive ^./log$ 170 bytes {main} [built]

2018-11-05T21:42:44.984730+00:00 app[web.1]: 1 [./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 KiB {main} [built]

2018-11-05T21:42:44.984732+00:00 app[web.1]: 1 [./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]

2018-11-05T21:42:44.984733+00:00 app[web.1]: 1 [./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]

2018-11-05T21:42:44.984735+00:00 app[web.1]: 1 [./src/client/Layout.js] 4.33 KiB {main} [built]

2018-11-05T21:42:44.984736+00:00 app[web.1]: 1 [./src/client/index.js] 205 bytes {main} [built]

2018-11-05T21:42:44.984738+00:00 app[web.1]: 1 + 349 hidden modules

2018-11-05T21:42:44.984740+00:00 app[web.1]: 1 Child html-webpack-plugin for "index.html":

2018-11-05T21:42:44.984742+00:00 app[web.1]: 1 1 asset

2018-11-05T21:42:44.984743+00:00 app[web.1]: 1 Entrypoint undefined = index.html

2018-11-05T21:42:44.984745+00:00 app[web.1]: 1
[./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html] 828 bytes {0} [built]

2018-11-05T21:42:44.984746+00:00 app[web.1]: 1
[./node_modules/lodash/lodash.js] 527 KiB {0} [built]2018-11-05T21:42:44.984748+00:00 app[web.1]: 1
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {0} [built]

2018-11-05T21:42:44.984749+00:00 app[web.1]: 1
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]

2018-11-05T21:42:44.984751+00:00 app[web.1]: 1 ℹ ｢wdm｣: Compiled successfully.

2018-11-05T22:16:20.551630+00:00 heroku[web.1]: Idling

2018-11-05T22:16:20.552092+00:00 heroku[web.1]: State changed from up to down

2018-11-05T22:16:21.411951+00:00 heroku[web.1]: Stopping all processes with SIGTERM

2018-11-05T22:16:21.808625+00:00 heroku[web.1]: Process exited with status 143

2018-11-06T08:35:42.000000+00:00 app[api]: Build started by user [email protected]

2018-11-06T08:36:36.888512+00:00 heroku[web.1]: State changed from down to starting

2018-11-06T08:36:36.713630+00:00 app[api]: Deploy d62783d3 by user [email protected]

2018-11-06T08:36:36.713630+00:00 app[api]: Release v12 created by user [email protected]

2018-11-06T08:36:40.000000+00:00 app[api]: Build succeeded

2018-11-06T08:36:42.010068+00:00 heroku[web.1]: Starting process with command npm start

2018-11-06T08:36:45.324322+00:00 app[web.1]:

2018-11-06T08:36:45.324353+00:00 app[web.1]: > [email protected] start /app

2018-11-06T08:36:45.324355+00:00 app[web.1]: > npm run dev

2018-11-06T08:36:45.324356+00:00 app[web.1]:

2018-11-06T08:36:45.753063+00:00 app[web.1]:

2018-11-06T08:36:45.753112+00:00 app[web.1]: > [email protected] dev /app

2018-11-06T08:36:45.753114+00:00 app[web.1]: > concurrently "npm run server" "npm run client"

2018-11-06T08:36:45.753116+00:00 app[web.1]:

2018-11-06T08:36:47.147860+00:00 app[web.1]: 1

2018-11-06T08:36:47.147877+00:00 app[web.1]: 1 > [email protected] client /app

2018-11-06T08:36:47.147879+00:00 app[web.1]: 1 > webpack-dev-server --mode development --devtool inline-source-map --hot

2018-11-06T08:36:47.147881+00:00 app[web.1]: 1

2018-11-06T08:36:47.172481+00:00 app[web.1]: [0]

2018-11-06T08:36:47.172485+00:00 app[web.1]: [0] > [email protected] server /app

2018-11-06T08:36:47.172487+00:00 app[web.1]: [0] > nodemon src/server/index.js

2018-11-06T08:36:47.172488+00:00 app[web.1]: [0]

2018-11-06T08:36:47.672353+00:00 app[web.1]: [0] [nodemon] 1.18.4

2018-11-06T08:36:47.673281+00:00 app[web.1]: [0] [nodemon] to restart at any time, enter rs

2018-11-06T08:36:47.673747+00:00 app[web.1]: [0] [nodemon] watching: /app/src/server/**/*

2018-11-06T08:36:47.674424+00:00 app[web.1]: [0] [nodemon] starting node src/server/index.js

2018-11-06T08:36:47.963706+00:00 app[web.1]: [0] Listening on port 45437

2018-11-06T08:36:48.299567+00:00 heroku[web.1]: State changed from starting to up

2018-11-06T08:36:48.679674+00:00 app[web.1]: 1 clean-webpack-plugin: /app/dist has been removed.

2018-11-06T08:36:48.905698+00:00 app[web.1]: 1 ℹ ｢wds｣: Project is running at http://localhost:3000/

2018-11-06T08:36:48.906031+00:00 app[web.1]: 1 ℹ ｢wds｣: webpack output is served from /

2018-11-06T08:36:48.956210+00:00 app[web.1]: 1 ⚠ ｢wds｣: Unable to open browser. If you are running in a headless environment, please do not use the --open flag

2018-11-06T08:36:55.276089+00:00 heroku[router]: at=info method=GET path="/" host=fast-earth-60949.herokuapp.com request_id=2474b83b-65ce-43b4-a54f-6851d5f55a7c fwd="78.112.168.129" dyno=web.1 connect=0ms service=9ms status=404 bytes=360 protocol=https

2018-11-06T08:36:57.303048+00:00 app[web.1]: 1 ℹ ｢wdm｣: Hash: 6de9947fac0c16b70883

2018-11-06T08:36:57.303058+00:00 app[web.1]: 1 Version: webpack 4.19.1

2018-11-06T08:36:57.303061+00:00 app[web.1]: 1 Time: 8512ms

2018-11-06T08:36:57.303063+00:00 app[web.1]: 1 Built at: 11/06/2018 8:36:57 AM

2018-11-06T08:36:57.303066+00:00 app[web.1]: 1 Asset
Size Chunks Chunk Names

2018-11-06T08:36:57.303069+00:00 app[web.1]: 1 bundle.js 7.42 MiB main [emitted] main

2018-11-06T08:36:57.303071+00:00 app[web.1]: 1 favicon.ico 40.4 KiB [emitted]

2018-11-06T08:36:57.303073+00:00 app[web.1]: 1 index.html 717 bytes [emitted]

2018-11-06T08:36:57.303074+00:00 app[web.1]: 1 Entrypoint main = bundle.js

2018-11-06T08:36:57.303077+00:00 app[web.1]: 1 [./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]

2018-11-06T08:36:57.303078+00:00 app[web.1]: 1 [./node_modules/react-dom/index.js] 1.33 KiB {main} [built]

2018-11-06T08:36:57.303080+00:00 app[web.1]: 1 [./node_modules/react/index.js] 190 bytes {main} [built] 2018-11-06T08:36:57.303082+00:00 app[web.1]: 1 [./node_modules/url/url.js] 22.8 KiB {main} [built]

2018-11-06T08:36:57.303084+00:00 app[web.1]: 1 [./node_modules/webpack-dev-server/client/index.js?http://localhost:3000] (webpack)-dev-server/client?http://localhost:3000 7.78 KiB {main} [built]

2018-11-06T08:36:57.303087+00:00 app[web.1]: 1 [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]

2018-11-06T08:36:57.303090+00:00 app[web.1]: 1 [0] multi (webpack)-dev-server/client?http://localhost:3000 (webpack)/hot/dev-server.js ./src/client/index.js 52 bytes {main} [built]

2018-11-06T08:36:57.303091+00:00 app[web.1]: 1 [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]

2018-11-06T08:36:57.303093+00:00 app[web.1]: 1 [./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]

2018-11-06T08:36:57.303095+00:00 app[web.1]: 1 [./node_modules/webpack/hot sync ^./log$] (webpack)/hot sync nonrecursive ^./log$ 170 bytes {main} [built]

2018-11-06T08:36:57.303099+00:00 app[web.1]: 1 [./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 KiB {main} [built]

2018-11-06T08:36:57.303100+00:00 app[web.1]: 1 [./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]

2018-11-06T08:36:57.303102+00:00 app[web.1]: 1 [./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]

2018-11-06T08:36:57.303104+00:00 app[web.1]: 1 [./src/client/Layout.js] 4.33 KiB {main} [built]

2018-11-06T08:36:57.303106+00:00 app[web.1]: 1 [./src/client/index.js] 205 bytes {main} [built]

2018-11-06T08:36:57.303108+00:00 app[web.1]: 1 + 349 hidden modules

2018-11-06T08:36:57.303109+00:00 app[web.1]: 1 Child html-webpack-plugin for "index.html":

2018-11-06T08:36:57.303111+00:00 app[web.1]: 1 1 asset

2018-11-06T08:36:57.303113+00:00 app[web.1]: 1 Entrypoint undefined = index.html

2018-11-06T08:36:57.303115+00:00 app[web.1]: 1
[./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html] 828 bytes {0} [built]

2018-11-06T08:36:57.303116+00:00 app[web.1]: 1
[./node_modules/lodash/lodash.js] 527 KiB {0} [built]2018-11-06T08:36:57.303118+00:00 app[web.1]: 1
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {0} [built]

2018-11-06T08:36:57.303119+00:00 app[web.1]: 1
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]

2018-11-06T08:36:57.303457+00:00 app[web.1]: 1 ℹ ｢wdm｣: Compiled successfully.

2
node.jsreactjsexpressherokuwebpack
Can you add heroku logs to your question? If possible, a link to your web app would also help. - HalilC
So the first thing I notice your file organization. Could you explain how you started this project? Why do you have the Node and React stuff inside of src? Did you not start the backend first in the root folder and then add a client folder for the create-react-app work? Please explain. The client folder should have its own package.json file. - Daniel
I used the following tutorial: github.com/vlw0052/Tutorial---ReactJS-and-Socket.io-Chat-App - kamal951

2 Answers

1
votes

You need to add your node version to your package.json.

Example:

  "engines": {
    "node": "10.11.0"
  }

I answered in the comments but it is not the best way so I'll edit here.

Since you are trying to serve static content try with the static middleware.

Remove

app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname,'../../public/index.html'));
});

And add

app.use(express.static(path.join(__dirname,'../../public')));

Second edit.

You need to build your project and serve the folder, usually is a dist or build folder.

To do this you have a couple of options, one is to build the project before publishing your changes to heroku but it can get a bit tedious.

The other option is to do a postinstall script so after heroku executes npm install the project gets built and the dist or build folder created with the latest changes.

"postinstall": "npm run build"

If you don't want the script to run everytime you do npm install you can use if-env with an environtment variable in heroku.

"postinstall": "if-env NODE_ENV=production && npm run build"

Once you know what folder is being created when building change the next line.

app.use(express.static(path.join(__dirname,'path to the folder with the prod build')));
0
votes

Without the Heroku logs, its kinda of a speculation...BUT

Cannot GET / - means express is not answering to the path..

Heroku is serving NodeJs using express and thats where the bug should be

From checking the code in server/index.js you are using path package and forgot to import it :)

const path = require('path');

Once you fix that you will also need to add a condition to reach DIST folder and not public (As you will be serving the DIST folder)

if (process.env.NODE_ENV === 'production') {
    app.use(express.static(path.join(__dirname, 'build')));
    app.get('*', function (req, res) {
        res.sendFile(path.join(__dirname, 'build', 'index.html'));
    });
}

*Also check dist is loading and is not on .gitignore

Good luck!