Build fast modern Webapp with Vite js bundler ( 2023 )
- Description
- Curriculum
- FAQ
- Reviews
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!
-
1IntroductionVideo lesson
-
2How to follow the courseVideo lesson
-
3Installing software and download source code IMPORTANTVideo lesson
-
4Building our first Vite applicationVideo lesson
-
5ESM and CommonJS modulesVideo lesson
-
6ESM modules in BrowserVideo lesson
-
7Explore the Vite buildVideo lesson
-
8How is Vite fast and different from others ?Video lesson
-
92 Quick Refresher Questions ?Quiz
Let check our understanding
-
10Section Introduction ( Building with Vite )Video lesson
-
11Netflix base projectVideo lesson
-
12Adding Vite to Netflix projectVideo lesson
-
13Fixing our dashboard pageVideo lesson
-
14Fixing image loading issueVideo lesson
-
15Importing scripts and CSSVideo lesson
-
16CSS modulesVideo lesson
-
17SASS with ViteVideo lesson
-
18Adding public assetsVideo lesson
-
192 Rapid fire questions !!Quiz
Let quickly refresh our learnings of this section
-
20Section introduction ( SPA and UI Library )Video lesson
-
21Starting React app with Vite templateVideo lesson
-
22Setting up React app from scratchVideo lesson
-
23Adding Vite builderVideo lesson
-
24Using SVG as React componentVideo lesson
-
25UI library introduction setupVideo lesson
-
26Importing UI library into React appVideo lesson
-
27Inject CSS into JS buildVideo lesson
-
28Images inside JS buildVideo lesson
-
29Vite bundle visualizer , TreeshakingVideo lesson
-
30Creating Treeshakable libraryVideo lesson
-
31Tailwind CSS config for ViteVideo lesson
-
32Eslint with Vite and ReactVideo lesson
-
33Vite alias pathVideo lesson
External Links May Contain Affiliate Links read more