Vite + Heroku

Deploy a Vite app on Heroku

What do you do when you struggle to do something that's supposed to be in the official documentation of a tool and isn't?
You search the web and attempt hacks until you find a way out, right?

I take it a step further whenever I can! I document it for my future self and share it publicly to help someone else. That's how I started my technical writing journey.

Recently, I was attempting to deploy a Vite app to Heroku.

Deploying to Vercel is straightforward with no config whatsoever since Vercel has first-class support for Vite. On the other hand, it was a struggle to get it right on Heroku.

Here's how you deploy a Vite app as a Static Site on Heroku.

Deploying a Vite app on Heroku

Introduction

Context: Heroku is not featured in Vite's documentation

Actually, Heroku was removed from the docs because:

  • the instructions were outdated AND

  • Heroku removed its freemium tier, and since Vite is open source and thus accessible, some contributors felt that Heroku should have the rightful steps on their own support docs.

I decided to create a GitHub PR for this anyway. I thought there was a 50-50 chance it'll be accepted. The PR was closed. Hence, this post on my development blog.

Steps to deploy a Vite app on Heroku

You can deploy your Vite app as a Static Site on Heroku.

  1. Install Heroku CLI

  2. Create a Heroku account by signing up

  3. Run the following command (which opens a browser window) and fill in your Heroku credentials

     heroku login
    
  4. Install the serve package

     npm install --save serve
    

    This will help you serve the static site created at ./dist after the build.

  5. Add a start script to your package.json . The last word (dist) denotes the destination folder name where the build files are stored after running npm run build .

     "start": "serve -s dist",
    

    Heroku will need the start and build scripts, so ensure that the scripts section of your package.json has those two at the minimum:

     {
           ...
           "scripts": {
             ...
             "start": "serve -s build",
             "build": "vite build",
             ...
           },
           ...
     }
    
  6. Set up your Heroku git remote

    Initialize version control, in case you haven't, and commit your changes:

     git init
     git add .
     git commit -m "My site ready for deployment to Heroku"
    

    Create an app on Heroku:

     heroku apps:create
    

    Heroku will set the heroku/nodejs buildpack by default. However, in case that doesn't happen, set it by running the following command:

     heroku buildpacks:set heroku/nodejs
    
  7. Deploy your site

    Note: Replace main with your current branch

     git push heroku main
    
  8. Open the deployed app on your browser

     heroku open