How to create a Vite React Project

Step 1: Create a dedicated Vite folder in your projects folder on your local device

1. Open the terminal and navigate to a folder where you keep all your projects
2. mkdir vite-sample-project to create a new folder in that general folder and use cd vite-sample-project to go inside that folder.
3. Once in the vite-sample-project folder:

• Use mkdir backend to create a new folder
• Use cd backend to move into the backend folder
• Once in the backend folder, type in npm init -y
  1. The y flag means fill in the default answer to all questions
  2. If you want to go through the questions, run the same command without the y flag

Step 2 : Create a Vite project inside your Vite folder

Now that we’ve created a backend folder, we’ll create our frontend folder using Vite.

• Use cd .. to move one folder up in the file structure. You should be in your “vite-sample-project” folder.
• In the “vite-sample-project” folder, we will run a command to generate a new Vite frontend project.

1. In the terminal, run `npm create vite@latest frontend -- --template React`
2. This will create a new frontend folder.

Step 3: Confirm Your File Structure

```
└── 📁frontend
    └── 📁.tanstack
      
    └── 📁content
        └── 📁education
        └── 📁jobs
       
    └── 📁public
        ├── favicon.ico
        
    └── 📁src
        └── 📁components
    ├── .env.local
    ├── .gitignore
    ├── package-lock.json
    ├── package.json
    ├── tsconfig.json

```

Step 4: Start Your Project

For this to work, ensure that your terminal is pointing at the frontend folder. If not, use cd frontend to go into your frontend folder.

Start Your Project

npm run dev

If done successfully, your terminal may look something like this: