Vite js bundler : Build fast modern Webapp ( 2023 )

Vite js bundler : Build fast modern Webapp ( 2023 ), available at $19.99, has an average rating of 4.15, with 39 lectures, 2 quizzes, based on 45 reviews, and has 1276 subscribers.

You will learn about Build Modern applications with Vite Setting up configurations for React and VueJS apps Deploying applications build with Vite Configuring Vite for creating UI Library This course is ideal for individuals who are Software Developers or Frontend developers or Fullstack developers or Devops engineers It is particularly useful for Software Developers or Frontend developers or Fullstack developers or Devops engineers.

Enroll now: Vite js bundler : Build fast modern Webapp ( 2023 )

Summary

Title: Vite js bundler : Build fast modern Webapp ( 2023 )

Price: $19.99

Average Rating: 4.15

Number of Lectures: 39

Number of Quizzes: 2

Number of Published Lectures: 39

Number of Published Quizzes: 2

Number of Curriculum Items: 41

Number of Published Curriculum Objects: 41

Original Price: $22.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

Software Developers
Frontend developers
Fullstack developers
Devops engineers

Target Audiences

Software Developers
Frontend developers
Fullstack developers
Devops engineers

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&Asections in case you face problems, I shall be happy to answer.

This course does not require any knowledge of Bundlersand 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!

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: How to follow the course

Lecture 3: Installing software and download source code IMPORTANT

Lecture 4: Building our first Vite application

Lecture 5: ESM and CommonJS modules

Lecture 6: ESM modules in Browser

Lecture 7: Explore the Vite build

Lecture 8: How is Vite fast and different from others ?

Chapter 2: Vite Basics with HTML CSS JS

Lecture 1: Section Introduction ( Building with Vite )

Lecture 2: Repo to download IMPORTANT

Lecture 3: Netflix base project

Lecture 4: Adding Vite to Netflix project

Lecture 5: Fixing our dashboard page

Lecture 6: Fixing image loading issue

Lecture 7: Importing scripts and CSS

Lecture 8: CSS modules

Lecture 9: SASS with Vite

Lecture 10: Adding public assets

Chapter 3: Vite build for Single page app and Build UI Library

Lecture 1: Section introduction ( SPA and UI Library )

Lecture 2: Starting React app with Vite template

Lecture 3: Setting up React app from scratch

Lecture 4: Adding Vite builder

Lecture 5: Using SVG as React component

Lecture 6: UI library introduction setup

Lecture 7: Importing UI library into React app

Lecture 8: Inject CSS into JS build

Lecture 9: Images inside JS build

Lecture 10: Vite bundle visualizer , Treeshaking

Lecture 11: Creating Treeshakable library

Lecture 12: Tailwind CSS config for Vite

Lecture 13: Eslint with Vite and React

Lecture 14: Vite alias path

Chapter 4: Production Optimizations and Deployment

Lecture 1: Production & Deployment Section Introduction

Lecture 2: PostCSS Autoprefixer

Lecture 3: Vite base path config

Lecture 4: Cache control in Vite

Lecture 5: Manual Chunks

Lecture 6: Migrating Create React App to Vite

Lecture 7: Deploying to Netlify

Instructors

Gaurav Soni
Software Developer / Business Consultant / Trainer

Rating Distribution

1 stars: 2 votes
2 stars: 2 votes
3 stars: 6 votes
4 stars: 16 votes
5 stars: 19 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu