In the last part of this tutorial, we finished building our frontend app using react and redux.

In this part, we'll be deploying our app on heroku, a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

• First, we need to serve our frontend folder to the backend, in the server.js file in backend folder

const path = require('path')

//The code below should come after the routes defined

if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, '../frontend/build')))
// This indicates that the static folder for our backend is the build folder provided by our frontend
  app.get('*', (req, res) => res.sendFile(path.resolve(__dirname, '../', 'frontend', 'build', 'index.html'))
/* The code above means that for every route in our app apart from the API routes, 
the file that should be returned is the index.html file located in the build folder
provided by the frontend, we don't have the build folder yet until
we run npm run build in the frontend folder
*/
} else {
  app.get('/', (req, res) => {
    res.send('Please set  NODE_ENV to production')
  })
}

We have a new environment variable NODE_ENV, in .env

NODE_ENV =  production

Now that everything is set up, it's time to deploy to heroku

Heroku

• Install the heroku CLI here
• Run heroku --version to see if heroku is installed on your system
• Sign up to heroku here
• Run heroku login to log in via browser or heroku login -i to login via terminal
• Run heroku create fullstacktodoapp1 or any name that has not been taken yet
• Log in to your account to see your newly created app

• We need to create a .gitignore file in our root folder, that allows us to include file that will not be pushed to heroku, in .gitignore

node_modules
.env

Since .env will not be pushed as it contains some important details that we don't want everyone to have access to, heroku provides a way for us to add it to our app

• On your heroku dashboard, click settings, locate the Config Vars section and click on Reveal Config Vars, add all necessary items in .env to this section We don't need to add the PORT variable as heroku provides its own PORT for us to use
• We need to add a heroku postbuild script to package.json located in our root folder that runs the npm run build command for us every time we push to heroku instead of doing it manually , in the scripts object in package.json, add

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

• Run git init
• Run git add .
• Run git commit -m 'finished project'
• Run heroku git:remote -a fullstacktodoapp1
• Run git push heroku master or git push heroku main as the case may be.

We should have our app running as this

Thanks for following this tutorial and I must salute you for you tenacity and doggedness.

All Codes can be found on here

Please like, comment and share to as many as possible.