Up next in 10
ESBuild Crash Course to Compile & Build TypeScript + SCSS to JS & CSS in Browser
Jan 9, 2025
Get the full source code of application here:
https://github.com/gauti123456/esbuildstarterapp
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this uh video
0:02
so in this video we will look at a new
0:05
JavaScript
0:06
compiler which is called as es build
0:09
it's a great alternative to webpack it's
0:12
really fast you can just see on the
0:14
documentation it is showing that it's a
0:16
fast JavaScript bundler and compiler
0:20
faster than webpack parcel so they claim
0:23
that it's fast and also I personally
0:26
used it and I actually got faster build
0:29
times
0:30
so I will show you how to set this up so
0:35
we will be using in this tutorial how to
0:37
set up typescript I will be using
0:39
typescript instead of JavaScript
0:40
typescript is a super set of JavaScript
0:42
with additional features and for the CSS
0:45
we will be compiling SAS so it will be a
0:48
simple project you can also integrate
0:50
with react view any front end framework
0:52
but we will be taking a very simple
0:54
example of HTML right in the browser
0:57
we'll be compiling this typescript and
1:00
SAS to actual JavaScript and CSS this is
1:04
actually a command which is there npm
1:06
run built so this will actually run this
1:08
disc command under the hood which is
1:10
node ESB built config.js so we actually
1:13
defined this configuration file for ES
1:15
built so here it got all these options
1:19
and now if I run this file if you see if
1:22
you run this Command right here and PM
1:24
run built so just see on the left hand
1:26
side a public folder will be created and
1:30
and you can just see the build process
1:32
was really fast and I personally used
1:35
webpack in before but I got faster buil
1:39
speeds so it is little bit faster and if
1:42
you see we got this index. HTML we got
1:45
the main. CSS which is completely
1:47
minified as well so it is better for
1:50
performance we also got the source map
1:52
files as well we got the J minified JS
1:55
and uh this is a mapped file so you can
1:58
directly open this Pro project with the
2:01
live server this is extension so current
2:03
time it is 6:14 so we are actually using
2:07
a third party nodejs module which
2:09
actually is called as date FNS so we are
2:13
using this third party module inside our
2:15
application it converts this to a common
2:17
JS now so that we can directly use it in
2:20
the browser and it also comes with the
2:22
development server if you want to run it
2:25
locally you will run npm run def so what
2:28
it will do it will actually make use of
2:31
node mod so after you make any sort of
2:33
changes inside of any of the files SAS
2:35
files JavaScript typescript files or any
2:38
files it will automatically reload so
2:41
what it will see if I change any of
2:43
these background color in the SAS file
2:45
let suppose this is actually the
2:47
background color so if I try to change
2:50
this one if I make any sort of change it
2:53
will recompile this application without
2:55
having to again type this command you
2:59
can just see hot reload functionality
3:01
will be there so this makes it really
3:04
easy while you are developing your code
3:06
a real time live preview will be there
3:09
you can just add any typescript code as
3:12
well right here let's suppose if I write
3:15
alert
3:17
statement so it will get compiled and
3:20
you will see that now it is refreshing
3:22
so let's start this video and you can
3:25
find the full source code the link is
3:27
given in the description you can find my
3:29
GitHub repo and clone that so what I
3:32
will do I will simply make a new
3:35
directory which is es built
3:41
example and I will open it inside vs
3:43
code So currently it is empty we do need
3:46
to define a package.json file for this
3:48
so npm in it- y so this will create the
3:51
package.json file with the default
3:53
options now we need to install it as a
3:56
Dev dependency which is this yes build
4:00
this is a base compiler and the bundler
4:02
module bundler so quite a few
4:05
dependencies we need to install it right
4:08
here so there is some packages plugins
4:11
available for this es build one such
4:13
plugin is the SAS plugin which
4:16
automatically pre- compiles your SAS
4:18
files into CSS so es built- sash. plugin
4:23
and then we have es built similarly for
4:26
compiling SAS this plugin is also
4:27
required es built- post post
4:30
CSS and also we require Auto
4:34
prefixer so this is actually used for
4:37
compiling your typescript as well Auto
4:41
prefixer and we also need the
4:44
CSS Nano which is actually used for
4:47
compiling SAS into CSS so these three
4:50
modules are required CSS Nano es build
4:53
post CSS es has buil SAS plugin so these
4:55
three modules and just enter it so this
4:59
will actually install inside the dev
5:02
dependency section so it is not required
5:04
for production so once you deploy your
5:07
application these dependencies are only
5:09
required during the development phase so
5:13
once they are installed it will list in
5:15
the dev dependency section so in the
5:18
meantime we can create a source folder
5:21
you can see the dependencies are
5:22
installed we also need the
5:25
typescript dependency because we are
5:27
compiling typescript so so just add this
5:30
base
5:32
typescript package in the dev
5:35
dependencies so right here in the temp
5:37
Source folder we will Define template.
5:39
HTML where we will writing the HTML code
5:42
and then we will have a style folder
5:45
inside this we will have our SAS file
5:48
similarly inside this we will now be
5:50
having the main.js file sorry typescript
5:54
not JavaScript here so we need to rename
5:56
this to typescript
6:00
so inside this uh we also need a config
6:03
file for ESU so es built. config.js so
6:07
you can just see the icon is changed to
6:09
es built V code
6:11
recognizes so right in this file we do
6:15
need to require all these packages that
6:17
we have installed es build we need to
6:20
require
6:23
it then we need this SAS plug-in
6:30
so this will be coming from the es
6:33
built SAS plugin dependency then we need
6:37
to actually do the post CSS plugin this
6:40
is also required for compiling SAS so
6:43
this will be coming from es build post
6:47
CSS then we have the auto prefixer that
6:50
we
6:53
installed so we need to require it auto
6:58
prefixer then we also need to import the
7:00
CSS
7:01
manano this is also required for
7:04
compiling SAS into
7:06
CSS and then we will import the file
7:09
system and the path module which is
7:11
built in inside
7:16
nodejs so these are all the packages we
7:19
have required and now we actually need
7:22
to
7:24
write the function which will actually
7:27
build this application so ES build
7:29
actually contains a function which is
7:31
build function so this function actually
7:34
takes some parameters so the first
7:37
parameter it takes is the entry point
7:39
entry point simply means that which
7:42
which files you need to compile so our
7:44
main file is located in the source
7:46
directory and it is actually the
7:48
typescript file so
7:51
main.ts so put a
7:53
comma this is not an array this is an
7:56
object so just make it an object right
7:58
here
8:00
so entry points you can have multiple
8:02
entry points as well but for a basic
8:04
configuration I'm just showing you this
8:05
is actually the main file which will get
8:08
compiled
8:09
main.ts and the second option is the
8:12
build option so sorry bundle option so
8:16
this needs to be a bodian parameter so I
8:18
will set it to True Minify if you want
8:22
the code to be minified set it to true
8:24
if you also need the source map in the
8:29
this
8:30
folder you will put true
8:33
here and out directory simply means that
8:36
in which directory you need to create so
8:38
I will create a public directory output
8:40
directory where all the files will be
8:42
there then we have the plugins property
8:44
so here you will actually provide all
8:46
your plugins which we installed first we
8:49
will be providing the SAS plugin which
8:51
will be used for compiling SAS into CSS
8:54
then we will be providing the post CSS
9:00
plugin which we imported at the very top
9:04
and this actually takes some options
9:07
this takes an object of plugins again
9:10
and here we need to provide two plugins
9:12
which is Auto prefixer and CSS Nano
9:16
these are all used for compiling F into
9:19
CSS so after this uh put a comma it
9:23
takes some more options extract option
9:25
to be
9:27
true it's a Boolean parameter extract to
9:30
two and minimize if you want your CSS to
9:33
be minimized or minified you will put it
9:36
to
9:37
true so that's all that we need to have
9:40
in the plugin section so just put a
9:42
comma and then we got our loader loader
9:45
simply is actually if you want to
9:48
compile your typescript files into
9:50
JavaScript we use loaders so we will be
9:54
using Ts for
9:58
typescript and it it can even be have if
10:01
you are building it with react chairs it
10:03
can be types
10:05
TS6 so in that case we will be saying
10:07
TSX so we are handling both the
10:09
scenarios here so that's all that we
10:12
need to do and it returns a promise so
10:14
we can handle this Promise by dot then
10:19
so we can just console log a simple
10:22
message that build
10:25
completed so now we also need to compile
10:28
the
10:29
uh HTML template as well so you'll be
10:32
defining a function right here copy HTML
10:35
template this is a custom function so
10:38
right at the
10:40
top so this function will actually
10:43
required
10:44
for for copying the HTML template that
10:47
we will Define it in in this template
10:50
HTML this is will be a very basic HTML
10:53
document so we'll simply say es built
10:56
example so let me just write a very
10:59
basic HTML
11:06
document click me and we have given an
11:08
ID to
11:10
it so in the style CSS code we can
11:13
simply Define two variables primary
11:16
color which will
11:19
be black and the text color will be
11:27
white so now the body here will be
11:30
background color to
11:32
be primary color and let's suppose I
11:35
give a
11:40
button or I can just uh give it a
11:44
heading color should be white and it
11:46
should be appearing in the center
11:49
position so these are my SAS Styles
11:51
right here so color I can dynamically
11:54
put right here to be text color
11:56
not this is the advantage of using S CL
11:59
we have variables then we inside
12:02
typescript file we can actually use any
12:05
third party module of nodejs let me use
12:07
load Dash which is a very popular
12:10
package inside nodejs so we are
12:12
installing third party module now we can
12:14
simply import the low Dash package like
12:21
this so we can use any function of low
12:24
Dash
12:40
so we can say one such function is there
12:43
which is the Chun
12:47
function so here we have the array here
12:51
we can divide it by
12:56
two so this we can console log
13:03
so we have defined the typescript code
13:05
SAS code and the HTML code
13:08
now in the
13:10
HTML in this es built config JS file in
13:13
this copy HTML template
13:18
function we actually need
13:20
to write this logic so I basically
13:24
discussed this logic in the last video
13:26
as well so in this we are simply
13:29
let me paste this code and explain to
13:31
you what is
13:35
happening so this code is responsible
13:38
for embedding dynamically the CSS and
13:41
the JavaScript links whenever we deploy
13:44
the application by compiling it by es
13:47
build so what this is doing is that is
13:50
actually first of all providing the
13:54
template path which is located inside
13:56
source / template HTML then we are
13:59
providing the output path which will be
14:01
created under the public index. HTML
14:03
file and then inside that template we
14:06
are reading that template so whatever is
14:08
the content inside template HTML we are
14:10
reading it by this FS function read file
14:14
sync and then whatever is the content we
14:17
are adding a dynamic link tag which is
14:19
main. CSS so because the compilation
14:23
after compilation the name of the CSS
14:25
and the Javascript file will be main CSS
14:28
and Main Js
14:30
so we are adding this
14:32
dynamically
14:33
so after you do this inside your
14:37
package.json file you need to add a
14:39
script
14:41
section so what you will do you will add
14:43
a build script and here you will simply
14:46
rise write node es
14:49
build config JS so what this is will do
14:54
it will actually execute this uh file
14:57
dynamically whenever we
14:59
now let me just say npm run build so
15:04
hopefully it will create a folder uh let
15:06
me see it is saying cannot find
15:11
module uh let me
15:14
see node es built config JS
15:23
sorry sorry ESU do config.js
15:27
not so again run this command and
15:30
hopefully it will create a public folder
15:32
on the left hand side after compilation
15:34
is
15:36
done so the very first time it will take
15:38
some time for the
15:42
compilation you can see build is
15:44
complete we got a message and we got
15:47
this directory it contains the HTML code
15:50
and the JavaScript code but it doesn't
15:52
contain the SAS code so I think the map
15:57
file you can see it is generated and in
16:00
the index word we got the main CSS and
16:04
we got this main JS but uh oh sorry we
16:09
forgot to include this file SAS file in
16:11
the typescript we do need to include
16:13
this so this is our main file so we need
16:17
do need to include the SAS
16:20
file just include this and again do this
16:24
process so now you will see it is really
16:27
fast it basically for the very first
16:30
time if you compile it it will take some
16:31
time but after those compilations it
16:34
will not take a lot of time so now we
16:37
got the CSS as well so if you try to run
16:40
this file in the browser simply open
16:43
with live
16:44
server now you can see the app is
16:47
running and if I check the inspect
16:49
element go to console you can just see
16:51
low Dash function is correctly executing
16:54
and it is comp printed out the result it
16:57
actually cut array into three parts and
17:01
we are actually using a third party
17:03
nodejs module you can just see by using
17:05
this import statement inside typescript
17:09
file so all this typescript code was
17:11
compiled into a understandable code
17:13
which is understandable by the browser
17:16
so we can add some more typescript code
17:18
let me add this uh sample code that I
17:23
have so depending upon your application
17:26
you can just
17:29
using this thing you
17:33
can make your own
17:36
application so this you need to do it
17:38
for the very first time after you make
17:41
your
17:49
projects so let me paste this typescript
17:51
code so it will have all the features
17:55
that typescript supports
17:59
you can just see type checking you will
18:01
see at the time of declaring a variable
18:04
we actually you can see let passage of
18:07
typ string so in JavaScript these
18:11
uh we can't do like this so it is
18:13
typescript so at the time of declaring a
18:15
variable we exactly tell this variable
18:18
type so if you let suppose if I add this
18:20
moment I give a numeric value I will
18:23
typescript compiler will just show me
18:27
because this variable is of type string
18:29
so number is not assignable so this is
18:32
the advantage of using typescript
18:33
because at the time of compilation you
18:35
get exactly pinpoint errors while in
18:39
JavaScript you don't get disadvantage so
18:41
that's why we use typescript in most of
18:43
the projects so if I just rebuild this
18:46
file if I try
18:51
to again npm run
18:54
build so it is saying that uh build
18:58
filed with with could not
19:02
resolve oh sorry let me just remove
19:10
this so build is completed and you can
19:13
just see all these console log
19:15
statements will be
19:17
there hello typescript count 42
19:21
active so this is actually all the
19:24
typescript Cod is we have declared a
19:26
interface we have declared enum so all
19:29
these things we are declared we are
19:30
console logging it so this was a thing
19:34
guys and now I just want to add a
19:37
development script so that if I make any
19:39
sort of change I don't want to uh again
19:41
and again doing the same command so we
19:44
can add a development script so here we
19:47
can make use of nodemon so you can
19:49
install nodemon
19:51
locally as a dep dependency so install
19:55
it so it will get added nodemon
19:59
so the advantage of using node modon is
20:01
that if your application changes it
20:04
actually
20:08
adds so what I will do I will just copy
20:12
the command and just show you what this
20:14
does
20:18
so essentially what this command does it
20:21
listens for all the changes that you
20:22
done so we actually Define all these
20:25
files JavaScript sorry JavaScript
20:28
typescript
20:29
HTML SAS file so if any sort of changes
20:32
are done in the in these files then we
20:35
execute this command once again node es
20:38
build config JS so this is actually the
20:40
build command so instead of running npm
20:43
run build we will run npm run Dev so now
20:46
it will start listening for any sort of
20:49
changes so you can just
20:52
see so let's suppose if I make any sort
20:55
of change if I go to a SAS file if I
20:58
change the background color to a red
21:01
color so once again the script will
21:03
execute and the build process will you
21:05
can see
21:07
automatically the application is
21:09
refreshed so in this
21:13
way we can configure es build guys to
21:17
actually compile typescript project with
21:19
SAS in no time so this was a very good
21:23
example if you need this source code you
21:25
can go to this description I have given
21:27
the GitHub repo where you can find out
21:29
all this code thank you very much for
21:31
watching this video and I will be seeing
21:33
you in the next one thank you very much