live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Snowpack Crash Course to Compile & Bundle SCSS & JS Project in Browser Using HTML5
Jan 9, 2025
Get the full source code of application here:
https://github.com/gauti123456/snowpackstarter
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video we will look at
0:05
a new build and compiler of
0:09
JavaScript which is called as
0:11
snack it's a new tool in the market and
0:14
it's a great alternative to bundlers and
0:17
compilers such as webpack parcel
0:20
browserify rollup so it actually differs
0:24
from these other compilers such that the
0:27
build speed is pretty faster and I
0:30
personally used it and I can just see
0:33
show you this is actually a project
0:36
right here which uses SAS and es6
0:39
JavaScript using import statements we
0:41
are using thirdparty nodejs modules such
0:44
as low Dash and this is actually a
0:46
YouTube thumbnail nodejs module which
0:49
actually downloads a YouTube video
0:51
thumbnail so we have this JavaScript
0:53
code and this is actually a SAS code and
0:56
I will show you how to compile this into
0:58
a code that it understandable by the
1:01
browser so we have a simple command that
1:03
we need to run npm run build so this
1:07
will actually compile all these project
1:09
into
1:11
a public folder so npm run build so as I
1:15
execute this command you will see that
1:17
on the left hand side the build process
1:19
is completed and you will see a build
1:21
folder has been created and actually it
1:25
differs from webpack it doesn't Minify
1:27
your actual code you can see the code
1:30
remains constant and also this
1:32
JavaScript code so it actually remains
1:34
constant this code is not minified but
1:37
instead the modules which are used the
1:39
nodejs modules that we imported YouTube
1:41
thumbnail this is low Dash package it
1:44
actually created a new directory called
1:46
asore snow pack and inside this
1:48
directory these modules are being
1:51
splitted into different files so each
1:54
module has its own file you can just see
1:57
low Dash has it has its own file YouTube
2:00
thumbnail downloader has its own file so
2:02
we have actually used these two
2:04
components these two modules third party
2:06
modules so it has actually converted
2:08
them into their individual files so that
2:11
now if I rebuild the project it will the
2:14
build process will be pretty faster so
2:16
it is really useful when you have a
2:18
large project if you are using a very
2:20
large dependencies so it will actually
2:23
create a it will not bundle all your
2:26
code into a single file rather it will
2:28
split your code into multiple files so
2:31
that when you build your project the
2:34
speed of the build process will be
2:35
pretty faster so solution such as
2:38
webpack they actually bundle all your
2:40
code into a single Javascript file but
2:42
instead of that snow pack actually split
2:46
all your components into different files
2:48
and then it actually loads them like
2:51
this you see we are importing this load
2:53
as package this is a YouTube thumbnail
2:55
downloader and now you can simply run
2:58
this file
3:00
this is actually the index. HTML file
3:03
and here you can include the main CSS
3:07
style CSS you can run
3:10
this by simply uploading them to a
3:12
hosting plan and now you can just see it
3:16
runs as usual so it also comes with the
3:20
development server as well so while you
3:22
are developing you can run this command
3:23
npm run Dev sorry npm Run start so it
3:27
will start a development server so so
3:30
now you can just see it has started the
3:31
development server on HTTP Local Host
3:34
3000 so now while you are developing the
3:37
project you will open this server and if
3:39
you make any sort of change let's
3:41
suppose in the SAS let me change the
3:43
background color of the body so it
3:45
instantly refreshes you will see the
3:48
build process is pretty faster as
3:50
compared to webpack parcel rollup all
3:52
these other build uh bundlers or
3:54
compilers this s pack is really fast and
3:58
you can just see any property you can
4:01
change it's really fast you will see
4:05
instant refresh you can add JavaScript
4:08
code you can add SAS code if you just
4:12
see auto refreshes there so we will try
4:16
to implement this from scratch you can
4:18
get the full source code used in this
4:20
video the link is given in the
4:21
description you can find my GitHub repo
4:23
and you can clone this and now to get
4:26
started it's uh you will create a new
4:30
project snow pack project I will simply
4:34
open this inside vs
4:39
code So currently you will see the
4:42
directory is empty now we just need to
4:45
initialize the package.json
4:48
file so inside this we need to install
4:52
two modules as a Dev dependency so- D
4:56
and we will be installing the snow pack
4:58
which is actually the base bundler
5:01
compiler and then we just need to
5:04
install a plugin which will actually
5:06
handle the SAS part so add theate snow
5:09
pack and it has a plug-in to actually
5:12
compile the SAS into CSS so plug-in SAS
5:17
SS this is actually the plugin atate
5:19
snack plugin
5:22
SAS so that's all these two packages you
5:25
need to install
5:27
it so here we can create a source folder
5:30
where you will write our actual code and
5:33
here you'll be having the index.js which
5:36
will be the main file and then we can
5:39
have a folder where we can have our SAS
5:43
file so we can just create style. SAS
5:46
and also we will have a index.html
5:57
file so here we do you need to create a
6:00
snow pack config file
6:03
config so you can just see the icon will
6:06
change this is actually a snopac
6:08
config.js f so here you will be writing
6:10
the code to actually configure snack so
6:13
it actually uses a function export
6:17
default and it actually returns an
6:19
object right here inside this you can
6:22
actually provide the plugins in the
6:24
plugins array you can add as many
6:26
plugins as you want but in this case we
6:28
only need to to compile the SAS so in
6:31
single codes we will write snow pack at
6:34
plugin SAS so we have included the this
6:38
plug-in which will actually compile the
6:40
SAS into
6:42
CSS so we have added this plug-in right
6:45
here the second property it takes is the
6:48
Mount and this is actually a object and
6:51
here you need to provide the location in
6:53
which the code is located in which you
6:55
need to compile and bundle so URL you
6:57
will put like this
7:00
and then you need to provide the
7:01
location so it is present it will
7:04
actually create a public folder and the
7:06
URL will be
7:08
this and static just put a true variable
7:13
so it takes a Boolean parameter static
7:16
to true so it will create your actual
7:18
disc directory as public directory where
7:21
you all your code will be located so
7:24
directory will be
7:25
built and then it takes uh after this
7:29
this Mount we have a development server
7:34
and this Dev options so while you are
7:37
developing your project locally we can
7:39
actually start a development server on
7:41
port number 3,000 and this this will be
7:45
opening if you want to open it directly
7:48
you can put true here so this means that
7:51
as you just uh open it open just execute
7:55
the command the browser will
7:56
automatically open so now we have the
7:59
build
8:01
options property build options so when
8:04
you build your project what directory
8:07
you need to create so we need to create
8:09
a build directory so this will actually
8:11
create a build directory whenever you
8:12
build your project if you want the
8:14
source map file as well in most cases we
8:17
do need to have a source map file you
8:20
put here true and if you want to Minify
8:22
your code you will say true so when you
8:25
build your project all your source code
8:27
will be minified so these are all the
8:30
properties guys which are there in snow
8:32
pack very simple configuration file you
8:34
need to create before you compile your
8:36
project now you can install any third
8:38
party nodejs module let's suppose I use
8:42
uh any module low
8:44
Dash and the second module I will use is
8:48
YouTube thumbnail downloader you can use
8:51
any third party
8:53
module so which is required for your
8:56
application so sorry the spelling of of
8:59
downloader is incorrect let me correct
9:11
downloader
9:13
down loader sorry
9:19
downloader so now it is installed so we
9:22
can actually inside your
9:26
JavaScript we can import these modules
9:28
so import
9:30
from low
9:31
Dash and we need to import the
9:35
stylesheet as well style.
9:38
sccss so we can imported the style sheet
9:42
and then we also need
9:45
to YouTube thumbnail downloader
9:48
HD we have imported both these modules
9:51
and now we can use them so we can simply
9:54
use the load lad Dash module it contains
9:56
actually this method you can split your
9:58
array into to multiple things the second
10:02
argument two so two two two two elements
10:04
will be splitted so these two these two
10:06
so three arrays will be created and then
10:08
we will use this module of YouTube
10:10
thumbnail downloader and here you need
10:13
to pick provide the YouTube Thum uh
10:16
video link so I will simply paste it so
10:18
all this will be console log when you
10:20
run
10:22
this so YouTube thumbnail downloader
10:27
HD and now for the SAS we we can write
10:29
some basic uh SAS code we can declare a
10:32
variable primary color and just make the
10:34
body background primary color you can
10:37
just write your SAS code I'm just
10:38
showing for
10:40
example and uh now in the HTML we just
10:43
need to include this
10:46
uh SAS
10:51
file we can just include main main. CSS
10:54
which will get
10:56
created and for the script tag we can
10:59
include script
11:02
Source MJS and it is of type module so
11:06
it's a module because we are using
11:09
import statements right here that's why
11:11
we need to put put this attribute type
11:14
is equal to module so now we can run
11:18
this build script you just need to go to
11:20
package.json and just inside your you
11:23
can add two scripts right here first is
11:26
the build script second will be the
11:28
developmentt
11:30
script
11:36
which so for the build script what we
11:38
will do
11:40
so we have snow pack directly write snow
11:44
pack build this is for the build and
11:47
snow pack Dev so this is a development
11:50
script so these are the two scripts so
11:52
what I will do I will come to the
11:54
command line and simply run npm run Dev
11:57
so now it will start the development
11:58
server or Local Host 3000 it will
12:03
compile and bundle all your HTML SAS
12:09
JavaScript for the very first time it
12:11
will take some time it is saying that
12:13
export default unexpected
12:16
token uh let me see export
12:21
default okay we haven't imported snow
12:24
pack so you do need to import this at
12:26
the very top
12:32
so we need to import snow pack right
12:34
here at the very
12:41
top export
12:45
default I think this file is named as EJ
12:48
MJS not JS MJS so just rename this file
12:52
to MJS
13:06
uh I think it is saying that snow pack
13:08
Dev options open is not of a type
13:11
string
13:14
so I will just set it to none so this
13:18
will not open it automatically we need
13:20
to manually enter the URL so it will
13:23
compile your project so now it is
13:26
listening on Local Host 3000 so so we
13:29
can visit now you can see your project
13:34
if you go to Local Host
13:40
3000 it is saying that main. CSS is not
13:48
found we can remove this just remove
13:52
this it will get automatically added you
13:54
don't need to manually include this npm
13:57
runev
14:05
I
14:21
think okay what I need to do here uh it
14:25
is I think it is present in the same
14:27
folder so we need to give the correct
14:29
location in index Ro
14:54
GS is saying that not found let me just
14:58
build the project first of all npm run
15:03
build so what you will see it will
15:05
create a build directory if you see on
15:07
the left hand side it will
15:10
actually create a build
15:14
directory and it will create a snack
15:22
folder so you just need to include the
15:24
Styles sheet which is present in the
15:26
same folder
15:30
style CSS it has created compil the SAS
15:34
into the CSS now you can directly open
15:40
this so code as you can see whatever is
15:42
written is compiled
15:50
and the link is given guys in the
15:53
description you can actually clone the
15:56
GitHub repo
15:59
I think there is some kind of typo
16:00
mistake I have done that's why that uh
16:03
development script is not working so you
16:05
can actually clone that script when you
16:08
run npm run Dev it will actually start
16:10
your project in development
16:12
mode like this so the link is given in
16:15
the
16:21
description so thank you very much for
16:23
watching this video
#Programming
#Web Design & Development
#Development Tools