April 23, 2024

On this article, we are going to have a look at the best way to make a easy challenge utilizing Vite and React. As a bonus, I’ll present you the best way to deploy our challenge.

First, let’s create a folder for our challenge and begin making a challenge utilizing Vite and its templates.

mkdir ViteProject

cd ViteProject

npm create vite@newest

Vite will immediate us to decide on the title of our challenge, the template below which it should make it, and the compiler with which it should work. For our instance, I selected the next choices:

shell

That is all, our challenge is created! 

Let’s examine the construction of the created challenge:

vite react

  • node_modules – respectively modules utilized in our challenge 
  • public – listing with media recordsdata we use 
  • src – listing with the challenge code, the place we are going to add our code and elements 
  • .gitignore – file to explain ignored recordsdata for git
  • index.html – HTML file the place our React utility is mounted 
  • package-lock.json – a file for describing put in dependencies 
  • package deal.json – a file for describing the challenge and dependencies, script instructions and different issues vite.config.json – default vite config file

Let’s run our challenge and see what now we have now. 

Run the command within the terminal

npm run dev

Within the terminal, we are going to see

terminal

On this picture, we’re advised how a lot Vite has collected for our challenge and at what tackle we are able to open it.

 After opening the tackle http://localhost:5173/ we are going to see the usual Vite template for React, specifically:

Vite + React

Yeah! our challenge is created and launched and we are able to additional develop it!

Let’s check out the Vite configuration and see the way it’s completed.

import  defineConfig  from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig(
  plugins: [react()],
)

We see that it’s fairly easy, and doesn’t seem like an analogous webpack configuration. On this case, the Vite plugin for React is used, which makes use of esbuild and babel. You possibly can learn extra detailed details about this plugin on the page of this plugin.

Help for Sass and Tailwind

With Vite, we are able to simply use Sass and Tailwind as they’re supported out of the field!

I renamed the App.css file to App.scss and added an inline model for the h1.

App.css

However to this point, after rebooting, we get this error

terminal

It’s because we did not set up sass in our dependencies. 

We have to execute this command

npm set up sass --save-dev

And after that, we see that the model has been utilized to our h1 tag!

Vite + React

As for Tailwind, we additionally must undergo solely the set up of Tailwind itself, specifically:

  • instal tailwind css – npm set up -D tailwindcss postcss autoprefixernpxtailwindcss init -p
  •  Configure your template paths – in file tailwind.config.cjs
/** @kind import('tailwindcss').Config */
module.exports = 
  content material: [
    "./index.html",
    "./src/**/*.js,ts,jsx,tsx",
  ],
  theme: 
    lengthen: ,
  ,
  plugins: [],

  • Add in index.css tailwind directives tailwind directives

That is all you might want to use Tailwind!

Deploy

With the intention to deploy our website, you first must construct it. 

That is completed with the command

npm run construct

The results of the Vite construct is added to the dist listing

terminal

For subsequent testing of the constructed website, we are able to use the command

npm run preview

For deployment, we have to set up Vercel CLI

npm i -g vercel

and run command

vercel

You can be requested to log in and requested a sequence of questions on your challenge and that is it!

terminal

Our challenge – Vite React Vercel App

Conclusion

In conclusion, I wish to say that on this article now we have analyzed a easy option to create a challenge, its configuration and deployment. That is simply an summary article on the subject. Hope it helps you and teaches you one thing!