Vite Crash Course | Faster Alternative To CRA

Summary

This video introduces Veet, a fast and modern development tool for building web applications. It explains how Veet differs from traditional bundlers like Webpack by leveraging native ES modules for faster development. The speaker demonstrates setting up a React app using Veet, highlights its benefits, including hot module replacement and simple configuration, and compares it with Create React App. The video also covers integrating environment variables, using Sass, and exploring additional plugins for enhancing functionality. Overall, it's a practical guide for developers seeking to streamline their development workflow.

Takeaways

• 📦 Veet is a modern development tool used for creating JavaScript applications, especially when building larger and more dynamic front-end apps.
• 🚀 Unlike traditional bundlers like Webpack, Veet does not bundle files during development, which speeds up the process.
• 🔥 Veet utilizes native ES modules in modern browsers, reducing the need for constant rebundling during development.
• 📜 In production, Veet uses Rollup, a module bundler, to package files efficiently.
• 💡 Create React App uses Webpack under the hood, which can slow down development as applications grow in complexity.
• ⚡ Veet offers much faster build times compared to Webpack because it doesn't rebundle on every code change.
• 🔄 Veet uses hot module replacement (HMR), allowing developers to see changes in the browser immediately without resetting state.
• 🌍 Environment variables in Veet can be set using a .env file with the prefix `VITE_`.
• 🎨 Veet supports Sass out of the box for styling and makes integrating CSS preprocessors easy.
• 🔌 Veet has a range of plugins, including official ones for React, Vue, and community plugins for various integrations like Electron and PWA.

Q & A

What is Veet and why is it important?

Veet is a modern build tool that serves as a faster alternative to traditional bundlers like Webpack. It speeds up development by using ES modules directly in the browser and avoids constant rebundling, improving efficiency for modern front-end applications.

How does Veet differ from Webpack in development?

While Webpack bundles files every time a change is made, slowing down the process as the app grows, Veet uses ES modules and serves code directly to the browser, making development much faster by eliminating the need for constant rebundling.

What are the benefits of using ES modules in modern browsers with Veet?

ES modules allow developers to use import/export syntax directly in the browser, reducing the need for bundling during development. This makes the process faster and enables real-time updates without delays, as Veet leverages this capability.

What is Rollup, and how does Veet use it?

Rollup is a module bundler that Veet uses when creating a production build. While Veet acts as a dev server during development, it relies on Rollup to bundle files efficiently for production, ensuring optimal performance.

Why might developers prefer Veet over Create React App?

Developers might prefer Veet because it offers faster development times due to its ability to serve code directly to the browser without bundling during development. Veet also provides a simpler and lighter setup compared to Create React App, which uses Webpack under the hood and can become slower as the project grows.

How does Veet handle hot module replacement (HMR)?

Veet's HMR feature ensures that changes made in the code are reflected in the browser without a full page reload or resetting the state. This allows developers to see real-time updates to their applications quickly and efficiently.

How do you set up a new React project using Veet?

To set up a new React project with Veet, you can run the command `npm create veet@latest`, choose 'React' from the options, and then install the necessary dependencies. The setup process is simple and lightweight compared to other tools.

What is the role of the `.env` file in a Veet project?

The `.env` file in a Veet project is used to store environment variables. In Veet, these variables are accessed using `import.meta.env`, and the variables must start with `VITE_` to be recognized in the project.

Can Veet work with Sass, and how do you set it up?

Yes, Veet supports Sass out of the box. To use it, you need to install Sass as a development dependency, create your `.scss` files, and then import them directly into your components, just like you would with regular CSS files.

What are some plugins available for Veet, and what are their purposes?

Veet offers both official and community plugins, such as plugins for React, Vue, and Svelte. There are also roll-up plugins for additional bundling features and other community-driven plugins for various purposes like Electron, PWA, and server-side rendering (SSR). These plugins extend Veet's capabilities depending on the project's needs.

Outlines

00:00

🚀 Introduction to Veet and Web Development Tooling

This section introduces the video, where the speaker plans to explain Veet, its benefits, and how to use it to create a React application. The speaker touches on the evolution of JavaScript development, especially in the transition from using simple script tags for small projects to modern frameworks that require more complex tooling and file structures. The speaker highlights Veet as a solution to improve bundling and development speed, compared to older tools like Webpack.

05:02

🛠️ The Role of Webpack and Veet in Module Bundling

Here, the speaker discusses traditional bundlers like Webpack, which take multiple JavaScript files, stylesheets, and third-party packages and bundle them into a single file for production. While Webpack has been the standard, its process can slow down development, especially as projects grow. Veet solves this by leveraging native ES modules in modern browsers, avoiding the constant re-bundling process that Webpack requires. Veet is described as a development server, with Rollup handling production builds, making it faster than Webpack for most cases.

10:04

⚡ Veet vs. Create React App: Speed and Efficiency

The speaker dives deeper into comparing Create React App and Veet, focusing on the development process. While Create React App uses Webpack and requires bundling all files with each change, leading to delays, Veet does not need to bundle everything before serving the app. It uses ES build and dynamic code splitting, enabling faster updates to the browser during development. The real-time browser updates in Veet significantly reduce wait times, offering a smoother development experience.

15:05

🌐 Starting with Veet for React Development

This section walks through the steps of setting up a React project using Veet. The speaker demonstrates how to run commands to initialize a new Veet app, select React as the framework, and explore the generated boilerplate code. The simplicity of Veet’s structure, including its lean `package.json` and easy configuration options, is emphasized. The speaker compares this with Create React App, which is more complex, while praising Veet for its simplicity and efficiency.

💻 Code and Hot Module Replacement in Veet

This part explains how to create a basic React component in Veet and demonstrates hot module replacement (HMR). The speaker creates a header component and shows how changes in the code are instantly reflected in the browser without losing the application state, unlike Create React App, where such changes would reset the state. This feature is one of Veet’s key advantages for fast and efficient development.

🔧 Using Environment Variables in Veet

The speaker introduces the use of environment variables in Veet, comparing it to the similar feature in Create React App. By creating a `.env` file, global variables can be defined and accessed across the application. However, in Veet, the prefix `VITE_` is used instead of `REACT_APP_` when defining these variables. This allows for easier handling of API URLs or other global settings in a React project.

🎨 Adding SCSS Support in Veet

This section covers how to integrate SCSS into a Veet project. The speaker installs the `Sass` package as a dev dependency, demonstrates how to create a simple SCSS file, and imports it directly into a React component. Veet’s ability to handle SCSS out of the box is highlighted, showcasing its flexibility and ease of use compared to more complex setups.

🏗️ Building and Previewing the Production Version

Here, the speaker explains how to build a Veet project for production by running `npm run build`. The build process creates a `dist` folder containing optimized files, which can be previewed by running `npm run preview`. The ease and speed of this process are emphasized as key advantages of Veet, compared to older bundlers like Webpack.

🔌 Exploring Veet Plugins and Extensions

The final section introduces plugins available for Veet. The speaker points out that while official plugins are available for popular frameworks like React and Vue, Veet also supports many community and Rollup plugins for additional functionality, such as Progressive Web Apps (PWAs), SSR (server-side rendering), and more. The speaker encourages developers to explore the plugin ecosystem to extend Veet’s capabilities further.

Keywords

💡Vite

Vite is a modern build tool and development server used for front-end development. In the video, Vite is described as a fast alternative to traditional bundlers like Webpack because it doesn't rebundle everything when changes are made during development. Instead, it leverages native ES modules in modern browsers, which makes the development process faster and more efficient.

💡Webpack

Webpack is a popular module bundler for JavaScript applications. It works by taking multiple files from the development environment, such as JavaScript, CSS, or Sass, and bundling them into one or more files for production. The video contrasts Webpack with Vite, explaining that Webpack's process can slow down development as the application grows larger because it rebundles every time a change is made.

💡ES Modules

ES Modules (ECMAScript Modules) are a standard way of using modules in JavaScript, allowing developers to import and export pieces of code between files. In the video, ES Modules are highlighted as a core feature of Vite, enabling it to serve code directly to the browser without needing to bundle it first during development. This improves speed compared to older methods like Webpack.

💡Development Server

A development server is a tool that allows developers to run and test their code in a browser during the development process. Vite acts as a development server that serves ES modules directly to the browser. The video explains how Vite's dev server helps developers by avoiding the need for constant rebundling, which happens in older tools like Webpack.

💡Hot Module Replacement (HMR)

Hot Module Replacement (HMR) is a feature that updates modules in the browser without requiring a full page reload. The video demonstrates how Vite uses HMR to make updates instantaneous in the browser, allowing developers to see changes without losing the state of the application, which improves development efficiency.

💡Rollup

Rollup is a module bundler used by Vite for production builds. It helps bundle JavaScript code into a format that can be deployed to a live website. The video describes how Vite uses Rollup to bundle files when developers are ready to move from development to production, ensuring the final product is optimized for the browser.

💡Create React App

Create React App is a popular tool for setting up React applications with minimal configuration. The video compares Create React App, which uses Webpack under the hood, with Vite, explaining how Vite can be a faster alternative due to its ability to skip the rebundling process during development. However, the presenter acknowledges that Create React App is still a great tool with extensive resources and support.

💡Babel

Babel is a JavaScript compiler that converts newer ECMAScript code into older versions that are supported by all browsers. In the video, Babel is mentioned as part of the Webpack toolchain, where it transpiles code during the bundling process. The presenter explains that while Babel is essential for compatibility, its use in Webpack can slow down development due to constant rebundling.

💡ESBuild

ESBuild is a JavaScript bundler and minifier built for speed. Vite leverages ESBuild during the development phase to pre-bundle dependencies and serve ES modules to the browser. The video points out that this approach makes Vite much faster than Webpack for development, as ESBuild doesn't reprocess everything every time a change is made.

💡Environment Variables

Environment variables are key-value pairs that are used to configure applications in different environments (e.g., development, production). The video shows how to use environment variables in Vite by creating a `.env` file and accessing these variables using `import.meta.env` in the code. This helps developers manage settings like API URLs across various environments.

Highlights

Introduction to Veet as a modern build tool for front-end development.

Explanation of traditional module bundlers like Webpack and their limitations, especially regarding speed as projects grow.

Veet leverages native ES modules in the browser for faster development by not rebundling everything on every change.

Uses ESBuild to serve code directly to the browser during development, skipping the heavy bundling process seen with Webpack.

Veet is faster in development than Webpack or Create React App due to its direct code serving and use of ES modules.

In production, Veet uses Rollup for bundling files, ensuring optimized builds while still being fast.

Create React App is still a good tool with strong support, but Veet offers faster alternatives for modern development.

Initial setup process for a React application using Veet is simpler and the boilerplate structure is lighter compared to Create React App.

Veet supports hot module replacement (HMR) out of the box, meaning changes are reflected immediately without a full page reload.

Simple configuration using environment variables with Veet by using `import.meta.env` instead of `process.env` like in Create React App.

Veet offers out-of-the-box support for using Sass for styling, making it easy to work with CSS preprocessors.

Production build with Veet is quick, and previewing production builds is straightforward with simple commands.

Veet has an extensive plugin ecosystem, including official React, Vue, and Rollup plugins, as well as community plugins for various integrations.

Comparison between Create React App and Veet in terms of file watching and bundling speed, with Veet being significantly faster in development.

Final review of Veet's lightweight structure, fast development cycle, and advantages for modern front-end workflows over older tools like Webpack.

Transcripts

foreign

[Music]

what's going on guys welcome to my Veet

crash course so in this video I want to

talk a little bit about the what it does

what its benefits are and we're going to

jump in we're going to spin up a react

application look at the the boilerplate

that's given to us the starter code and

so on and I also just want to talk about

Tooling in general because I think it

can be confusing to people that are on

the kind of the beginner level that have

just created their JavaScript files and

put them right in the script tag you

have one or two files and and that's

fine for small projects if you have a

website with a little bit of dynamic

functionality or you have a really small

front-end application that's fine but

when you move to using a framework or

you're building more modern dynamic

interactive interfaces you're going to

be using build tools and you're going to

need a way to have a larger file

structure and have that bundled into

your production JavaScript that you can

then include include in the browser

alright so Veet is one of those tools

that can do that now Vita is a more

modern way of doing it so before we talk

about V it's important that you

understand how traditional module

bundlers like webpack work so webpack

what it does is it takes your

development file structure which could

be made up of many many JavaScript files

they could be classes they could be

functions your import your exporting

code from some files you're importing

into other files you're using npm

modules so third-party packages you

might have some CSS or SAS you might

have you might be using post CSS so you

have this kind of large development

source code and then what webpack will

do is it'll take all of that and bundle

it up into sometimes a single Javascript

file called like bundle JS or main.js

and then that will be included in a

script tag in your HTML so that would be

a production build and that's what

happens when you use something like

create react app or view CLI it just all

does it under you know under the hood

when you use create react app it's

actually using webpack under the hood

now the issue we have with something

like webpack is that when you're in

development and you make a change it

goes through that bundling that

packaging process every single time it

uses Babble it transpiles the code and

it does it every time which is okay at

first but as you're installing more

packages and your application grows it

starts to get really slow so what Veet

does is it works in a different way

where

in development it's not rebundling

everything every time you make a change

instead it it takes advantage of the

Native es modules in the browser because

in modern browsers you can use es

modules which is that import export

syntax all right so and you can do that

by just having a script tag and then

putting a a type attribute and saying

type equals module and then you can use

that syntax so V takes advantage of that

in fact it's built on top of something

called es build which is actually what

is using those es modules and serving

your code directly to the browser in

development so vid is essentially a Dev

server it's not a module bundler now

when it comes time to actually bundle

your files for production when you run

npm run build it uses something called

rollup which is a a module bundler all

right so V is very fast because it

doesn't have to keep rebundling

everything like like webpack or parcel

now as far as create react app goes I'm

seeing a lot of people lately using Veet

over create react app you know if

they're not using next.js or remix and

it is faster in many ways uh I don't

like to say one thing is better than the

other create react app is a great tool

it's been around for a long time so

there's a lot of resources there's a lot

of support for it I'll continue to use

it in courses and tutorials but Veet is

a good alternative and there's a react

plug-in that you can use that makes it

really easy to get set up in fact if you

just run the initial command It'll ask

you if you want to use just vanilla

JavaScript react views felt and we'll go

over that we'll see how that works now

let's just take a quick look at how

something like create react app works

which uses webpack under the hood so

basically when we first run create react

app webpack is going to look at the

entry point which is going to be the

index.js file and then it'll bundle all

the files and modules that are imported

in that index.html then it's going to

transpile the code with Babel it's going

to set up websockets for hot reloading

it's going to bundle everything and then

it's going to it's going to serve to the

browser right if it's you have your Dev

server when you run npm start or

whatever it is so this is a great

process for development but the issue is

that create react app has to bundle all

the files every time there's a change

and this can start to get slow as your

application gets bigger it also means we

have to wait for the files to be bundled

before we can see the changes in the

browser now if we look at the Veet

process we don't need to bundle

everything before starting the server

veetuses es build to pre-bundle our

files and do code splitting on the Fly

and this means that we can start the

server and we see our changes in the

browser immediately and we don't have to

wait for the files to be bundled so this

is a huge improvement over create react

app so after the app is served to the

browser V will then watch for changes

and update the browser in real time and

it uses the browser to parse the es

modules and then it'll bundle files on

the Fly and this means that we can see

our changes immediately and when your

code contains Import and Export

statements the browser will request the

corresponding files from the server via

HTTP alright so that's kind of a just a

quick rundown of how Veet works so what

I want to do now is jump in and show you

how to get started with using Veet for

we're going to use react but of course

you can use it with vanilla JavaScript

or another front-end framework all right

guys so this is

vjs.dev this is where you can find all

the documentation configuration options

so anything you need so if we go to

guide here it will tell us how to get

set up now I do want to mention that I

have a blog post at my website that is

basically a basically follows along with

this tutorial so talks about a lot of

the stuff we've already mentioned and

then has little Snippets for our

commands and the little bit of code that

we'll be writing and so on so I'll have

the link to that in the description so

to get started we can use npm yarn or

pnpm so I'm going to open up a terminal

here and we're going to run npm create

and then Veet at latest and then

whatever we want to call the folder I'm

just going to call it Veet app now when

I run this It'll ask what I want to use

as far as a framework or vanilla but we

can also add dash dash template

template and then I could say react or

view or whatever I want to use but I'm

just going to run it like this

and you'll see the choices that we get

vanilla view react preact lit spelled

and others I'm going to go ahead and

choose react you can use typescript I'm

just going to choose JavaScript and then

CD into feed app and then from here I'm

just going to run vs code

and I just want to take a look at the

file structure now throughout this video

it might seem like I'm bashing create

react app and I'm really not I'm just

trying to point out the benefits and the

features of Veet and one of those

features is the very simple boilerplate

file structure that we have here so you

can see it's very light if we look at

our package.json again very light we

just have react and react Dom as

dependencies as Dev dependencies we have

Veet we have the react plug-in because

we chose to use react and also our types

for react and then as far as scripts go

we have our Dev script that's going to

go ahead and run Veet which will run the

dev server we have our build script to

build out our files for production using

roll up and then preview will preview

our production build once once we run

npm run build alright so simple

package.json the config again very

simple very light all we have here is

the Define config helper function that's

where we pass in all of our

configuration and here we just have a

plugins array with react because that's

what we're using all right now you can

also install other plugins I'll show you

that towards the end and then we can

have a server object here for our Dev

server options and I'm going to set Port

3000 because the default I believe is

like 51.73 or something like that so and

if you want to add a proxy here you can

do that as well there's other options

you can look at the documentation for

that so let's save that file and then

we're going to go to our index.html

which notice is not in the public folder

the public folder is strictly for assets

images icons things like that

index.html is right in the root and if

we look at it it's very simple we have

our div with the ID of root just like

you would with any react application and

then notice the script tag is using this

type equals module so this indicates

that we're using ES modules in the

browser and instead of pointing to some

bundled JS file we're actually pointing

to our main jsx which is our react entry

point so if we look at that that's where

react and react Dom are brought in our

main app components we have a little CSS

file with some default styling and then

rendering here from react Dom which is

rendering our app component okay and if

we look at the app component it's very

simple it's just a simple landing page

we'll check it out in a minute and it

has some state for account and just has

a button that's going to increment that

count

all right so let's go ahead and run the

dev server I'm going to open up my

terminal and we're going to say actually

first of all we have to run npm install

which will obviously install Veet and

all our dependencies react and so on

okay once we do that we can run npm run

Dev

that's going to open on 3000 and you're

going to notice that everything is just

really really fast so this is just a

basic landing page it's the app.jsx file

that I showed you we have this little

button here where we click and it just

increments the count State okay so what

I want to do now is just create a very

simple react component so let's create a

folder called components and then in

there we'll create a file called header

let's just say header.jsx and I'll do

r-a-f-c-e enter I'm just using the react

Snippets extension and let's see we'll

just put in here in the div

hello world

and then let's bring that into our

app.jsx so we'll say import

header and we'll put the header

component right here

okay now I'm going to save that and

let's go back here and notice now we get

hello world and notice that the state is

still here that count is 12. it didn't

reset to zero when I made a change okay

so that's an example of HMR a hot module

replacement

so another thing that I want to show you

is how we can have environment variables

so if we go back

to vs code and we create in the root

okay you want to make sure you're in the

root and we're going to have a DOT EnV

file and this is something you can do

with create react app as well if you

have Global variables that you want to

be accessible throughout your site then

you can have this dot EnV file where

with create react app you would do react

underscore app underscore and then

whatever you know whatever the the key

you want to use or the variable you want

to use we'll go ahead and use copilot's

suggestion of API URL now instead of

using react underscore app we say Veet

underscore and then whatever the the

variable so I'm going to save that and

then to use it let's go into our header

and to use that let's just replace this

hello world we don't do process.env what

we do is import.meta so import meta and

then EnV and then whatever

our variable is so we'll say API

underscore URL

okay and then if we go back to our home

page here we should see that value of

the API URL so that's how we can have

environment variables now another thing

we can do is use SAS out of the box so

let's go back

and I'm just going to install SAS we do

need that as a dependency so we'll

install it as a Dev dependency

and let's run the server again

and what I'll do is go over to here to

the source folder create a folder called

scss or we could have our SAS files and

let's create

main.scss I'm just going to add a simple

variable

of primary color and we'll set that to

let's say steel blue

and then I'll add that to the body's

background color now when I have the the

CSS file I can just bring it directly

into my component so I can say import

and we're going to do dot slash scss

slash main dot scss save that and now

you can see we have our blue background

so it's as easy as that if you want to

implement SAS

and then when you're ready to build for

production you can simply run npm run

build

okay so very quick and then you'll see

there's a disk folder here and if you

want to preview that build you can do

npm run

preview

and now that's going to open on this

localhost 4173 so this is our production

build

okay so pretty simple

now as far as plug-ins go if you go to

the website here and you go to plugins

as far as official plugins we really

just have the The View plugin

react react with swc and then you can

also use roll-up plugins because it uses

roll up to bundle your files for

production and then there's also right

here there's a bunch of community

plugins so different Integrations you

have like electron and

all kinds of stuff here pwa Progressive

web apps you have loaders you have

bundling plugins Transformer plugins

helpers so you can take a look at that

there's just there's a lot of different

things that you can install and use

there's even a vet SSR plug-in that you

can use for server-side rendering

so that's it guys hopefully you enjoyed

this as I said there is a blog post to

go along with it if you want to if you

want to read this and there's there is

some extra information that I put into

here but uh but that's it guys thanks

for watching and I'll see you next time