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

  • Generative AI in Hospitality: Integration, Use Cases, Challenges, and Future Outlook

    Generative AI is revolutionizing the hospitality industry, redefining guest experiences, and streamlining operations with intelligent automation. According to market research, the generative AI market in the hospitality sector was valued at USD 16.3 billion in 2023 and is projected to skyrocket to USD 439 billion by 2033, reflecting an impressive CAGR of 40.2% from 2024 […]

  • Generative AI for Contract Management: Overview, Use Cases, Implementation Strategies, and Future Trends

    Effective contract management is a cornerstone of business success, ensuring compliance, operational efficiency, and seamless negotiations. Yet, managing complex agreements across departments often proves daunting, particularly for large organizations. The TalkTo Application, a generative AI-powered platform, redefines contract management by automating and optimizing critical processes, enabling businesses to reduce operational friction and improve financial outcomes. […]

  • Generative AI in customer service: Integration approaches, use cases, best practices, and future outlook

    Introduction The rise of generative AI is revolutionizing customer service, heralding a new era of intelligent, responsive, and personalized customer interactions. As businesses strive to meet evolving customer expectations, these advanced technologies are becoming indispensable for creating dynamic and meaningful engagement. But what does this shift mean for the future of customer relationships? Generative AI […]

  • Generative AI in corporate accounting: Integration, use cases, challenges, ROI evaluation, and future outlook

    Overview Corporate accounting is fundamental to ensuring an organization’s financial stability and strategic growth. As the cornerstone of financial reporting and decision-making, it upholds transparency and accountability in business operations. However, technological advancements, particularly the emergence of generative AI, are redefining the field. By automating repetitive tasks and amplifying data-driven insights, generative AI in corporate […]

  • Generative AI in HR Operations: Overview, Use Cases, Challenges, and Future Trends

    Overview Imagine a workplace where HR tasks aren’t bogged down by endless paperwork or repetitive chores, but instead powered by intelligent systems that think, create, and adapt—welcome to the world of GenAI. Generative AI in HR operations offers a perfect blend of efficiency, personalization, and strategic insight that transforms how organizations interact with their talent. […]

  • Generative AI in Sales: Implementation Approaches, Use Cases, Challenges, Best Practices, and Future Trends

    The world of sales is evolving at lightning speed. Today’s sales teams are not just tasked with meeting ambitious quotas but must also navigate a maze of complex buyer journeys and ever-rising customer expectations. Despite relying on advanced CRM systems and various sales tools, many teams remain bogged down by repetitive administrative tasks, a lack […]

Click to Copy