Switching from CRA to Vite

Yes I know, I am the last one to the party here. I loved the ease of Create React App (CRA) but finally, I have to accept that it has been deprecated for over a year. A quick browse of Reddit suggested Vite as the new quick start to build a React App. Here is my review of switching over.

Scaffolding

First of all, the configuration is leveled up from CRA. Two different template paths mean 16 options for your web app config, plus a library of community-maintained templates!

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts
solid	solid-ts
qwik	qwik-ts

Via Getting Started | Vite

I did not brave TypeScript because I had a deadline for the project I was working on. In the future, I would opt for the TypeScript React-ts config.

Trouble Shooting

Create-Vite seemed to run smoothly until I couldn’t launch the dev server. The root cause was my version of node. After upgrading to Node 20.16.0 the dev server ran smoothly.

I modified a few files before I figured out the issue was Node. My config file was missing everything below “plugins: [react()].” I’m not sure if it would have been created correctly if Node had been updated from the beginning. Either way, below is what my config file looks like if anyone else’s config file doesn’t populate.

## vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: true, // Here
    strictPort: true,
    port: 8080
},
resolve: {
    alias: {
        './runtimeConfig': './runtimeConfig.browser'
    }
},
define: {
    _global: ({})
}
})

Deployment

After that, it was mostly smooth sailing. I have a few warnings in my code but everything deployed just fine. I like that the build folder is streamlined compared to other small web apps I’ve built with CRA.

Please note that I am not building sites with backends. All the logic is on the front end and TBH backend stuff sounds boring. So don’t expect a backend review any time soon.

Text message thread: Q: How's create-vite going? A: I've got it running smoothly. Or as the movie hackers would say "I'm in."

The project I was working on is a static site for my mom’s Northfield school board re-election campaign! The site is deployed at https://unitedfornorthfield.com/ and the GitHub repo is here if you’re curious. Don’t expect a long log of commits, I was lazy. The project was a total of 4 hours.

Conclusion


Int. Coffee Shop - Day.

ANGELA sits hunched over her laptop with a steaming London Fog to her left. She's lost in thought but clearly happy. 

ANGELA (V.O.)
The funny part of this is I can't go back to CRA even if I didn't like Vite. It is deprecated but luckily, Vite seems like a solid alternative with room to dive deeper. 

ZOOM-OUT. ANGELA typing the happy conclusion to this episode (a pretty straightforward web development exercise). 

ROLL CREDITS

Scaffolding

Trouble Shooting

Deployment

Conclusion

Share this: