Create Vite (Same Dir)

Creating a React application with Vite directly in the current directory streamlines the setup process, especially when you’re integrating into an existing project structure or simply prefer not to create a new folder. This tutorial will guide you through initializing a React application using Vite in the current directory, covering the setup steps, basic configuration, and a brief example to kickstart your development.

Prerequisites

Ensure the following are installed on your system:

• Node.js (version 12 or later)
• npm (version 6 or later) or Yarn

Verify your Node.js and npm installations by running node -v and npm -v in your terminal.

Step 1: Initializing Your React App with Vite

To create a React app with Vite in the current directory, follow these steps:

1. Open your terminal and navigate to the directory where you want to create your app.

2. Run the Vite initialization command with a slight modification to create the project in the current directory:

   npm create vite@latest . -- --template react
   

   This command tells Vite to scaffold a React project in the current directory (.). The extra -- is necessary to pass the --template react argument through npm to the create-vite script.

3. Install the dependencies:

   npm install
   

   This step downloads all the necessary packages required to run and build your React application.

Step 2: Understanding the Project Structure

After the setup, your current directory will contain several important files and directories:

• index.html - The entry HTML file where your React app gets loaded.
• src/main.jsx - The main JavaScript entry point for your React application.
• src/App.jsx - A sample React component provided by Vite.
• vite.config.js - Configuration file for Vite, allowing you to customize the build and development settings.

Step 3: Running Your React App

1. Start the development server by executing:

   npm run dev
   

2. View your app by opening http://localhost:3000 in your browser. You should see your React app running.

Step 4: Modifying Your Application

1. Open src/App.jsx in your favorite text editor.

2. Change the content within the <div> to personalize your app, for instance:

   function App() {
     return (
       <div className="App">
         <h1>Welcome to Vite and React!</h1>
       </div>
     );
   }
   
   export default App;
   

3. Save the file. The development server automatically updates the browser with your changes.

Step 5: Building and Previewing for Production

When you’re ready to deploy your application:

1. Build your application for production by running:

   npm run build
   

   This command generates a dist directory containing optimized assets for your app.

2. Preview the production build locally with:

   npm run serve
   

   This serves your built application on a local server, allowing you to preview the production version before deployment.

Conclusion

You’ve successfully set up a React application using Vite in your current directory. This method is particularly useful for quickly bootstrapping projects in an existing workspace or when you prefer to avoid creating extra directories. Vite offers a modern and fast development experience, focusing on performance and simplicity. From here, you can proceed to expand your application, explore Vite’s extensive plugin ecosystem, and customize your build configuration as needed.

Happy coding!