Deploy with Heroku

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: