Published on: 2025-04-27
I have memories struggling to get all the tools needed for a nice front end project playing nice with each other. I was last seriously doing front end development before Typescript had been released and folks where just starting to puzzle through JavaScript classes leading up to ES6. And yes, I did need to check on dates to remind myself of that.
Since then I’ve occasionally bounced past toy front end projects. Typescript always seemed like such a great step forward relative to JavaScript, but the toolchain was a pain. Then add in React, a bundler, and a so-so development framework. Without sitting down and regularly working in that area, I didn’t develop a functional skill set with FE development.
This past year I discovered Vite. It actually does a really nice job of taking all the obscure ritual of separate tools and tucking them behind an abstraction that just works. I get a bit twitchy not knowing how everything in the stack is fitting together, but I’m super happy to be able to sit down and get a Vite project running smoothly end-to-end in just a few minutes.
Enough talk. How do I actually do this?
I use nvm to manage npm. The description
below was written while I’m on npm 10.9.0.
npm create vite@latest foobar --- --template react-ts
cd foobar
npm run devHop into a browser and checkout the page. That’s it. At that point you’ve a nifty project ready to start jamming on.
Side note. The triple dash is needed on Windows to get the correct template in place as noted in this issue. Sigh, Windows.