Deployment with Heroku — Part #10A of 11

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

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 Nuxt.JS project with the help of Heroku.

Want to see how to deploy a Nuxt.JS project to Vercel instead? Check this post here.

Table of Contents

1. Getting Started with Vue and Nuxt.JS

2. Basics of Vue

3. Home Page + Layout + CSS-in-JS (Emotion.JS)

4. Basics of VueX

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. A. Deploying the Nuxt App with Heroku (→ You’re here!)

10. B. Deploying the Nuxt App with Vercel

11. PWA (Progressive Web App) compatibility

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

• How to install Heroku CLI
• Setting up an account with Heroku
• Deployment with Heroku

Getting Started

Step 1: Installation of Heroku

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 with Heroku

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 our final tutorial, we will learn how to convert a Nuxt.js app to a Progressive Web App (PWA).

This entire tutorial series is available as an open-source Apache 2.0 project.

Checkout the codebase for this step over here: https://github.com/appbaseio-confidential/vue-moviestore/tree/step-9.

Or checkout the entire codebase for this app over here: https://github.com/appbaseio-apps/vue-moviestore.