Instant React Dev Server

Boost your developer experience up a knotch!

What is Vite?

Setting up

yarn create @vitejs/app react-vite --template react-ts
{
"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"
}
}

Hosting on Vercel

cd react-vite
yarn add vercel -D
yarn vercel
{
"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"
}
}

Conclusion

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