Why Use Vite Over CRA?

» Why Vite instead of CRA?? 🤓

1. Hi there,👋🏻 In this article, let’s discuss about the advantages of Vite and why we should use it instead of create-react-app.

2. Vite is a Front-end tool that focuses on speed and performance.

3. Vite has several advantages such as its a lightning-fast build tool that lives up to its name, because its insanely quick and has a good development experience.

4. Vite also doesn’t bundle our entire project during development. Instead, it leverages ES module imports, serving dependencies on-demand. This means our development server can start up in a flash, and changes you make reflect almost instantly in the browser.

5. It has a Built-in Development Server which supports hot module replacement. Now you might ask what does that do? 🤔

6. Ok, so answer to that is, it ensures that when you make changes to your code, the browser instantly updates, preserving our app’s state. It is like you have a live preview of your changes without hitting the refresh button again and again. It also supports VUE, PReact, Svelte and various other frameworks too.

7. Vite also supports plugins. You want to add typescript support, you can, or you want to integrate CSS preprocessor like sass, less, you can, or you want to optimise the images,you really can.😁 For each of these vite has a plugin. To use a plugin you just have to add them to your dev dependencies of our project and include them in vite’s config file.

» Create a Project with VITE.

1. Now we will build a simple vite + react js project and then deploy it to netlify by using netlify CLI. So for that let’s open the terminal and in here let’s run the command

node -v
pnpm -v

2. If you don’t use pnpm its okay, just run the command

npm -v

3. No that we have confirmed, that we do have node and pnpm on our local machine, let’s create a vite + react app. We will not use npx create-react-app command, instead we will use:

pnpm create vite 

4. Then let’s navigate to our project directory and open it into VS code and then there in the terminal run the command:

pnpm install 

5. Then it ask us to choose our framework so let’s go with react and then after it’s done let’s open the package json file and in that you will have three scripts: Dev, Build and Preview.

6. Dev is for used to start the development server, because of which we will be able to see changes in our react application in real time without the need to reload the page.

7. And the build script is used for creating a production ready build. When we run this command vite will generate optimised and minified files which will be suitable for our deployment. This is script which we will use before deploying the application to a hosting service like netlify.

8. And last which is peview is used to locally preview the production build before deploying it. We do this to test and ensure that everything looks and works as expected in a production like environment. Its used for catching issue that might arise during our build process.

9. We will look at these commands one by one but before this let’s try and understand how can we use environment variables in vite.

» How to use environment variables in vite?

1. We first have to create a .env file in our root directory and in this file let’s have two environment variables like:

VITE_API_URL=api.example.com
DB_PASSWORD=123456

2. If you notice we have API_URL env variable uses VITE as a prefix and our db password don’t use vite as a prefix. Let’s see what happens.

3. And now if we want to access these variables what we can do is, we can use import.meta.env object provided by vite.

4. Let’s open an App.jsx file and let’s create two variables at the top let’s have a variable named apiURL and another one named DB_PASSWORD and lets also bring in import.meta.env.VITE_API_URL

5. And then down inside the jsx let’s call the variables inside the curly braces.

3. Inside the paragraph tag let’s have a paragraph API key: and call the variable we just declared. Now save the file and run the command:

npm run dev 

It will start on (http://localhost:3000/) and there we have our API_URL showing but now let’s try and bring in the database password.

4. Want a spoiler? It won’t work. 😂

5. Let’s have a break line tag and and call the DB_PASS variable. Let’s save the file and see, it does not gives us the database password because site does not recognize to.

6. So for it let’s have vite as a prefix for our database password in .env file. Also have prefix vite for our database variable in the app.jsx file too. Now save the file and there see: now we have the db password too.

7. We can also create environment specific configuration files like .env.local or .env.production.

» Host site on netlify.

1. Now let’s host this site to netlify. For that we first will rub the command

pnpm build 

2. And there you will see that in the root direcotry the vite created a Dist folder which will have all the assets and files it needs. And then let’s run the command

pnpm preview 

3. And there you will find that the site now started the server on local host 4173. Now let’s look at the preview of our site. Same as the local one but if there were any errors it would have shown us here.

4. Now to deploy it to the netlify we first need to install the netlify CLI

5. So for that run the command in the terminal:

npm install -g netlify-cli

6. -g = globally

7. It will ask for authorization, do that and next run the command:

ntl init

8. After it has logged into your netlify account. Then it will ask you to if you want to create a netlify site without a git repo, if you want select yes or no based on the your choice completely.

9. Then let’s give a site name or leave it up top netlify and finally deploy the site run the command:

netlify deploy 

8. And then it will ask you to provide the publishing directory so write Dist. And then let’s hit enter

9. Then it will ask us to run the command:

netlify deploy --prod

10. Run the command and then netlify will provide you your site URL.

11. Ctrl plus click on it and there we have our site up and running. Pretty right?S

» Wrap up

1. And that is all you need to know about vite.

2. I hope you found this article helpful and if you did, then don’t forget to vite in your next project. Okay?

And thar’s it for this post. I hope it was helpful. Alright then Ill seeeee youuu in the next one, till then Bye Bye and happy coding! 🥰