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