If you’re new to modern web development and looking for a fast, lightweight way to build React applications, you’re in the right place. In this tutorial, we’ll guide you through creating a React app with Vite — a blazing-fast build tool that’s replacing Create React App for many developers.

Once the app is up and running, we’ll take it a step further by installing Firebase in the React app to enable backend functionality like authentication, Firestore, and hosting. By the end of this guide, you’ll have a working project set up, connected to Firebase, and ready to deploy.

Whether you’re building your first web app or looking to modernize your workflow, this guide has you covered — from installing NVM on macOS, to setting up Firebase, and deploying your build.

Read also: ImageViewerPro – Open Source macOS Image Viewer & Editor Built with SwiftUI

Step 1: Install NVM on macOS

NVM (Node Version Manager) is a simple tool that lets you install and switch between different versions of Node.js.

1. Open the Terminal application on your Mac.
2. Run the following command to install NVM:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

3. Once installed, add NVM to your shell configuration:

For Zsh (default on macOS Catalina and later):

nano ~/.zshrc

For Bash (older macOS versions):

nano ~/.bash_profile

Add this to the end of the file:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

4. Save and close the file (press Control + O to save, then Control + X to exit).
5. Reload your terminal configuration:

source ~/.zshrc

6. Verify that NVM is installed:

nvm --version

Step 2: Install Node.js Using NVM

Now that NVM is installed, you can use it to install the latest version of Node.js.

nvm install --lts
nvm use --lts

Check the installed versions:

node -v
npm -v

Step 3: Create a New React App Using Vite

Vite is a fast, modern frontend build tool that works great with React.

1. Create a new React project with the following command:

npm create vite@latest my-react-app -- --template react

This will prompt you to select a framework. Choose “React”.

2. Navigate into the project folder:

cd my-react-app

3. Install the project dependencies:

npm install

4. Start the development server:

npm run dev

Visit http://localhost:5173 in your browser to see your React app running.

Step 4: Install Firebase in Your React Project

If you plan to use Firebase services like Authentication, Firestore, or Hosting, you need to install the Firebase SDK.

1. Install the Firebase module:

npm install firebase

2. Create a new file in the src folder named firebase.js:

// src/firebase.js
import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID"
};

const app = initializeApp(firebaseConfig);

export default app;

Replace the configuration object with your actual Firebase project settings from the Firebase Console.

3. Import and use Firebase where needed in your React components.

Step 5: Customize the Build Output Folder

By default, Vite creates a dist folder when building the project. You can customize this folder name to build.

1. Open or create the file vite.config.js in your project root:

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'build'
  }
});

This configuration tells Vite to output the build files into a folder named build instead of dist.

Step 6: Generate a Production Build

To create a production-ready build of your React app, run:

npm run build

This will generate a build folder containing static HTML, CSS, and JavaScript files optimized for production.

Step 7: Serve the Build Folder Locally

You can serve the production build locally to test it before deploying.

1. Install the serve package globally:

npm install -g serve

2. Serve the build folder:

serve -s build

Open your browser and go to http://localhost:3000. You will see the production version of your React app.

Read also: Generative AI: The Ultimate Guide to Understanding, Applications, and the Future

Step 8: Deploy the Build Folder (Optional)

The build folder contains everything you need to deploy your app. You can upload it to any static hosting provider such as:

• Firebase Hosting
• Netlify
• Vercel
• GitHub Pages
• Your own cPanel or FTP hosting

For Firebase Hosting, for example:

1. Install the Firebase CLI:

npm install -g firebase-tools

2. Login and initialize:

firebase login
firebase init

3. When prompted, choose Hosting and set the public directory to build.
4. Deploy:

firebase deploy

Conclusion

This tutorial walked you through the full process of setting up a modern React app using Vite, integrating Firebase, customizing the output folder, and building and serving your project for production. This setup is lightweight, fast, and ideal for both beginners and professionals.

Whether you’re working on a portfolio site, a startup idea, or a learning project, this workflow provides a solid foundation for building and deploying your React applications.

Let us know in the comments if you’d like a follow-up tutorial on using Firebase Authentication, Firestore, or hosting with Netlify or Vercel.