Vite js bundler : Build fast modern Webapp ( 2023 )

Name: Vite js bundler : Build fast modern Webapp ( 2023 )
Rating: 4.3 (62 reviews)

Build modern and fast webapps using Vite. Learn advanced concepts of tree-shaking, bundle visualizer , plugins and more.

Created byGaurav Soni

Last updated 9/2023

English

What you'll learn

Build Modern applications with Vite
Setting up configurations for React and VueJS apps
Deploying applications build with Vite
Configuring Vite for creating UI Library

Course content

4 sections • 39 lectures • 3h 46m total length

Introduction8:27
How to follow the course1:59
Installing software and download source code IMPORTANT2:20
Building our first Vite application5:32
Boot a new vite app from the latest template, run the dev server, and modify index.html and main.js to see live updates in a vanilla JavaScript project.
ESM and CommonJS modules9:54
ESM modules in Browser2:47
Explore the Vite build6:16
How is Vite fast and different from others ?5:32
Discover how Vite speeds up development by splitting dependencies into separate bundles via esbuild, bundling source with rollup, serving ES modules, and hot module replacement of only changed modules.
2 Quick Refresher Questions ?

Section Introduction ( Building with Vite )2:23
Repo to download IMPORTANT0:05
Netflix base project5:47
Adding Vite to Netflix project5:28
Fixing our dashboard page7:58
Fixing image loading issue5:37
Importing scripts and CSS9:18
Optimize imports by migrating scripts and styles to package.json and bundler, import css and bootstrap in JavaScript, and import json assets directly for a cleaner, maintainable web app.
CSS modules8:43
SASS with Vite4:15
Adding public assets3:23
2 Rapid fire questions !!

Section introduction ( SPA and UI Library )1:28
Starting React app with Vite template2:59
Bootstrap a Vite React app, install dependencies, and launch the dev server; explore templates including vanilla, Vue, React, Tailwind, and community templates.
Setting up React app from scratch10:37
Adding Vite builder3:57
Using SVG as React component6:59
UI library introduction setup9:25
Importing UI library into React app8:57
Inject CSS into JS build4:20
Images inside JS build1:55
Learn how images are inlined in the JavaScript bundle by base64-encoding and injecting them into the main build, demonstrated with an icon button in a React UI library.
Vite bundle visualizer , Treeshaking7:45
Creating Treeshakable library12:26
Tailwind CSS config for Vite8:03
Eslint with Vite and React6:26
Learn to integrate ESLint with a Vite and React project by installing the ESLint plugin, configuring a React-based rule set, and addressing common lint errors.
Vite alias path7:17

Requirements

Follow along on your computer with the instructions mentioned in the videos

Description

Build Modern WebApps using Vite JS Bundler, from scratch to production.

As the web applications get more complex over time, we also need to review and optimize the tools we use for bundling and deploying these applications. Vite, developed by the developers of VueJS is a bundler for modern applications.

In this course, we not only cover the theoretical concepts but also get very hands-on experience on how to integrate Vite into our software development pipeline. We will start right from the basics such as ES Modules and CommonJS modules and slowly progress to more advanced concepts such as Treeshaking to truly optimize our application for production use.

We will also see how to take a React application that was created using the traditional approach of Create React App and migrate it to a modern approach using Vite. This will save time for all the developers are it exponentially increases the build time and reduces the complexity.

I have tried my best to structure this course in the easiest way to follow and will have all the resources available to download on GitHub and attached to this course.

You can always ask me questions in the Q&A sections in case you face problems, I shall be happy to answer.

This course does not require any knowledge of Bundlers and will be beneficial to all developers making any type of website whether it's using core HTML CSS or using frameworks and libraries such as React and Vue.

Good luck and happy learning!

Who this course is for:

Software Developers
Frontend developers
Fullstack developers
Devops engineers

Vite js bundler : Build fast modern Webapp ( 2023 )

What you'll learn

Explore related topics

Course content

Introduction8 lectures • 43min

Vite Basics with HTML CSS JS10 lectures • 53min

Vite build for Single page app and Build UI Library14 lectures • 1hr 33min

Production Optimizations and Deployment7 lectures • 38min

Requirements

Description

Who this course is for: