How do I deploy ReactJs + Node app onto remote server?

Question

Assuming I'm not using any third party service, just a dedicated server, how do I go about doing this? I'd like to use this as an example. In it, there's a build folder. I understand I can pretty much just copy paste the contents of this into the public_html of the remote server after doing npm run build but then there's the /server folder which is using node and possibly interacting with the database, can't be put in with the rest of the build js.

My best guess is that I would npm run build and ftp the contents of the build folder to public_html on the remote server then I would put the contents of the server folder onto another subdomain and then ssh into the server and do npm start in said subdomain? Or possibly have it in a subfolder of the public_html. I'm from a php background and used to vanilla js + php so any advice is much appreciated.

Yeah have a separate subdomain 'server', 'api' or whatever, have that running on the remote server. the build folder will just be the ui which you can push to the 'dashboard','UI' folder. — Shivam Gupta
– Shivam Gupta, Commented Aug 6, 2019 at 22:24
I feel like most axios/fetch requests I see have the url as /api/users as opposed to https://api.something.com:3000/users — Dan185
– Dan185, Commented Aug 7, 2019 at 2:10

Pawan Sah · Accepted Answer · 2019-08-07 12:46:41Z

1

First create build folder in react side by running

npm run build

then add these lines of code in the node side in app.js/index.js

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

Then deploy it to heroku/remote server.

Note: remember to remove /build line from .gitignore file

edited Aug 7, 2019 at 12:46

answered Aug 7, 2019 at 10:06

Pawan Sah

1631 gold badge1 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dan185 Over a year ago

Looking through it, I found this stackoverflow.com/questions/54743029/… I suppose I could redirect the /api subfolder to the url on which the node server is running? In that case the server wouldn't have to be on another subdomain

Pawan Sah Over a year ago

@Dan185 this is exactly what is happening we are using proxy point to server domain so when we make request in client side for something like /api/users it is actually making request to server_domain/api/users and fetching data using axios and giving it to react app

Dan185 Over a year ago

I will want to set up a proxy then to allow the front end subdomain to communication with the api on the other subdomain

Collectives™ on Stack Overflow

How do I deploy ReactJs + Node app onto remote server?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related