Introduction.
It is no longer news that React is one of the most used JaveScript Frameworks, preferred by most developers over alternatives like Vue, Angular etc. But, do you know spinning up your React applications can sometimes be a hassle?
Over the years, developers have found the waiting time required to initialize a new React environment using the create-react-app
tool to be a bottleneck, especially developers in places where the internet connection is poor. There is a common joke among developers: "The longer the loading time, the more Twitter feeds you get to read", hahaha get It?
Well, you don't always want to check your feeds while waiting for your development environment to spin up. In this article, you'll learn a new and faster way to spin up your React apps: create-Vite
What Is Vite?
Vite is a modern development tool that is used to build a fast and well-optimized web application, created by Evans You- the creator of Vue.js. It has gone ahead to be one of the most popular tools for modern development. Due to its superfast Hot Module Reload(HMR), it can add and remove modules while the application is running eliminating the constant need for reloads during development.
Unique Features of Vite.
Lazy Loading of Modules: This simply means that In Vite a code(module) is loaded only when it is required. This generally leads to smaller bundle sizes and even faster loading times for your users, as the noncritical codes in your program will only be loaded when required.
Built-in development Server: Vite ships with a fast and efficient development server that not only allows you to build and test your application in real-time but also allows automatic reload of your code so you do not have to manually reload your development server to see the changes you have made.
Instant Server Start: Vite eliminates the need for bundling, by serving your modules instantly.
Support For CSS modules: Vite Ships with built-in support for CSS modules, therefore, eliminating the need for extra dependencies downloaded by you.
Support for modern tools: Vite provides an out-of-the-box support for modern development tools such as JSX, TypeScript, Dynamic Imports, Svelte etc.
Server Side Rendering(SSR).
How to SetUp Your React Projects with Vite.
Run
npm create vite@latest
in your terminalnpm create vite@latest
After running the above code, vite will prompt you to enter a project name- In this example, you'll enter "test-app"
output: npm create vite@latest project name: test-app
Vite will then prompt you to select your preferred framework-In this example, you'll select React.
Output ? Select a framework: » - Use arrow-keys. Return to submit. Vanilla Vue > React Preact Lit Svelte Others
Next, Vite will prompt you to select your preferred development language-In this example you will select JavaScript.
Output ? Select a variant: » - Use arrow-keys. Return to submit. > JavaScript TypeScript JavaScript + SWC TypeScript + SWC
Done! You'll see a prompt informing you that your project has been scaffolded, with an instruction on how to install your project dependencies using
npm
Output Done: Scaffolding project in User\Projects\test-app... Done. Now run: cd test-app npm install npm run dev Done in 120.89s
Now go to the new project folder
cd test-app
Install dependencies by running
npm install
npm install
Start development server by running
npm run dev
npm run dev
Voila! You're all done now, you will get a prompt showing where your development server is being served
VITE v4.0.4 ready in 247 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h to show help
Visit localhost:5173 (from the code snippet above, yours could be different) in your browser to see your development page.
You can run all of these commands in your computer's default CLI or you can use the terminal provided by your code editor.
Comparing Vite with create-react-app(CRA).
The Table below summarizes the basic differences between Vite 4.0 and CRA
PROPERTY | VITE | CRA |
SPEED | Fast development setup | Slow development setup |
Hot Module Reload | Yes | No |
Bundler | ESbuild | Webpack |
Out-of-the-box Support for TypeScript | Yes | No |
Server Side Rendering(SSR) | Yes | No |
Dynamic Imports | Yes | No |
Conclusion
In this article, you have learned the unique features of Vite and how it can help optimize your development process. Personally, ever since I started using Vite to spin up my development environment, it has been great! You no longer have to quit and restart your development server before seeing the changes you have made, the out-of-the-box support for TypeScript and the Increased development Speed are very impressive features. Once you go to Vite, with its incredible features and active community, you will never want to leave!
That's all for now folks, Let me know what you think about this article in the comment section below; Until next time: code-eat-sleep-repeat!