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.