How to host a full-stack application on Heroku

If you have built a full-stack application (using React, Node.js) that is running successfully locally on your dev-machine, you would like to host it on the internet so that you can share it with your friends and family. In this post, I will guide you through simple steps on how you can do that.

You can host your application as a single project on Heroku.

In the front-end part of your project, change baseUrl (or the URL that you use to communicate with backend) to a relative Url like as follows:

const baseUrl = "/api"; //run locally using http://localhost:4000/

If you have created your front-end application using create-react-app a build file of the project can be created with the following command.

npm run build

Let's run this command from the root of the frontend project.

This creates a directory called build which contains the directory static. Minified version of our application's JavaScript code will be generated to the static directory.

Let's move to the backend side of the application.

Heroku uses its own PORT so change the definition of the port your application uses at the bottom of the index.js file like so:

const PORT = process.env.PORT || 3001
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`)
})

Now, copy the build file from the front-end project to the backend project.

To make express serve the front end(ie. static content like index.html and the JavaScript, etc.,), we need a built-in middleware from express called static.

We need to add the following amidst the declarations of middlewares

app.use(express.static('build'))

Whenever express gets an HTTP GET request it will first check if the build directory contains a file corresponding to the request's address. If a correct file is found, express will return it.

In the backend part of your project,
add a file called Procfile to the project's root to tell Heroku how to start the application.

web: npm start

You can also write this in Procfile if index.js is the entry point of your project.

web: node index.js 

Make sure you have initialized git and added .gitignore, doing so will ensure that your node_modules and sensitive data of your is not over the internet.

Now, you can create a Heroku project using Heroku CLI or UI provided by Heroku. We will use the Heroku CLI.
To start with Heroku CLI you need to first login into Heroku

$ heroku login

Fill in the email and password.

$ heroku create link_of_the_name_that_you_want_to_host_on

commit your code to the repository

$ git commit -m "message" 

$ git push origin master

$ git push heroku main

You can also check the logs on Heroku using

$ heroku logs -t 
//which prints the logs to Console whenever something happens on the server.

So your application is now hosted on the Heroku. If you wish you can also check if the application works locally as a full-stack application, all you need to do change the Url to http://localhost:4000/

The problem I faced hosting such an application was that If I had to make any changes in the front-end I had to change the build file of the backend.

I hope this helps you host your application with some ease.

Don’t hesitate to clap if you considered this a worthwhile read!