DEV Community

Cover image for Create react app without CRA (using vite)
Ajo Alex
Ajo Alex

Posted on

Create react app without CRA (using vite)

What is vite JS

Vite (French word for "fast") is a build tool that aims to provide a faster and leaner development experience for modern web projects.

Why we use Vite

Today most people use CRA

npx create-react-app

for starting a react project. Its very time consuming because it install many unused packages to the project.

Here, we use Vite for creating a react project. its less time consuming, because it only install necessary packages for the project.

When comparing to CRA, vite only take less time to start the server and updation.

So, here we start...

  • Install react app using vite
npm init @vitejs/app my-react-app
Enter fullscreen mode Exit fullscreen mode
  • Choose the variant Here vite asked for the app and varient. These are the technologies installed using vite js
    • vanilla
    • vanilla-ts
    • vue
    • vue-ts
    • react
    • react-ts
    • preact
    • preact-ts
    • lit-element
    • lit-element-ts
    • svelte
    • svelte-ts Then Choose a variable and hit enter. It create a folder named my-react-app and create the template files.
  • change the directory
  cd my-react-ap
Enter fullscreen mode Exit fullscreen mode
  • Intsall dependencies
  npm install

  or

  npm i
Enter fullscreen mode Exit fullscreen mode
  • Run development server
  npm run dev
Enter fullscreen mode Exit fullscreen mode

Now we completed the installation.
Now you can open a editor and start the work.

Top comments (1)

Collapse
 
a03z profile image
Daniil

Need a guide to setup testing in ReactApp created by Vite