Vite Crash Course | Faster Alternative To CRA
Summary
TLDRThis 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
🚀 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.
🛠️ 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.
⚡ 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.
🌐 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.
Mindmap
Keywords
💡Vite
💡Webpack
💡ES Modules
💡Development Server
💡Hot Module Replacement (HMR)
💡Rollup
💡Create React App
💡Babel
💡ESBuild
💡Environment Variables
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
Посмотреть больше похожих видео
Cara Install React Native + Full Setup [2024]
2-Langchain Series-Building Chatbot Using Paid And Open Source LLM's using Langchain And Ollama
Creating our first react app using create-react-app | Complete React Course in Hindi #2
Expo in 100 Seconds
Web Developer Roadmap (March 2024) - Everything is Changing
Getting Started | Mastering React: An In-Depth Zero to Hero Video Series
5.0 / 5 (0 votes)