00:00:00
foreign
00:00:02
[Music]
00:00:05
what's going on guys welcome to my Veet
00:00:07
crash course so in this video I want to
00:00:09
talk a little bit about the what it does
00:00:12
what its benefits are and we're going to
00:00:14
jump in we're going to spin up a react
00:00:16
application look at the the boilerplate
00:00:19
that's given to us the starter code and
00:00:21
so on and I also just want to talk about
00:00:23
Tooling in general because I think it
00:00:25
can be confusing to people that are on
00:00:29
the kind of the beginner level that have
00:00:32
just created their JavaScript files and
00:00:34
put them right in the script tag you
00:00:36
have one or two files and and that's
00:00:38
fine for small projects if you have a
00:00:40
website with a little bit of dynamic
00:00:42
functionality or you have a really small
00:00:44
front-end application that's fine but
00:00:46
when you move to using a framework or
00:00:49
you're building more modern dynamic
00:00:51
interactive interfaces you're going to
00:00:54
be using build tools and you're going to
00:00:56
need a way to have a larger file
00:00:59
structure and have that bundled into
00:01:02
your production JavaScript that you can
00:01:05
then include include in the browser
00:01:07
alright so Veet is one of those tools
00:01:09
that can do that now Vita is a more
00:01:11
modern way of doing it so before we talk
00:01:14
about V it's important that you
00:01:15
understand how traditional module
00:01:17
bundlers like webpack work so webpack
00:01:20
what it does is it takes your
00:01:23
development file structure which could
00:01:25
be made up of many many JavaScript files
00:01:27
they could be classes they could be
00:01:29
functions your import your exporting
00:01:32
code from some files you're importing
00:01:34
into other files you're using npm
00:01:36
modules so third-party packages you
00:01:39
might have some CSS or SAS you might
00:01:42
have you might be using post CSS so you
00:01:44
have this kind of large development
00:01:47
source code and then what webpack will
00:01:50
do is it'll take all of that and bundle
00:01:52
it up into sometimes a single Javascript
00:01:55
file called like bundle JS or main.js
00:01:58
and then that will be included in a
00:02:01
script tag in your HTML so that would be
00:02:04
a production build and that's what
00:02:06
happens when you use something like
00:02:07
create react app or view CLI it just all
00:02:11
does it under you know under the hood
00:02:13
when you use create react app it's
00:02:15
actually using webpack under the hood
00:02:16
now the issue we have with something
00:02:19
like webpack is that when you're in
00:02:21
development and you make a change it
00:02:23
goes through that bundling that
00:02:25
packaging process every single time it
00:02:28
uses Babble it transpiles the code and
00:02:31
it does it every time which is okay at
00:02:33
first but as you're installing more
00:02:35
packages and your application grows it
00:02:39
starts to get really slow so what Veet
00:02:42
does is it works in a different way
00:02:44
where
00:02:45
in development it's not rebundling
00:02:48
everything every time you make a change
00:02:50
instead it it takes advantage of the
00:02:54
Native es modules in the browser because
00:02:56
in modern browsers you can use es
00:02:59
modules which is that import export
00:03:01
syntax all right so and you can do that
00:03:05
by just having a script tag and then
00:03:08
putting a a type attribute and saying
00:03:11
type equals module and then you can use
00:03:14
that syntax so V takes advantage of that
00:03:16
in fact it's built on top of something
00:03:19
called es build which is actually what
00:03:21
is using those es modules and serving
00:03:24
your code directly to the browser in
00:03:26
development so vid is essentially a Dev
00:03:29
server it's not a module bundler now
00:03:32
when it comes time to actually bundle
00:03:34
your files for production when you run
00:03:36
npm run build it uses something called
00:03:38
rollup which is a a module bundler all
00:03:42
right so V is very fast because it
00:03:45
doesn't have to keep rebundling
00:03:47
everything like like webpack or parcel
00:03:49
now as far as create react app goes I'm
00:03:53
seeing a lot of people lately using Veet
00:03:55
over create react app you know if
00:03:57
they're not using next.js or remix and
00:04:01
it is faster in many ways uh I don't
00:04:05
like to say one thing is better than the
00:04:08
other create react app is a great tool
00:04:10
it's been around for a long time so
00:04:12
there's a lot of resources there's a lot
00:04:14
of support for it I'll continue to use
00:04:16
it in courses and tutorials but Veet is
00:04:20
a good alternative and there's a react
00:04:23
plug-in that you can use that makes it
00:04:26
really easy to get set up in fact if you
00:04:28
just run the initial command It'll ask
00:04:31
you if you want to use just vanilla
00:04:32
JavaScript react views felt and we'll go
00:04:36
over that we'll see how that works now
00:04:39
let's just take a quick look at how
00:04:41
something like create react app works
00:04:44
which uses webpack under the hood so
00:04:47
basically when we first run create react
00:04:49
app webpack is going to look at the
00:04:51
entry point which is going to be the
00:04:53
index.js file and then it'll bundle all
00:04:56
the files and modules that are imported
00:04:58
in that index.html then it's going to
00:05:02
transpile the code with Babel it's going
00:05:04
to set up websockets for hot reloading
00:05:08
it's going to bundle everything and then
00:05:11
it's going to it's going to serve to the
00:05:13
browser right if it's you have your Dev
00:05:15
server when you run npm start or
00:05:18
whatever it is so this is a great
00:05:20
process for development but the issue is
00:05:22
that create react app has to bundle all
00:05:25
the files every time there's a change
00:05:27
and this can start to get slow as your
00:05:30
application gets bigger it also means we
00:05:32
have to wait for the files to be bundled
00:05:34
before we can see the changes in the
00:05:36
browser now if we look at the Veet
00:05:38
process we don't need to bundle
00:05:41
everything before starting the server
00:05:43
veetuses es build to pre-bundle our
00:05:46
files and do code splitting on the Fly
00:05:49
and this means that we can start the
00:05:51
server and we see our changes in the
00:05:53
browser immediately and we don't have to
00:05:55
wait for the files to be bundled so this
00:05:57
is a huge improvement over create react
00:06:00
app so after the app is served to the
00:06:03
browser V will then watch for changes
00:06:05
and update the browser in real time and
00:06:08
it uses the browser to parse the es
00:06:11
modules and then it'll bundle files on
00:06:13
the Fly and this means that we can see
00:06:15
our changes immediately and when your
00:06:18
code contains Import and Export
00:06:20
statements the browser will request the
00:06:22
corresponding files from the server via
00:06:25
HTTP alright so that's kind of a just a
00:06:28
quick rundown of how Veet works so what
00:06:31
I want to do now is jump in and show you
00:06:33
how to get started with using Veet for
00:06:36
we're going to use react but of course
00:06:38
you can use it with vanilla JavaScript
00:06:40
or another front-end framework all right
00:06:43
guys so this is
00:06:44
vjs.dev this is where you can find all
00:06:47
the documentation configuration options
00:06:49
so anything you need so if we go to
00:06:52
guide here it will tell us how to get
00:06:54
set up now I do want to mention that I
00:06:56
have a blog post at my website that is
00:07:00
basically a basically follows along with
00:07:02
this tutorial so talks about a lot of
00:07:05
the stuff we've already mentioned and
00:07:07
then has little Snippets for our
00:07:08
commands and the little bit of code that
00:07:10
we'll be writing and so on so I'll have
00:07:12
the link to that in the description so
00:07:15
to get started we can use npm yarn or
00:07:17
pnpm so I'm going to open up a terminal
00:07:20
here and we're going to run npm create
00:07:23
and then Veet at latest and then
00:07:26
whatever we want to call the folder I'm
00:07:28
just going to call it Veet app now when
00:07:30
I run this It'll ask what I want to use
00:07:32
as far as a framework or vanilla but we
00:07:34
can also add dash dash template
00:07:39
template and then I could say react or
00:07:41
view or whatever I want to use but I'm
00:07:43
just going to run it like this
00:07:45
and you'll see the choices that we get
00:07:47
vanilla view react preact lit spelled
00:07:50
and others I'm going to go ahead and
00:07:51
choose react you can use typescript I'm
00:07:54
just going to choose JavaScript and then
00:07:56
CD into feed app and then from here I'm
00:08:00
just going to run vs code
00:08:02
and I just want to take a look at the
00:08:04
file structure now throughout this video
00:08:06
it might seem like I'm bashing create
00:08:08
react app and I'm really not I'm just
00:08:10
trying to point out the benefits and the
00:08:12
features of Veet and one of those
00:08:15
features is the very simple boilerplate
00:08:17
file structure that we have here so you
00:08:20
can see it's very light if we look at
00:08:22
our package.json again very light we
00:08:24
just have react and react Dom as
00:08:27
dependencies as Dev dependencies we have
00:08:30
Veet we have the react plug-in because
00:08:32
we chose to use react and also our types
00:08:35
for react and then as far as scripts go
00:08:37
we have our Dev script that's going to
00:08:40
go ahead and run Veet which will run the
00:08:41
dev server we have our build script to
00:08:44
build out our files for production using
00:08:46
roll up and then preview will preview
00:08:49
our production build once once we run
00:08:52
npm run build alright so simple
00:08:55
package.json the config again very
00:08:58
simple very light all we have here is
00:09:01
the Define config helper function that's
00:09:03
where we pass in all of our
00:09:05
configuration and here we just have a
00:09:08
plugins array with react because that's
00:09:10
what we're using all right now you can
00:09:13
also install other plugins I'll show you
00:09:16
that towards the end and then we can
00:09:18
have a server object here for our Dev
00:09:21
server options and I'm going to set Port
00:09:24
3000 because the default I believe is
00:09:27
like 51.73 or something like that so and
00:09:31
if you want to add a proxy here you can
00:09:33
do that as well there's other options
00:09:35
you can look at the documentation for
00:09:37
that so let's save that file and then
00:09:39
we're going to go to our index.html
00:09:42
which notice is not in the public folder
00:09:45
the public folder is strictly for assets
00:09:47
images icons things like that
00:09:50
index.html is right in the root and if
00:09:53
we look at it it's very simple we have
00:09:55
our div with the ID of root just like
00:09:57
you would with any react application and
00:10:00
then notice the script tag is using this
00:10:03
type equals module so this indicates
00:10:07
that we're using ES modules in the
00:10:09
browser and instead of pointing to some
00:10:12
bundled JS file we're actually pointing
00:10:14
to our main jsx which is our react entry
00:10:18
point so if we look at that that's where
00:10:21
react and react Dom are brought in our
00:10:24
main app components we have a little CSS
00:10:26
file with some default styling and then
00:10:29
rendering here from react Dom which is
00:10:32
rendering our app component okay and if
00:10:35
we look at the app component it's very
00:10:37
simple it's just a simple landing page
00:10:39
we'll check it out in a minute and it
00:10:42
has some state for account and just has
00:10:45
a button that's going to increment that
00:10:47
count
00:10:47
all right so let's go ahead and run the
00:10:49
dev server I'm going to open up my
00:10:51
terminal and we're going to say actually
00:10:53
first of all we have to run npm install
00:10:57
which will obviously install Veet and
00:11:00
all our dependencies react and so on
00:11:04
okay once we do that we can run npm run
00:11:07
Dev
00:11:10
that's going to open on 3000 and you're
00:11:13
going to notice that everything is just
00:11:15
really really fast so this is just a
00:11:17
basic landing page it's the app.jsx file
00:11:20
that I showed you we have this little
00:11:21
button here where we click and it just
00:11:23
increments the count State okay so what
00:11:26
I want to do now is just create a very
00:11:29
simple react component so let's create a
00:11:32
folder called components and then in
00:11:35
there we'll create a file called header
00:11:38
let's just say header.jsx and I'll do
00:11:42
r-a-f-c-e enter I'm just using the react
00:11:45
Snippets extension and let's see we'll
00:11:48
just put in here in the div
00:11:50
hello world
00:11:53
and then let's bring that into our
00:11:55
app.jsx so we'll say import
00:11:58
header and we'll put the header
00:12:01
component right here
00:12:03
okay now I'm going to save that and
00:12:05
let's go back here and notice now we get
00:12:07
hello world and notice that the state is
00:12:10
still here that count is 12. it didn't
00:12:12
reset to zero when I made a change okay
00:12:16
so that's an example of HMR a hot module
00:12:20
replacement
00:12:21
so another thing that I want to show you
00:12:24
is how we can have environment variables
00:12:26
so if we go back
00:12:29
to vs code and we create in the root
00:12:33
okay you want to make sure you're in the
00:12:34
root and we're going to have a DOT EnV
00:12:37
file and this is something you can do
00:12:39
with create react app as well if you
00:12:41
have Global variables that you want to
00:12:43
be accessible throughout your site then
00:12:45
you can have this dot EnV file where
00:12:47
with create react app you would do react
00:12:50
underscore app underscore and then
00:12:53
whatever you know whatever the the key
00:12:55
you want to use or the variable you want
00:12:57
to use we'll go ahead and use copilot's
00:12:59
suggestion of API URL now instead of
00:13:04
using react underscore app we say Veet
00:13:07
underscore and then whatever the the
00:13:09
variable so I'm going to save that and
00:13:11
then to use it let's go into our header
00:13:14
and to use that let's just replace this
00:13:17
hello world we don't do process.env what
00:13:21
we do is import.meta so import meta and
00:13:25
then EnV and then whatever
00:13:28
our variable is so we'll say API
00:13:31
underscore URL
00:13:34
okay and then if we go back to our home
00:13:37
page here we should see that value of
00:13:40
the API URL so that's how we can have
00:13:43
environment variables now another thing
00:13:45
we can do is use SAS out of the box so
00:13:49
let's go back
00:13:50
and I'm just going to install SAS we do
00:13:53
need that as a dependency so we'll
00:13:55
install it as a Dev dependency
00:13:59
and let's run the server again
00:14:04
and what I'll do is go over to here to
00:14:07
the source folder create a folder called
00:14:09
scss or we could have our SAS files and
00:14:13
let's create
00:14:15
main.scss I'm just going to add a simple
00:14:19
variable
00:14:20
of primary color and we'll set that to
00:14:23
let's say steel blue
00:14:26
and then I'll add that to the body's
00:14:28
background color now when I have the the
00:14:31
CSS file I can just bring it directly
00:14:33
into my component so I can say import
00:14:36
and we're going to do dot slash scss
00:14:40
slash main dot scss save that and now
00:14:44
you can see we have our blue background
00:14:46
so it's as easy as that if you want to
00:14:48
implement SAS
00:14:50
and then when you're ready to build for
00:14:52
production you can simply run npm run
00:14:55
build
00:14:59
okay so very quick and then you'll see
00:15:02
there's a disk folder here and if you
00:15:03
want to preview that build you can do
00:15:05
npm run
00:15:07
preview
00:15:09
and now that's going to open on this
00:15:11
localhost 4173 so this is our production
00:15:14
build
00:15:16
okay so pretty simple
00:15:19
now as far as plug-ins go if you go to
00:15:23
the website here and you go to plugins
00:15:26
as far as official plugins we really
00:15:28
just have the The View plugin
00:15:30
react react with swc and then you can
00:15:35
also use roll-up plugins because it uses
00:15:37
roll up to bundle your files for
00:15:39
production and then there's also right
00:15:41
here there's a bunch of community
00:15:43
plugins so different Integrations you
00:15:46
have like electron and
00:15:49
all kinds of stuff here pwa Progressive
00:15:52
web apps you have loaders you have
00:15:54
bundling plugins Transformer plugins
00:15:57
helpers so you can take a look at that
00:16:00
there's just there's a lot of different
00:16:01
things that you can install and use
00:16:03
there's even a vet SSR plug-in that you
00:16:06
can use for server-side rendering
00:16:08
so that's it guys hopefully you enjoyed
00:16:10
this as I said there is a blog post to
00:16:13
go along with it if you want to if you
00:16:15
want to read this and there's there is
00:16:17
some extra information that I put into
00:16:19
here but uh but that's it guys thanks
00:16:21
for watching and I'll see you next time
