Deployment with Heroku — Part #10 of 11

This post has been updated on August 13th, 2021! 🎉 We’ve updated the usage of React from v16.9.0 to v17.0.2, React-Redux from v6.0.0 to v7.2.4, and ReactiveSearch from 3.0.0-rc to 3.22.0.

This is the 10th post for Movies store, the React & Redux E-commerce app tutorial series created by Appbase. The final result of following this series is your own feature-rich, scalable movies store built with React and Redux!

Finally, our Movies Store app is ready to be shipped. We’ve added authentication, search, analytics, and stripe checkout so far, and now it’s time to put all these things in action.

In this tutorial, we’re going to teach you how to deploy a Next.JS project with a custom Express server with the help of Heroku.

Table of Contents

1. Getting Started with React and Next.JS
2. Basics of React
3. Home Page + Layout + CSS-in-JS (Emotion.JS)
4. Basics of Redux
5. Appbase.io + ReactiveSearch UI Components
6. Building The Search Page
7. Authentication with Auth0
8. Product Page + Checkout Page + Payment with Stripe
9. Analytics with Appbase.io
10. Deployment with Heroku (⇒ You’re here!)
    OR
    Deployment with Vercel
11. PWA (Progressive Web App) compatibility

In this post, we will be talking about these points:

• How to install Heroku?
• Set up an account with Heroku
• Deploy the app

Gettings Started

Step 1: Installation

Download the Heroku Desktop from the official website.

Alternatively, you can install it with brew:

$ brew install heroku/brew/heroku

Heroku Desktop bundles the Heroku CLI, so you will be able to run herokucommands from command line.

Step 2: Setup a Heroku Account

Run this command from your CLI to initiate the login process:

$ heroku login

If you don’t have an existing account with Heroku, then create one by completing the signup process.

That’s it, now you are logged in with Heroku.

Step 3: Deployment

Let’s create a new app named movies-store-appbase with Heroku from the dashboard.

If you’re already using a git repository then use this command to set the Heroku remote URL.

$ heroku git:remote -a movies-store-appbase

Commit your code to the repository and deploy it to Heroku using Git.

$ git add .
$ git commit -am "deploy with heroku"
$ git push heroku master

Your deployment URL will be ready in a few minutes meanwhile, you can check logs by using the activity section of the dashboard.

In this tutorial, we learned how to set up Heroku in our project and deployed our Movies Store app in minutes.

In the next tutorial, we will learn how to convert a Next.js app to a Progressive Web App(PWA).

While the tutorial in its entirety is free and includes step-by-step instructions on how to build the app, it doesn’t include the original stylesheets and a few other intricate details about the app. You can get the whole movie store app codebase (along with updates and support for the next 6 months) for $99 only (valid for a limited time).

Tap on the image to get the complete Movie store tutorial + codebase + support