Vite JS Tutorial: Vanilla JavaScript Template

Welcome to our comprehensive guide on Vite JS, a modern, fast, and lean front-end build tool for building modern web applications. We'll walk you through creating a Vanilla JavaScript template using Vite, perfect for beginners and intermediate learners.

🎯 Getting Started

First, let's install Node.js, as Vite requires it.

bash

node -v # Check if Node.js is installed
npm -v # Check if npm is installed (comes with Node.js)

If not installed, follow the official Node.js installation guide.

Once Node.js is installed, we can install Vite.

bash

npm install -g vite

💡 Pro Tip:

-g flag installs the package globally, so you can use it from any directory.
Vite can also be installed using npm init with a script in package.json file.

📝 Note:

For this tutorial, we'll create a project from scratch using the CLI.

🎯 Creating a Project

Let's create a new Vite project.

bash

vite create my-vanilla-app
cd my-vanilla-app

💡 Pro Tip:

my-vanilla-app is the name of our project. You can name it anything you like.

📝 Note:

cd command navigates us into our project directory.

🎯 Running the Project

Now, let's start our development server.

bash

vite

Your browser should automatically open http://localhost:5000/.

💡 Pro Tip:

The development server is fast and rebuilds your project automatically whenever you save a change.

📝 Note:

Vite serves static assets like HTML, CSS, and JavaScript files.

🎯 Removing TypeScript

Since we're focusing on Vanilla JavaScript, let's remove TypeScript from our project.

bash

rm src/main.ts
touch src/main.js

💡 Pro Tip:

We've replaced TypeScript (.ts) file with JavaScript (.js).

📝 Note:

We've created a new JavaScript file, main.js, for our Vanilla JavaScript code.

🎯 Our First JavaScript Code

Now, let's add some simple JavaScript code to src/main.js.

javascript

// src/main.js
document.body.style.backgroundColor = 'lightblue';
console.log('Hello, Vanilla JavaScript!');

Save the file, and you should see the background of the page change to light blue.

💡 Pro Tip:

You can add more JavaScript in the main.js file to make your project interactive.

📝 Note:

JavaScript can manipulate HTML and CSS, making it perfect for creating dynamic web pages.