Steps to 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.

Install Heroku CLI
Create a Heroku account by signing up
Run the following command (which opens a browser window) and fill in your Heroku credentials
```
 heroku login
```
Install the serve package
```
 npm install --save serve
```
This will help you serve the static site created at ./dist after the build.
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",
         ...
       },
       ...
 }
```
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
```
Deploy your site

Note: Replace main with your current branch
```
 git push heroku main
```
Open the deployed app on your browser
```
 heroku open
```

Vite + Heroku

Deploy a Vite app on Heroku

Table of contents

Deploying a Vite app on Heroku

Introduction

Steps to deploy a Vite app on Heroku