How to deploy a Webapp to Heroku (Node.js, React.js and MongoDB)

On my last post I explained how to create a full-stack webapp with Node.js, React.js and MongoDB.
Now I am going to show how to deploy this app to Heroku.

If you don't have it yet, you can find the source code here.
I recommend cloning this repo to follow the tutorial, but you are free to try the tips below on your on project.

After cloning the project, you have to create an account at Heroku

Heroku is a cloud server that makes it really easy to deploy applications with an easy and simple way, using git commands. This server also has very nice free plans where you can try many types of applications, databases and much more.

After creating and signing in to your Heroku account, you can create a heroku app. We can do that in the command line.
Navigate to the root of the project you just cloned and run the following commands:

$ heroku login
$ heroku create <name of your app>

You should get the following response:

Now, in the package.json in the root of the project, add the following line under scripts:

"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"     

Your package.json file should look like this:

{
  "name": "node-react-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "client": "npm run start --prefix client",
    "server": "nodemon index.js",
    "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\"",
    "start": "node index.js",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"    
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "mongoose": "^5.6.3"
  },
  "devDependencies": {
    "concurrently": "^4.1.1",
    "nodemon": "^1.19.1"
  }
}

Now, save your file and commit the changes you made.

$ git commit -am "Added heroku postbuild scripts"

As we have already created a Heroku app, we can just push it to the server.

$ git push heroku master

You should see some build scripts running and a message at the end saying that your app was deployed to Heroku successfully.

Now, you can navigate to your Heroku Dashboard and see that your app was deployed successfully.

But this app is not ready yet, we still need to add the database.

Click to enter in your project on Heroku. You should see something like this:

• Click in Configure Add-ons.
• Search for mLab MongoDB.
• Click it and select the option Sandbox - Free

If you navigate to Settings and click in the option Reveal vars, you will see that it added automatically the MongoDB environment variable.

Now, your project should be up and running and you can see that by clicking in the button Open app, in the top of the Heroku dashboard page.

And Voila! We have a production ready full-stack project successfully deployed.

Hope you find this tutorial useful.

Comments

[Daniel Howe]

Nice article. What is the point of the NPM_CONFIG_PRODUCTION flag, and when does it get set to true?

[Thiago Pacheco]

Thank you, Daniel.

The NPM_CONFIG_PRODUCTION is used in case you need access to packages declared under devDependencies in a different buildpack or at runtime.
Then when your app is ready for production it is better to set it to true.

[daniel]

I can't express all my thanks for this post and the previous one. Thank you very much!

[Thiago Pacheco]

Thank you Daniel, it makes me really happy that you liked it!!!

[xporium]

Hi,
Nice article. but after added "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client" i cant deploy code on heroku it is giving me error like "failed to push some refs to my application"
and if i remove this line then its deploy successful but at that time site not working. So can you tell me why is this happening?

Thanks,
Dilip

[Thiago Pacheco]

Hi Dilip,

This error usually happens when there are some conflicts while pushing to heroku, I am not sure if that is because of the environment variable.

Could you tell me what do you get in your logs on Heroku?

You can retrieve the logs going to the root of your project and using the following command:

heroku logs --tail

[Jack]

I've read that mLab is being deprecated in favor of MongoDB Atlas. Is this true?

[Thiago Pacheco]

Yes, that is true.
MLab was bought by MongoDB Inc, so they are working on migrating everything.
But mLab is still supported on Heroku.

You can have more information here blog.mlab.com/2018/10/mlab-is-beco...

[TomaszChylinski]

Seems that once you add mLab you need to add a user and edit your config

[Thiago Pacheco]

It should not be necessary, once mLab provides us with an environment variable on Heroku settings automatically.

[LeoSalgueiro]

Hi thiago, good post!
i have a problem. the deploy in heroku and connection its ok, but when i tried make petitions to the backend, i recived a 503 unavailable.
I have the settings from the previous post...

[Thiago Pacheco]

Hi Leo, thank you!
Usually when you get error 503 is because there was something wrong with the deployment.
You can use the heroku logs to check what happened:

heroku logs

Take a look at the docs here for more info:
devcenter.heroku.com/articles/logging

[Lahiru Jayamanna]

Hi Thiago,
Now heroku not allowing to add mLab MongoDB addon.

And I need to why we need to add it? can't we just manually input the db url as config variable inside heroku?

[deepgera]

hi,thiago my react app runs perfectly i wrote
"build": "concurrently \"npm run start\" \"cd webpage && npm install && npm run start\"" this helped me in building app locally but when i deploy on heroku it says concurent not found