Vite is revolutionizing the way developers build web applications, one lightning-fast build at a time.
In this post, I will share some good starting places so you can start build web applications with Vite.
Table of Content
What you need?
To start a Vite project, you need several components like :
Command Line or Terminal
To run the necessary commands to create and start a Vite projectNode JS 16+
To run vite development server and build processesIDE
for code editing and debugging (eg. VSC)React
For building the user interfaceWeb browser
For real-time testing and visualization of your web application
Project Overview
Before we dive into the details, let's take a moment to envision what lies ahead on this journey. Throughout this article, i will provide you with an insightful overview of exciting web development projects.
We will create a visually stunning portfolio hero section using Tailwind CSS. Although this is just a simple hero section, I believe it could be the beginning of something much bigger.
To assist you in completing this project, I've included the final code here.
What is Vite?
Vite is a build tool and development server that aims to deliver a quicker and more efficient development experience. It has been designed to enhance the development workflow and offer faster build times compared to some other tools such as webpack.
Before the emergence of Vite, developers relied on tools like webpack to bundle their code. However, as applications became more complex and the number of JavaScript files increased, it often required a significant amount of time to run the development server.
Then Vite came along, bringing the power of modern JavaScript module systems to the forefront so that developers could experience lightning-fast development builds. Here are some of the key benefits of using Vite :
1. Faster Cold Start Server
Traditional bundler-based development tools must crawl through all of the files in the application and build the application before it can be used. This can be a time-consuming process, especially for large applications.
Vite speeds up the development server start time by first dividing the application modules into two categories: dependencies and source code.
- Dependecies are modules that are required by the application to run, but they are not modified by the developer. Dependencies are typically installed from npm or Yarn.
- Source code is the code that the developer writes, such as components, pages, and other code that you write to create the application.
By dividing the modules into these two categories, Vite can only build the source code when the development server is first started. This can significantly reduce the development server start time.
2. Faster file updates
when a developer makes a change to their code, the browser will reflect those changes more quickly. This is important because it allows developers to see their changes in real time, which can help them to debug and improve their code more effectively.
Vite achieves faster file updates through a variety of techniques. These include Hot Module Replacement (HMR), which enables Vite to update the browser without reloading the entire application by replacing individual modules. Live reloading is another feature that allows Vite to refresh the browser without restarting the development server by updating the browser's cache. Additionally, Vite utilizes code splitting to break the application into smaller, independently loadable bundles, thereby enhancing performance, particularly in the context of large applications.
Create New Vite Project
I assume you have node installed and a package manager (npm or yarn)
Creating the project
Next open the terminal, To create a new Vite project you can Type this command
npx create-vite my-react-app --template react
I named my react app as
my-react-app, you can change it as you wantWe use --template react to specify that we want to use the React template when creating the new project
We may be prompted to install additional packages (like create-vite). Type y and press enter to continue.
Need to install the following packages:
create-vite@4.4.1
Ok to proceed? (y)
It’s done, the project is created. To initiate it in development mode, we must navigate to the project directory, install the necessary dependencies, and execute the 'dev' script command.
cd my-react-project
npm install
npm run dev
In a few moments, we will see something that looks like this.
VITE v4.4.9 ready in 2921 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
When we visit the URL http://localhost:5173/ in our web browser, we will see the default Vite and React page.
We are all set up and can start developing our app.
File Structure
I've already removed unnecessary files, including all .svg and .css files, since we won't be using them. Additionally, I've created a new CSS file named main.css.
I have also created two new folders inside src named components and page.
The component folder is where we organize our components. That's why we placed Navbar.jsx inside it for the navbar component, and we have a separate folder for pages. Since we only have one section (not a full page), we named it HomePage.jsx.
Here is what my final file structure looks like :
If you get error similiar to this :
- You just need to remove the CSS import statements in your
main.jsxandApp.jsxfiles
Dont forget to add this statement in your Main.jsx
import "./main.css";
Start the Project
Set up the router
although we don't really need to use routing on this project, I still believe it's important to highlight this section so you can do it by yourself later.
React Router is a powerful routing library for React applications to helps you manage navigation. To install React Router and its DOM, type this command in your terminal :
npm install react-router-dom
Check is it already installed in your package.json :
To start using it in our React components. Import the necessary components from react-router-dom and set up your routes in your App.jsx:
import { BrowserRouter, Routes, Route } from 'react-router-dom';
Rendering components
In your App.jsx
function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
</Routes>
</BrowserRouter>
</>
);
}
export default App;
Install tailwind
To Setting up Tailwind CSS in a Vite-React App you can follow this step
And dont forget to put this code in our main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
If you don't see any changes in your code after installing Tailwind, try running npm run dev again because we just installed Tailwind after running that command.
Set the navigation
Let's open the Navbar.jsx file, which has already been created
import { useState } from 'react';
export default function Navbar() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const toggleMobileMenu = () => {
setMobileMenuOpen(!mobileMenuOpen);
};
}
Here, we start by importing React's useState hook, which allows us to manage the state of the mobile menu. The mobileMenuOpen state variable keeps track of whether the mobile menu is open or closed. The toggleMobileMenu function toggles this state when called
return(
<>
<header className="absolute bg-white mt-6 shadow w-[80%] mx-auto rounded-full inset-x-0 top-0 z-50">
<nav className="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
<div className="flex lg:flex-1 ">
<a href="#" className="-m-1.5 p-1.5 font-fredoka font-medium">
Bro Karim
</a>
</div>
<div className="flex lg:hidden">
<button type="button" className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
<span className="sr-only">Open main menu</span>
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
<div className="hidden lg:flex lg:gap-x-12">
<a href="#" className="text-sm font-semibold leading-6 text-gray-900">
Home
</a>
<a href="#" className="text-sm font-semibold leading-6 text-gray-900">
About Us
</a>
<a href="#" className="text-sm font-semibold leading-6 text-gray-900">
Portofolio
</a>
<a href="#" className="text-sm font-semibold leading-6 text-gray-900">
Contact
</a>
</div>
<div className="hidden lg:flex lg:flex-1 lg:justify-end gap-4">
<SocialIcon network="github" bgColor="#130e0b" style={{ width: '30px', height: '30px' }} />
<SocialIcon network="instagram" bgColor="#130e0b" style={{ width: '30px', height: '30px' }} />
<SocialIcon network="dribbble" bgColor="#130e0b" style={{ width: '30px', height: '30px' }} />
</div>
</nav>
{/* Mobile menu */}
{/* ... */}
</header>
</>
)
We wrapped the navigation menu in a header, The menu includes your website logo, links to the Home, About Us, Portfolio, and Contact pages, and social media icons.
{/* Mobile menu */}
<div className={`lg:hidden ${mobileMenuOpen ? 'block' : 'hidden'}`} role="dialog" aria-modal="true">
<div className="fixed inset-0 z-50" onClick={toggleMobileMenu}></div>
<div className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div className="flex items-center justify-between">
<a href="#" className="-m-1.5 p-1.5">
<span className="sr-only">Your Company</span>
{/* logo di mobile */}
<img className="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="" />
</a>
<button type="button" className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700" onClick={toggleMobileMenu}>
<span className="sr-only">Toggle mobile menu</span>
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
{mobileMenuOpen ? <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> : <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />}
</svg>
</button>
</div>
<div className="mt-6 flow-root">
<div className="-my-6 divide-y divide-gray-500/10">
<div className="space-y-2 py-6">
<a href="#" className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">
Home
</a>
<a href="#" className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">
About Us
</a>
<a href="#" className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">
Portofolio
</a>
<a href="#" className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">
Contact
</a>
</div>
<div className="py-6">
<a href="#" className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">
Log in
</a>
</div>
</div>
</div>
</div>
</div>
We design the navbar to be shown or hidden based on the mobileMenuOpen state. When the mobile menu is open, it covers the entire screen and displays a condensed version of the navigation links.
Crafting the homepage
Go to your HomePage.jsx file, we will creating an engaging home section for a good first impression for the user user
<div className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
<div
className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style={{
clipPath: 'polygon(74.1% 44.1%, 100% 61.6%, ...)',
}}
></div>
</div>
We set the background graphics , It creates a colorful and visually appealing background with a gradient effect.
<div className="mx-auto md:max-w-xl max-w-md pt-48 lg:pt-40">
<div className="mb-4 flex justify-center">
<div className="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">Hi, I am Richard 👋</div>
</div>
<div className="text-center">
<h1 className="font-bold tracking-tight text-gray-900 md:text-6xl text-4xl">
Full stack developer <br />
base in Indonesia{' '}
</h1>
<p className="mt-6 text-md leading-1 text-gray-600">I am eager to leverage my full-stack development skills...</p>
<div className="my-8 flex items-center justify-center gap-x-6">
<a href="#_" className="relative inline-block text-lg group">
{/* ... */}
</a>
</div>
</div>
</div>
Now it's time to make a description of our self. The layout is responsive, ensuring that it looks great on various devices.
Again, you can find the repo with all of the code we went through here.
Conclusion
In this article, we learn about Vite and integrate it with react so it can empowers the developers to bring their web projects to life with remarkable speed and ease. Through our step-by-step guide, we've unveiled the magic of Vite and React, guiding you through the process of setting up your development environment, and crafting a simple Hero Section.
As we conclude this journey, we invite you to stay engaged and continue your exploration.
Top comments (1)
create-react-app uses a lot of memory, vite is my savior until now