Welcome back, guys, in this lecture, are we going to start a deaf server so this will make our life
easy.
That will be for automatic Piccirillo when we change the code.
So everything that we save is going to be there.
Now we need to go back to the AMPM, right.
So, I mean, I'm happy starter and we need to install this package.
So the name of the package is NPM install weap back and I'm going to save it.
BIPAC def server dash dash Steve dash the def that will save it as a dependency.
Right now the packages for the file will be modified and if we go here, it's not there yet.
OK, this is finished so it's still running.
Right.
OK now here it is.
The Web dev server is installed and is installed as a def dependency.
Now we need to configure this one into our web, that config file right here.
What we can do to make sure that you have a comma here right now, we need first to create a def server.
Oops, sorry, def server.
And I will say content based and that will be e that will be our distribution folder actually.
This folder here.
Yeah that one.
And I know this here that I have some file that I don't need actually is going to remove this one.
Right, good.
Now, you should have that file.
That file was by mistake created by me.
No way.
Now, here, I'm going to create that list.
OK, so this is the folder which the Web server will serve the file.
So this directory is when we are going to submit, we're going to give to the developers.
That's why it's called distribution.
This is the source.
So here we are putting our source code in.
We are working during the development process and we're not giving this one to anyone.
But this is OK.
No, here I noticed a couple of things that we can improve.
Right.
The first thing is that you need to save it.
Now, I just want to create a new folder called Ge'ez here.
And I want I'm just going to delete this file here.
Right.
You don't need that anymore.
Are we going to create it later?
Now, here, we need to change the path.
Why?
Because every time when I run these some of the scripts here, I want the output to be server saved,
introduced and insight just right.
So how we can do this, it's a simple.
So what we can do here is we can change just to this to JSA because we already have the path it's going
to do this in here is going to just then bundle.
Dodgiest.
Cool.
Now also I'm going to rename this one, I'm going to see Index.
You will see why in a future and make sure that you put this here code.
So for me it was automatically edit.
Right.
But for you it was probably like this right now.
Make sure that you go there and you find it right.
OK, let's write it together.
So in the current folder, J.S., then I don't have anything inside bandeau just right because I've
deleted that one.
OK, so how are we going to create this one easy npm around def.
So I'm going to run one of the commands here.
Yeah.
This one.
And I expect that file to be created here.
It is the bundle dodgiest.
It's already created.
They're good now.
I installed it that back server and configure these deaf server here.
What is next.
Now we need actually to call it right.
But how we are going to call it.
Well we can create a new script here and I can open this package.
Look, Jason here.
I'm going to put a comma in.
I'm going to see in it and I'm going to write Web back.
So I'm just going to copy the entire thing and I'm going to explain everything in a minute.
And I'm going to say mode development in the dash dash open.
No, this init here is the key word we're going to use when we run the script.
It can be neat or it can be start right now the Moseley's is saying mostly the developers use init or
start, but I'm going to stick with it.
So the purpose is this to run to run the script in the background as soon as we make some changes and
save those changes back.
OK, now I'm just using the same word here as a development because it's going to be faster for us.
We're not finished to go into the production because we're going to change the code a lot.
And now these dash dash open means that it will open the browser automatically.
Right.
So that is the flat.
No, everything else is pretty much it.
We just change it.
This one to here save make sure that you save this one.
We just add it in what else we can do.
Actually we will need to create a couple of other changes.
And let me just let me just think what we need to do next.
Actually we just going to run the script.
Right.
OK, let's run the script, npm run in it and let's see what will happen.
Let's wait.
And I hope it's going to open.
Here it is.
It's opening the index file that I just gave it here.
Right.
So it's saying it's localhost eighty eighty now this is a different so it's a it's a making.
This is like a real HDB server.
It's not a local Huelsman before will we with the full part here was the full but now it's like localhost
in the port.
OK, let's inspect it in seeing the console.
We do have the output right now.
This is awesome.
Is something that we did before from the source.
So let's change that one to.
Let's put a year here, 20, 20, right, save it and now I'm going to go back, I don't refresh, and
here it is.
Now, don't worry about this one here.
You don't need to worry about that one.
That that's not an error.
Now, that was compiled and it was safe.
And now this.
I can't do anything here.
Right.
I can't write anything here because this is running in the background.
So you have an error.
It will be here, right?
Good.
So what we can do here so we can change anything, 20, 20, 21, save it.
And you go back in now.
Actually, it didn't work like that.
No idea.
Create five, press five here and it's going to recompile sometimes these can get stuck right now when
it's recompile is going to be here.
Right.
So make sure that you don't refresh all of the time because this is the most important thing.
This should run in the background, cuz now we know how to do this.
So let's move to something more interesting.
And I want our indexed file here that that's in the source, which just going to close everything else,
close everything else.
So I haven't go over I haven't go over to the structure.
But this is the map that I've shown you the before.
This is the e-mail template that I used.
And there is a link to the styles that we have here, right.
In this cases in the distribution.
Don't worry about it.
I'm just going to explain later.
Now, I just want to copy this entire file and move it back to the distribution folder so how I can
do this.
So this is very easy in Web back, so our code can be automatically copied to the distribution folder
and then it can inject these bundle dodgiest into that file automatically.
So this is super powerful, but we need to use a plugin for that one.
And that plug is called HGL Wetback plugging in.
We need to go back here.
And actually I'm not I'm going to leave this one here to run.
I'm just going to open a new new window here.
Right.
And I'm going to go see the desktop and CD mapi starter.
So this is possible, right?
We can open a new window.
It's not going to be anything wrong with it, with the it's not going to interfere with the other window.
OK, so I'm going to install NPM install.
So I'm doing this just to show you that this is possible html dash web back plugin.
So remember, this is a plugin and I'm going to save it.
This as a dependency as well.
So let's run this one a little bit in here in the package that Jason I should be able to see it.
Here it is HTML weapon web back plugin.
But we need to do a couple of changes in order to use this plugin.
Now, this plugin we need to eat.
We already we install, we need to use it in our web back config file, right.
Unit.
So we need to require it here and we're going to save it in a const called Let's call HP, AML Web back.
You can call whatever you want plugin and that will be equal to require.
So what are we going to require here?
And actually I'm missing a letter here.
That's why he's giving me that one.
And I'm going to say HTML and for some reason should give me the entire one.
Here it is.
HTML what?
Plugging.
So I'm going to require the same plugin that I'm going to use it here.
So you need to use it here and see plugins so you can have more than one plug plugins in.
This takes an area.
Right, OK, inside I'm going to specify if I knew the variable, the constants here I just created
right here we can pass in the object.
So this is a good idea to learn how you can do this so you can pass in an object here.
Good.
Now, here we want the source file to be copied into distribution folder.
Right.
So we need to specify two things.
The first is, will be the file name in the file name will be the index, that HTML.
Right.
And that will be this file here that's coming from this source.
In the second one, we need to say comma here and the second one will be the template and this template.
I want to go to the source.
Sorry, I just mixed it a little bit.
I want to go to the source and then index that hgl so the template is actually our this our HTML structure
that we have before, and I want that one to go.
Back to the distribution folder in inside the distribution folder, we're going to have only the index
right now, just mix those two.
Sorry about this, guys.
Yeah, so this is the starting file source code and this is what we're going to end up here right now
in the distribution folder.
We need to see the index file after we run the command.
OK.
Next, what we need to do, so we just got to close this one, because I do have this index file here,
I'm just going to delete it.
And if you go back to this index file, if you notice something there, I don't have never I don't have
here in the full in the body.
I don't have a script here.
Right.
I don't have script that.
And I want these guys folder, this script, this script to be injected as well.
And this can be done through this plugin.
OK, so what we need to do here is actually I can close this one.
I don't need it anymore.
But this I can stop it.
I'm just going to say control see here.
Yes.
Because I need to stop the current process and I'm going to run it again.
NPM run in it.
Now this should open something for me and let's check this one out.
And here you go.
Why do you have to.
I don't know.
So here we successfully copied this one into the distribution folder.
But where is it?
I don't see it.
I do see the bundle just because we run the development before, but I don't see it now.
This this plugin, what this meant, what he's doing is not storing the data to physically to the disk,
but it's streaming the data, same as we do streaming the Netflix and stuff like that.
Right.
So it's not here, but if you want to see it, it's easy.
So I'm just going to go control see.
But before that, I just want to show you something.
So here I'm just going to open the inspect element and go to the console.
And here it is.
I do have the result from the previous right.
I do have the result from the index and the module that I created before.
Good.
But how is it possible?
Because I don't link it here.
The in the index that HDMI in the source, I don't have any link to the rebundled JS, but look at what's
happening here.
If you do go to the inspector, just going to go like this.
Here is script source Geass Bundall.
Not just so this script is automatically injected into our HTML page.
How powerful and cool is this?
OK, so we are one step closer to what we need, right?
So this is the file that we're going to work I don't need here actually, but how are we going to see
it here?
OK, so I'm just going to control see again, stop this one and I'm going to say npm sorry npm run def.
Now this should run and it should see should save these bundle.
But we have the bundle before.
But also we do have the index now.
Right.
Let's go down, let's go down in here.
You can see this script tag is added and we don't have it here in this index.
We don't have this one.
Right.
Good.
Now that is pretty much it for today's lecture.
Now you know how we can move, we can copy one file using the plugins from the source into the distribution
folder in how we can just add Web back dev server and how that one can run in the background.
So you can use two or three more terminal windows because sometimes you need to install you don't want
to stop this.
So you can do it that way.
Right now, if you want to see the changes that we're going to do here, for example, you can add more
changes here in the module or the index, but you need to run the dev server.
And sometimes when it's stuck here, press F5 or restart the server, the the service, because sometimes
it gets stuck in, you will not be able to see the output and you will try to refresh here.
But that is not how it is working because we just the entire process, we installed a plug ins, we
installed the server because we want that to be automatically and if it's not working means that something
is wrong with the process.
And yeah, that's pretty much it.
So I will see you in the next lecture.
I hope you enjoyed this one.
If you didn't understand, just please go watch it.
And yeah, that's pretty much it.
So stay safe and I will see you in the next one.