Back to blog
Feb 09, 2025
5 min read

Stup a Vite React Project on macOS

A comprehensive guide to setting up a Vite React project on macOS for fast and efficient web development.

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. Paired with React, a popular JavaScript library for building user interfaces, you can create efficient and performant web applications. This guide will walk you through the steps to initialize a Vite React project on macOS.

Prerequisites

Before you begin, ensure you have the following installed:

  • Homebrew: macOS package manager. You can download it from the official website (https://brew.sh/).

    • Installation: Open your terminal and run the following command:
      /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
      
    • Follow the on-screen instructions to complete the installation.
  • Node.js: You can download it from the official website (https://nodejs.org/).

    • Installation using Homebrew: After installing Homebrew, you can install Node.js by running:
      brew install node
      
  • A Package Manager: npm (comes with Node.js), yarn (https://yarnpkg.com/), or pnpm (https://pnpm.io/). This guide will use pnpm.

    • Installation using npm: If you have Node.js installed, you can install pnpm using npm:
      brew install pnpm
      

Initializing a Vite React Project

Follow these steps to create a new Vite React project:

  1. Create a new project:

    • Open your terminal and navigate to the directory where you want to create your project.
    • Run the following command to create a new Vite project with the React template:
      pnpm create vite my-react-app --template react
      
      Replace my-react-app with your desired project name.
  2. Navigate to the project directory:

    • Once the project is created, navigate into the project directory:
      cd my-react-app
      
  3. Install dependencies:

    • Install the project dependencies using pnpm:
      pnpm install
      
  4. Start the development server:

    • Start the Vite development server:
      pnpm run dev
      
  5. Open in your browser:

    • Vite will provide a local development URL (usually http://localhost:5173/). Open this URL in your browser to see your new React application running.

Project Structure

Below is a snapshot of the project layout and important files in a typical Vite React project:

my-react-app
├── node_modules
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── components
│   │   └── App.jsx
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── package.json
├── pnpm-lock.yaml
└── vite.config.js
  • public/: Contains static assets like index.html and favicon.ico.
  • src/: Contains the source code for the React application.
  • src/components/: Directory for React components.
  • src/App.jsx: Main React component.
  • src/index.css: Global CSS styles.
  • src/main.jsx: Entry point for the React application.
  • vite.config.js: Vite configuration file.
  • package.json: Project metadata and dependencies.
  • pnpm-lock.yaml: Lock file generated by pnpm.
  • .gitignore: File to specify files and directories to ignore in version control.
  • README.md: Project documentation.
  • tsconfig.json: TypeScript configuration file (if TypeScript is used).
  • pnpm-lock.yaml: Lock file generated by pnpm.
  • package-lock.json: Lock file generated by npm.
  • node_modules/: Directory containing project dependencies.

Daily Development Commands

During your development process, you will commonly use the following commands:

  • Install dependencies:
    pnpm install
    
  • Start the development server:
    pnpm run dev
    
  • Build for production:
    pnpm run build
    
  • Preview the production build locally:
    pnpm run preview
    
  • Run linter (if configured):
    pnpm run lint
    
  • Update dependencies:
    pnpm update
    

Tailwind CSS Configuration Steps

Tailwind CSS is a utility-first CSS framework that can be easily integrated into your Vite React project.

Tailwind CSS v3.x Installation

Follow these steps to set up Tailwind CSS:

  1. Install Tailwind CSS and its related dependencies (if not already installed):
    pnpm add -D tailwindcss postcss autoprefixer
    
  2. Generate Tailwind CSS and PostCSS configuration files:
    npx tailwindcss init -p
    
  3. Add the following directives to your project’s CSS file (e.g., src/index.css):
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
  4. Modify tailwind.config.js as needed to customize the configuration.
    /** @type {import('tailwindcss').Config} */
    export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
    }
    

Tailwind CSS v4.x Installation

Follow these steps to set up Tailwind CSS:

  1. Install Tailwind CSS and its related dependencies (if not already installed):
    pnpm add -D ttailwindcss @tailwindcss/vite
    
  2. Configure the Vite plugin in your vite.config.js file:
    import { defineConfig } from 'vite'
    import tailwindcss from '@tailwindcss/vite'
    export default defineConfig({
    plugins: [
        tailwindcss(),
    ],
    })
    
  3. Add the following directives to your project’s CSS file (e.g., src/index.css):
    @import "tailwindcss";
    

Common Libraries and Installation

In React projects, certain libraries are commonly used to enhance development efficiency. Below are some frequently used libraries and their installation commands:

  • axios (HTTP request library)

    pnpm add axios
    
  • react-router-dom (Routing management)

    pnpm add react-router-dom
    
  • redux and react-redux (State management)

    pnpm add redux react-redux
    
  • zustand (State management)

    pnpm add zustand