Vite: The Complete Developer'S Guide

This course will show you everything you need to be able to build web applications in Vite

What you'll learn

Build a web application in Vite using Typescript and React

Create and configure a new Vite application in any frontend framework

Be able to make an informed choice between Webpack and Vite

Understand the architecture and fundamentals of Vite

Requirements

Comfortable running terminal commands and using npm

Familiarity with Typescript

Familiarity with React

Basic understanding of CSS

Description

Vite is a fast and efficient JavaScript framework that has been designed to enhance the developer experience. This video course is a complete guide to Vite and will teach you how to use this powerful tool to create and deploy fast, responsive, and dynamic web applications. In this course, you will learn how to use Vite to configure your project, import static assets, create dynamic imports, and add multiple routes.  You will also add styles to your app using native CSS modules, CSS variables, and the postcss nesting plugin for more legible selectors. Lastly, you will learn how to build your application for production and publish it as a static website to Netlify.This course is designed for developers who want to learn how to use Vite to speed up their development experience. It is suitable for beginners who have some knowledge of TypeScript, CSS, and React. This course is also suitable for experienced developers who want to learn how to use Vite to create and deploy fast, responsive, and dynamic web applications.Although you will be using React for the majority of this course, we will also touch on how to use Vite for both VueJS and Svelte applications.Alongside instructional course videos you will also find fun quizzes to test your understanding of Vite as you progress through this course.

Overview

Section 1: Introduction

Lecture 1 Course Overview

Lecture 2 What You Need

Lecture 3 What is Vite?

Lecture 4 Vite vs Webpack

Section 2: Getting Started

Lecture 5 Creating a new vite project

Lecture 6 New project overview

Lecture 7 Vite Config

Lecture 8 Developing and HMR demonstration

Lecture 9 Framework Support

Section 3: Developing with Vite

Lecture 10 Using Static Assets

Lecture 11 Creating Multiple Routes

Lecture 12 Advanced Imports

Section 4: Styling Your Vite Application

Lecture 13 Using Modern CSS Features in Vite

Lecture 14 Adding Nesting With PostCSS

Section 5: Publishing Your Vite Application

Lecture 15 Building for Production

Lecture 16 Publishing To Netlify

Lecture 17 Environment Variables

Section 6: Advanced Features

Lecture 18 Using & Creating Plugins

Lecture 19 Course Summary

Frontend web developers who are interested in using Vite to build modern web applications in React