Deploying ReactJS application in production (with nodeJS backend)

Question

our project is now over, we only have two weeks to give back the project for our final year's studies at University. Our teacher told us that now that development phase was over we would have to go deploy it in production phase.

We used ReactJS for the frontend (hosted in localhost://3000) and NodeJS for server/database management (hosted in localhost://3004).

I've done some research so far on how to deploy it (teacher said that ideally it was a zip that we can insert into a webpage, just like a html one, and that it would work).

So far I haven't managed to do that. Much people recommand using "webpack" for managing this but we didn't configure it in the beginning because we had no clue about reactJS and I don't know if we can do it right now. I've read tutorials etc and tried some things with NODE_ENV but till now I'm stuck with errors.

Can anyone help me & my teammates ?

Thanks in advance!

did you use react-creat-app ? can you post your webpack.config.js and your folder structure — Abslen Char
– Abslen Char, Commented Mar 22, 2018 at 18:48
I think so.. my folders are "build, node_modules, public, src" and the packages jsons. Weve started the project two or three months ago but yeah I think we used this command — Mich
– Mich, Commented Mar 22, 2018 at 18:50

Artjom B. · Accepted Answer · 2018-10-09 18:06:16Z

I assumed you used create-react-app to generate your react project. My folder structure is like:

client (it is my react app)
config
controllers
routes
models
index.js (express app is in index.js)
package.json

Following step that I used to deployed my app to Heroku:

In package.json, added this line to the scripts "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client".
Then added this "engines": { "node" : "[your node version]" } after scripts.

In index.js, put the following code after your routes set up

if (process.env.NODE_ENV === "production") {
  app.use(express.static("client/build"));
  const path = require("path");
  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}

I assume that you use git for version control and already install heroku. Open your terminal, then heroku login -> heroku create -> git push heroku master. If you do not get any error, you are success to deploy your app.

This is my GitHub https://github.com/dnp1204/instagrom that I deployed my app to Heroku. I hope it will give you some idea how to do so

Hope you will get it to work!

Abslen Char · Accepted Answer · 2018-03-22 18:58:40Z

2

To deploy a react app build with the cli create-react-app , first you need to set the host in your package.json , so in your package.json added this line

"homepage":"http://localhost/" ,assuming you will host your app on the root directory of your webserver

your package.json will look something like this

{
  "name": "nameofyourapp",
  "version": "0.1.0",
  "private": true,
  "homepage":"http://localhost/",
  "dependencies": {
    .....
  },
  "scripts": {
  ......
  }
}

then inside your app folder run this commande

npm run build

then copy what inside your build folder and paste it in the root directory of your serveur you will ended up with files like this

httdocs //root directory of your webserver
  |
  |-static
  |
  |-index.html
  |-serviceworker.js

after that you cant access your webserver from your browser : http://localhost/

answered Mar 22, 2018 at 18:58

Abslen Char

3,1453 gold badges18 silver badges29 bronze badges

10 Comments

Mich Over a year ago

nevermind !!!! I just understood that I had to copy all of this into the wamp folder "www"

Mich Over a year ago

hey man, i'm coming back to you, I've a question.. My server is hosted 3004 but my client is in 3000. our teacher advised us that it should've been in the same port but it didn't work so we used 2 ports.. can you tell me how to launch my server at 3004 at the same time ?

Abslen Char Over a year ago

once you serve it on an appache server you can configure your port in the apache config file and serve it on what ever port you want the port is configured on the server it has nothing to do with react

Mich Over a year ago

thanks for the fast answer, my teacher told us that apache worked for another group but we chose to go with nodejs and wamp for the server.. is there a way around? I have zero knowledge about apache :/

Abslen Char Over a year ago

so if i understund you correctly you need to use node js instead of apache right ?

|

Radu Prodan · Accepted Answer · 2019-01-30 18:21:50Z

0

In 2019 this does work for me:

in node.js server:

app.use('/react',   express.static(path.join(__dirname, '../client/build')));

in package.json react

http://localhost:server-port/client

and in browser just type

http://localhost:server-port/client .

You should see react homepage now. Hopefully helpful for somebody.

answered Jan 30, 2019 at 18:21

Radu Prodan

11 silver badge

Collectives™ on Stack Overflow

Deploying ReactJS application in production (with nodeJS backend)

3 Answers 3

Comments

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related