How To Set Up a React Project with Vite?

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

  • A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).
  • A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

Vite is opinionated and comes with sensible defaults out of the box, but it is also highly extensible via its Plugin API and JavaScript API with full typing support.

Introduction 

Create a new project with Create React App if possible, although it can take a long time to install nearly 140 MB of dependencies. Vite is a lightweight utility with 31 MB of dependencies that will save you time when beginning a new project. Vite additionally links to JavaScript files using browser-native ES (ECMAScript) modules, which avoids rebuilding the entire bundle with each file modification. Because of these differences, creating, updating, and building a React App using Vite is faster.

This tutorial will scaffold a new React App using the Vite tool.

Prerequisites

  • Before getting started, make sure you have Node.js and npm (Node Package Manager) installed on your system. You can download them from the official Node.js website if you haven’t already.

Starting off

Create a new directory for your React project in your terminal or command prompt. Using the cd command, navigate to the newly created directory. Then, run the following command to create a new npm project:

Scaffolding your first Vite

You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite + Vue project, run:

Creating a Vite Project

Step 1)

This command will run the Vite executable from the remote npm repository. It will configure the necessary tools to scaffold a React local development environment. Finally, it will open a command-line menu for project settings and language types.

After the script finishes, you will be prompted to enter a project name:

Vite will quickly generate all the scaffolding for your project and some handy scripts to enable HMR.

Once the command has finished running, cd into your folder and run the following commands:

Next, navigate to localhost:5173 in your browser. The following is Vite’s default template:

Project Root

You may have noticed that in a Vite project, index.html is prominently displayed rather than hidden inside the public. This was done on purpose; while your application is being developed, Vite is acting as a server and your entry point is index.html.

Index.html is handled by Vite as source code and a node in the module graph. It resolves the JavaScript source code referenced by script type=”module” src=”…”>. Vite-specific features are also available for inline script type=”module”> and CSS that is referenced via link href>. Additionally, index.html URLs are automatically rebased, negating the need for special placeholders like %PUBLIC_URL%.

The “root directory” in Vite is where your files are served, much like static HTTP servers. It is referred to as “root” in the remaining documentation.

Vite, like static HTTP servers, has the concept of a “root directory” from which your files are served. Throughout the rest of the documentation, it will be referred to as root>. Absolute URLs in your source code will be resolved with the project root as the starting point, allowing you to write code as if you were working with a standard static file server. Vite can also handle dependencies that resolve to non-root file system locations, making it useful even in a mono repo-based setup.

Vite also allows you to create multi-page apps with multiple.html entry points.

This is how the project structure will look like. 

Conclusion 

In conclusion, setting up a React project with Vite is a game-changer for efficient and seamless development. With Vite’s lightning-fast build process and React’s powerful framework, you can create dynamic and high-performance web applications.

By following the step-by-step guide outlined in this blog, you’ll be able to effortlessly initialize a React project with Vite, taking advantage of its optimized development server and near-instantaneous hot module replacement.

Whether you’re a seasoned developer or just getting started with React, Vite simplifies the setup process, allowing you to focus on writing code and bringing your ideas to life. So, don’t hesitate to dive into Vite and experience the joy of rapid React project setup and development.

Embrace the future of React development with Vite today, and unlock a world of speed, productivity, and innovation in your coding journey. Happy coding!


Posted

in

by

Recent Post

  • A Comprehensive Guide to Sentiment Analysis Using NLP

    Businesses need to understand public interests, attitudes, behavior, and trigger points in today’s dynamic and competitive market. This enables them to efficiently serve their customers, grab opportunities, grow, and develop resilience in the face of a constantly shifting market. Many businesses find it challenging to process vast amounts of text-based data in order to get […]

  • How AI Is Revolutionizing Banking: Transforming Customer Experiences and Enhancing Financial Security

    Banking is a huge industry with a global Banking market likely to achieve a Net Interest Income of USD 10.34 trillion, with Traditional Banks holding a huge stake of USD 8.30 trillion. According to Statista’s projections suggest an annual growth rate of 4.82% (CAGR 2024-2028), culminating in a market volume of USD12.48 trillion by 2028. […]

  • Mastering Hyperparameter Tuning in Python: Strategies, Techniques, and Tools for Model Optimization

    Understanding various aspects of deep learning and machine learning can often feel like stepping into uncharted territory with no clue where to go. As you start exploring various algorithms and data, you realize that success is based on more than just building a raw model, it’s more about fine-tuning it to perfection. And when we […]

  • What is Transfer Learning? Exploring The Popular Deep Learning Approach

    Have you ever thought about how quickly your smartphone recognizes faces in photos or suggests text as you type? Behind these features, there’s a remarkable technique called Transfer Learning that expands the capabilities of Artificial Intelligence. Now you must be wondering- What is Transfer Learning ? Picture this: Instead of starting from the square from […]

  • LLMOps Essentials: A Practical Guide To Operationalizing Large Language Models

    When you engage with ChatGPT or any other Generative AI tool, you just type and enter your query and Tada!! You get your answer in seconds. Ever wondered how it happens and how it is so quick? Let’s peel back the curtain of the LLMs a bit. What actually happens behind the screen is a […]

  • Building Intelligent AI Models For Enterprise Success: Insider Strategies 

    Just picture a world where machines think and learn like us. It might sound like a scene straight out of a sci-fi movie, right? Well, guess what? We are already living in that world now. Today, data, clever algorithms, and AI models are changing the way businesses operate. AI models are serving as a brilliant […]

Click to Copy