Instant React Dev Server

Boost your developer experience up a knotch!

What is Vite?

It also offers a build command that will bundle your code in a more traditional way for production. This gives you the best of both worlds! You can have a super-fast dev server while keeping the traditional benefits of tree-shaking, lazy-loading and chunk splitting in production. Let’s learn how to set up all of this!

Setting up

yarn create @vitejs/app react-vite --template react-ts

This command will create a Vite app using the React Typescript template. It will populate your project with all the relevant dependencies and package.json scripts needed to run both your dev server and build your app. Let's explore a little bit our package.json file:

{
"name": "react-vite",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"serve": "vite preview"
},
"dependencies": {
"react": "^17.0.0",
"react-dom": "^17.0.0"
},
"devDependencies": {
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@vitejs/plugin-react-refresh": "^1.3.1",
"typescript": "^4.1.2",
"vite": "^2.1.5"
}
}

Vite does a pretty good job of keeping things light! The dependencies are kept to the strict minimum for running a react application.

Another interesting thing to note is that all of the tools are included directly in the Vite package. The dev server, CLI and build scripts are all directly included inside Vite! This is great as it is a one-stop shop for all your project needs.

That’s it for setting up! One command and everything is ready! We do need to host this, however! Let’s jump on it!

Hosting on Vercel

Luckily, Vite provides a build script. Under the hood, Vite uses the Rollup bundler. All the configuration and setup is done for you so all that you have to do is call the build script when you want to produce a static bundle for your site. Let’s now go ahead and set this up for Vercel hosting (be sure to be connected to the Vercel CLI):

cd react-vite
yarn add vercel -D
yarn vercel

This will trigger the Vercel CLI and ask you some basic questions. You should keep all the defaults except for the Output Directory. Set this one to dist to be sure this works with Vite's Typescript bundling. Once this is done, Vercel will proceed to deploy your project online. Let's now add a deploy command to our project. Your package.json will now look like this:

{
"name": "react-vite",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"serve": "vite preview",
"deploy": "vercel --prod"
},
"dependencies": {
"react": "^17.0.0",
"react-dom": "^17.0.0"
},
"devDependencies": {
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@vitejs/plugin-react-refresh": "^1.3.1",
"typescript": "^4.1.2",
"vercel": "^21.3.3",
"vite": "^2.1.5"
}
}

Once this is done, you now a developer setup with a super-fast dev server and a convenient deployment process!

Conclusion

  • By providing a pre-configured build script, Vite integrates well with Vercel

Connect with me on Twitter @gbibeaul if you have any questions.

Originally published at https://frontend-devops.com.

💻 💻 Software Engineer at @filevine . 📖 📖 Instructor for @udacity . ✍️ ✍️ Writer at http://frontend-devops.com