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 yourpackage.json
. The last word (dist
) denotes the destination folder name where the build files are stored after runningnpm run build
."start": "serve -s dist",
Heroku will need the
start
andbuild
scripts, so ensure that the scripts section of yourpackage.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 branchgit push heroku main
Open the deployed app on your browser
heroku open