Search⌘ K
Home
Courses
Building Full-Stack Web Applications With Node.js and React

Deploy with Heroku

Explore how to deploy a full-stack Node.js and React application to Heroku by restructuring the app to serve both frontend and backend from one port, configuring Express and environment variables, and integrating MongoDB Atlas for cloud database hosting. This lesson guides you through creating a Procfile, setting up GitHub deployment, and managing necessary deployment settings for a successful app launch on Heroku.

We'll cover the following...

Throughout the course, we built the application using a dedicated Educative instance for the course that can be accessed through the code widgets. We can now deploy the application to any private or public host. In this lesson, we’ll explain how to deploy the application to Heroku. If we want to get a detailed breakdown of the deployment process in general, we can read through the DevOps path.

Directory structure

Heroku can only deploy Node.js applications, so we need to serve the front-end application through the backend. In other words, instead of having different ports for the backend and the frontend, we’ll use one port to serve the whole application. This is why we need to modify the directory structure to serve the application easily.

At this point, the back-end application is the root of everything, so we’ll move the whole code of the frontend into the sub-directory of the backend. The directory structure should look like this:

Modify the application

Serving the frontend from the backend requires the following additional configuration in Express:

  1. We need to add an additional field to package.json in the front-end application, so the client can send the HTTP requests on the same port that the backend application is running on.
Javascript (babel-node)
// frontend/package.json
{
    // ...rest of the file
    "proxy": "http://0.0.0.0:4000",
    // ...rest of the file
}
...