There are many suggestions online to use the heroku-buildpack-static .

The problem with this is that it is deprecated and will not work with the latest heroku stacks.

In their readme file they suggest to use an NGINX buildpack, but it looks like an error prone process.

I have figured other another way just by using the heroku/nodejs build pack

You can start by setting the heroku/nodejs in your application

heroku buildpacks:set heroku/nodejs -a my_application

In principle we just want to run tsc && vite build && vite preview but there are some caveats.

If we add this in a single npm run task, then the heroku build job runs out of memory.

So, we need to split it in two run jobs. This is done by building it in the postinstall script.

Also, we need to enable, network mode and set the correct port in the serve-heroku script

package.json

...
  "scripts": {
    
    "build": "tsc && vite build",
    "postinstall": "npm run build",
    "serve-heroku": "vite --host 0.0.0.0 --port $PORT preview",
    ...
  },

....

Now we need to tell heroku to run serve-heroku instead of start script.

We either edit or create a Procfile

Procfile

web: npm run serve-heroku

Et voila!