How to deploy ReactJS frontend and NodeJS/Express backend from the same project folder?

Question

GitHub repo: https://github.com/byeung2019/MIQSTechnologies

Hey guys,

This is my first time deploying a website online, so I'm confused and anxious of where to even begin.

My frontend is built using ReactJS, and my backend uses NodeJS/Express/GraphQL to fetch data from an external API ( CryptoCompare ).

My website works locally.

My frontend and backend each has its own unique package.json and .env file with its respective dependencies and dev dependencies.

Through my research it's been recommended to host the frontend using Netlify, and the backend with Heroku.

However, since this is my first time deploying, I'm confused about the following:

1. How to deploy the frontend and backend separately from the same project folder, with them having their own respective package.json file.

2. Would I need to rewrite code in index.js within the backend folder in order to connect my frontend GraphQL requests to my backend.

Thank you so much!

Answer 1

First of all this is a complicated question to provide an exact answer, you will have to google and learn few things. But here is a high level idea.

After developing any app using react or angularjs you can follow the build instructions and build the app. It is ng build --prod in angular for example. Then you just need the build to deploy and it does not depend on package.json

You have to deploy your backend app as it is and there is few options then you can follow most common is,

• Using a proxy like nginx
• Host your build inside the node backend

Here is a guide how to host your apps using nginx for nodejs and angular https://www.journaldev.com/27234/nginx-reverse-proxy-node-angular

Hope you will get the idea.