Build a JavaScript Project using Vite: Next Generation FrontEnd Tooling - Tutorial

Web developers use build tools to help them care of processing and bundling code. Vite is an opinionated platform that helps you build your projects quicker. Let's build a simple project to see what it can do for you and how things work.

Index
=====
00:00 Intro
00:17 Installing
00:58 installation Results
01:20 Entry Point
01:53 Loading CSS
02:07 CSS in JS?
02:37 Customizing Vite
02:54 Adding Files
03:16 Reading Markdown
03:44 Files as Raw Data
04:02 Hot Module Reloading
06:20 CSS Imports

URLs
=====

A lot of modern web development requires a build process for handling processing modules from Javascript, react, sass or supporting new features and there's a lot of tools for doing this, so, so what's the difference?

Vite is opinionated, so you give up a bit of control, but it gets you going quicker. I'm going to scaffold a new project with Vite.

By the way, you want to make sure that you have NodeJS 12 or greater to get it to work. Iit scaffolds the project for you, places it where you specify and it shows you the commands you need to run this project.

Vite also gives you a lot of advanced CSS features. For example, you can use PostCSS, import statements, it takes care of prefixing things if necessary and rebases all links inside the CSS for you. You can even use CSS modules and treat your CSS like a javascript object. It has built-in support for Sass, less and stylus.

Vite uses something called HRM. Hot Module Reloading means that…to speed up development, modules are updated individually without having to reload other modules. That makes Vite extremely fast.

[mykalimba]

Vite is named after the French word "vite", which means quick or fast. It's pronounced "veet" (rhymes with feet or wheat).

[antwarior]

would of been cool to see the entire build here in youtube instead of an external source, great content though, will be tuning in more, hopefully not all your videos are half done

[a.karamat]

maybe a good example of using Vite but not a good starting point for some one like me started to figure out how to use Vite, though I appreciate your job

[SohagByte]

Which font you are using in this video?

[cmnweb]

I fail with Vite...i can't made that múltiples pages and nunjucks work at the same time.

[FrankGP.com.]

what is the theme you are using in visual studio code?