Deploying ReactJS app with NodeJS backend (using express) for server/database on heroku

Asked
Active3 hr before
Viewed126 times

6 Answers

herokuusingreactjs
90%

@Mich, i reccently managed to deploy a fullstack application consisting of react+express+mongo, on Heroku.,I have an answer on a similar issue, you could take a look and hope it helps. link: (How to deploy react with express to heroku), Is it a correct to use passive voice in the following sentence?

Pretag
 Pretag team - issue, fix, solve, resolve
88%

This ensures that when you access your app using the /db route, it will return all rows in the test_table table.,Now when you access your app’s /db route, you will see something like this:,Your browser will open up a Papertrail web console, showing the latest log events. The interface lets you search and set up alerts:

Also available via Homebrew:

$ brew install heroku / brew / heroku
load more v
72%

The last command from the above snippet will take you through some of the steps and will initialise your project with a package.json file. If you are totally new to this, you can consider this file to be a ledger where you keep the record of all the dependencies you’ll be using across the build process of your application.,Now we need to make sure that first we start our Express server and then go about starting our React server. Now there are a lot of ways to do this, and for the simplicity of this tutorial we will be using a module called concurrently to run both the servers with one command.,This will add Express as a dependency to your package.json. Now that we have this, all we need is one more dependency and that is for hot reloading of the app whenever we make some change to the code:

Pretag
 Pretag team - issue, fix, solve, resolve
65%

You’ve got a React app, and an API server written in Express or something else. Now – how do you deploy them both to a server?,Now we’ll deploy the app to Heroku, make sure it works, and then we’ll add React to the mix.,e.g., NGINX webserver proxies API requests to the API server, and also serves React static files

$ mkdir rando;
cd rando
load more v
75%

In the Config Vars section, add all of your necessary secrets, API keys, and other sensitive information in a key-value pair format. Make sure that they keys are named exactly how you named them in your .env file locally.,You can use the CLI to create your Heroku deployment, but I prefer to just go to the website.,Now we should be ready to deploy. First run the following command to login to Heroku.

My app is structured such that my Node.js app contains a subdirectory called client which contains my React app. In the Node.js server’s package.json file make sure the following scripts exist (you will probably have others, but I’m showing only those necessary for deployment).

"scripts": {
   "start": "node server.js",
   "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false && npm install --prefix client && npm run build --prefix client"
}
load more v
40%

Let's wrap up this series by deploying our React MySQL app to Heroku. Heroku is a cloud platform (PaaS) that we can use to host our app for free.,Because we are going to deploy a full-stack app, we must enable our Express server in server.js to serve static files from our React app.,Take note of the format because we will have to set our environment variables to our Heroku app like this:

Go to our package.json file. Under the scripts property, change the default start script to:

"start": "node server.js",
load more v

Other "heroku-using" queries related to "Deploying ReactJS app with NodeJS backend (using express) for server/database on heroku"