How to deploy React TypeScript app to Vercel with Vite

Issue

I'm trying to deploy a React TypeScript project to Vercel, building with Vite. However, Vercel doesn't install devDependencies during build time like Heroku does, so it doesn't know what "vite build" is (same for tsc).

I've followed the Vite guide for Vercel deployment.

It feels very odd to include Vite and TypeScript as a normal dependency, so that it'll be included in the bundle. I know it's possible to configure Vite to exclude certain dependencies on your bundle, but is this really the way to do it?

Solution

Have a read of these two tweets:

https://twitter.com/dan_abramov/status/1098234219506085889 https://twitter.com/dan_abramov/status/1098234004954857472

He's talking about CRA, but the same principle applies here to vite.

Because vite build produces static HTML/CSS/JS and not a node app, the difference between devDependencies and dependencies is moot.

Strictly speaking, your package.json lists the required dependencies for the code that builds your static bundle to build your app.

It's similar to the way that a factory requires paint, electricity, metal, etc to produce a car, but once the car is finished and has left the factory it's self-contained and has all the paint and metal it needs. Your codebase is (strictly speaking) a factory, and your package.json lists the requirements for the factory, not the car itself.

TLDR; perfectly fine to add it to dependencies, it won't end up in the final bundle.

---

EDIT: if you're wondering why the distinction between dependencies and devDependencies exists, it's because it's designed to separate what packages are required during ongoing production operation of a node app (eg, for an app that's serving HTTP requests, a core networking module) vs packages that are only needed locally (eg, a code formatter).

When the "production" app is an ephemeral script that runs for a few seconds inside a build pipeline to generate some static HTML/CSS/JS, the difference between dependencies and devDependencies doesn't mean much. It's a common misconception that it has any kind of effect on what ends up inside the static bundle.

Answered By - mitchazj