Welcome to our first coding challenge under Node.js.
So let's have a look at what we are going to do.
First, we are going to create a server to render two pages with different content.
The first task.
The second task is use the FS module to create a main folder called public and to subfolders.
That is pages and CSS folder.
And we are going to create two, three files, two in the pages folder.
That is a homepage and then about RS.
Dot a HTML.
And inside the CSS folder you are going to create the style CSS.
And lastly, create a server to save these files.
Well they take note here is that creating of the four days we are not going to use the manual way for
example right clicking and create a for or public you are going to use the FS module to create all the
folders and files.
This challenge seems to be a challenge, right?
Don't worry, just give it a try.
If you are ready, post this video and give a try to this challenge.
After that, I'm going to show you my solution.
So let me show you how I'm going to solve this challenge.
This video is going to be a little bit longer, so pardon me with that.
So on the same file, I have commented out all what we did in the previous video.
So what I need is these two modules.
So come down here and let me paste it here as that and let me remove the comment as that.
So let me have a beautiful comment says solution as that perfect.
So now let's get rocking.
The first step is I need to create the server.
So the server instance cost the server is equal to eight http dot create server.
And this what I want, I need the instance of the server and that is it.
And down here listen to the server that is run the server.
So on the server we have a method called listen and for this part let's use 8000.
The next is my callback function.
Remember console.log is a function so just console log and says that server is running.
Has that.
So.
Moment of truth.
So back to my terminal here.
Let me run the application node server and could see that server is running, which is this.
Now I have finished creating the instance of my server.
The next step is let's go ahead and create those folders as is stated.
So down here, let's go ahead and create the folder.
So create public.
Let's create folders.
All right.
So let me bring this one here before the server.
Okay.
Here, the first step.
So how are you going to create a folder?
Remember, we make use of what?
The FS module.
So here we go.
So f s dots.
I'm k d i r and the name of the folder.
The question says two folders public and then the SLC folder.
So here you pass in the folder name.
The question says that you should create two folders public and then inside we have to subfolders pages
and CCIS.
So for the meantime, let's create a public folder and as always you pass in a callback function.
I'll start and if there are some errors, you're going to get it here as that.
And let's check if error we are going to console.log the.
Error here.
Otherwise we will console.log and say that Fodor has been.
Created.
All right, so let's run a server again, click the console and then restart the server.
Now folder has been created, so let's check it out.
Indeed we have the folder being created by insists that we should create additional or stuff order.
So here to create a folder we're going to make use of force slash and the name of the folder are going
to be pages.
So now moment of truth.
So again, because I've made changes to my server, I need to restart it.
So now folder has been created, check it out.
And inside the public we have pages folder and then last folder is going to be the case folder.
You get it?
Yes, I get it.
So CSS folder.
Now again, let's run the server again and here we go.
Folder has been created inside a public.
We have two folders that is great or better so we can we run the code at once that is a public forward
slide forward slash.
We get it by I think the easiest way to go.
That is the first the second task we are done with that.
The next task is create three files, two in the pages folder called pages and about dot HTML.
So let's go ahead and create those files.
So here creates files, create files and less common.
This one otherwise is going to run again.
So here we go to create a file.
I'm going to use the FS module, going to be write file.
So next is I need to pass in the file that I want to create.
The question is we need to create home a HTML and about a HTML.
So I need to pass in the path.
Remember, I want to create inside the pages folder.
So I will go to the public folder for a slash pages and then force slash home dot HTML and that is the
file I want to create.
So the next agreement is a content that we want to write onto the file because you are going to write
a HTML onto the page.
Let's use backtrack so I can bring it down here to have more room.
So let me open the back take.
Now here I can write any HTML syntax, so let's create a simple HTML syntax here as that and let me
close the div as that and let's add h one and says that welcome home.
And let's close the H one and let's add some P tag here and says that where this is home.
Page.
And let me close the pea.
Now, the next argument going to be a callback function.
So after this one, after this, you need to add comma and then the callback function, let's use normal
function here and we have access to error.
So let's check it out here.
So if error, then why not you go ahead and console.log the error, save it otherwise, or else we will
console.log and save that file.
Create it.
Moment of truth.
Okay, so now let's clear the console and start a server again.
Yes.
File created.
So let's see inside the pages.
And indeed we have the home page.
These ones are from the previous video.
Right.
So don't worry about this one because on the pages.
But the question says that we should create two files.
One is a home and about.
So instead of home here we are going to create about and now let's say welcome.
Let's say about.
And this is about page.
Is that so again?
Run the server again, click the console and then lets restart it.
Now file created.
And indeed we have two files about an homepage.
So now we are done with this once.
No last one is here, which is the case file.
So the same thing.
I'm going to use the same function to create a file.
So to create the case you are going to create inside the case folder.
So here instead of pages is going to be the case and now it's going to be style dot CSS, dot cc.
And there you go.
So what about the contents?
Let's add a simple CSS here says H one, and then let's give it a color of, say, red.
Now let's save it and let's try to restart our server.
Click the console and have a look file created.
Now indeed, we have this CSS being added on to the file.
Now we are done with the whole logic with the exception of rendering the pages.
So now let's commence these ones out here, the functions that we have created.
We are done with that.
Now let's come back to the actual server implementation.
So when a server is running, we need to listen to an event.
So down here.
Listen to events.
Remember on the server, we are going to listen to an event which is on and on that we can check the
you are or the user is trying to request.
So here server dot on meaning we are ready to listen to an event and the event type here are going to
be requests.
And here we pass in a callback function which have access to my requests or to a request and response.
It is the my request.
Okay, so let's use a real function this time around.
I have access to the request and response as that.
Now here we go.
Well, we have a couple of ways to render those files as we did before.
So the first step is get the you are error.
So as we did const you are error we can get you are error and I request that you are URL as we did before.
So let's check if the you are error is equal to false slash.
That is the home page.
What we are going to do is we need to read the file, the home page and then pass it to the rest dot
right to be able to send to the user.
So here we go.
So let's say read the file on the HTML on the home dot HTML.
So here we go, make use of the file module and then read file.
And here we need to know the file that we want to read.
At this point, we have two ways of doing it.
Let me show you the first, the easiest way, and let me show you the other way, which is most recommended.
So as we did, we need to locate the file that we want to read.
And lucky for us, it is inside the public folder pages and then home.
So here we need to trace the path so public and then force slash pages and forward slash home dot HTML.
And the next argument going to be a callback function that we want.
So here we have access to the error.
So let's check if error, why not?
We will go ahead and then console.log the error.
Otherwise we are going to display a message says that well file has been loaded, but instead we are
going to write and send to the user.
So here I'm going to make use of red dot right head as we did before and it passed in the status quo
200, which simply means okay then you pass in the content type.
This time around you are going to send only a HTML.
So the value is going to be text for a slash a HTML and that is it.
So next is we want to sign the response or data to the user which is red dot, right.
And you want to send the data so you have access to the data also as a callback function here, the
actual data after you read from this file.
So here are going to send the data to the user.
And lastly, we want to end the response because we are done the server has done sending the response.
We need to end it here.
So now let's try again and then restart our server if everything is going to be all right.
So back to our terminal here, let's make sure that we restart our server.
And now let's go to this where we left the previous video.
This is our server, right?
So here the port is 8000 so let's change to look our host colon 8000 and now something incredible is
happening nothing is rendering oh batter by side instead of triple equal to I use assignment operator
sorry guys so he is supposed to be at triple equal to as that so let's make sure that I restart the
server again and let's check it out, refresh it and work from home.
That is great.
Perfect, guys.
All right.
Let's finish up the last task.
That is the rendering the about page and I'll show you something.
So again, for this one, we can copy the if statement.
The difference here is the location of the path.
So here are going to be about page.
So here, if the u r l is equal to about, then the location or the file is going to be the about a
HTML template, which is this one, and that is it and that is it.
So let's try to restart the server again.
So let's go to four slash.
About and indeed we have about page now we are done with the whole solution about the challenge.
But guys, we have some problems here.
So let's say that we have deployed this particular application.
Well, what you are going to face is that the location of a file varies depending on operating system.
So to make sure that we have dynamic path to the file, we are going to modify this one a little bit
using the journey.
So what we are going to do is that we are going to make the location of the file more dynamic, irrespective
of the operating system.
A user might be using to access our application and and the path we talk about join and the base name
and the name and remember you talk about path module.
So let's see how we are going to do this once.
So I'm going to use it inside the about page.
When we finish, we can also modify this code and use it as well.
So what I going to do is that we are going to work on the location of this file.
All right.
So here these are going to be.
So the first step is let's require the path module.
So const path is equal to require the path module.
So down here and I about page here or route, let's get the location of the file.
So here is going to be get comments here.
Get the file location.
Location.
All right.
So going to use const, then the file path is equal to path dot joint.
So what does this mean?
It means that we want to get the actual path because one, you want to know the name, that's the location
or the current working directly of this particular file and then the folder and inside that you want
the actual file.
So for the meantime, before we finish up this one, let's try to console.log the name as we did before.
And the path module, it's going to be underscore underscore it.
So let's try to run the server and see what the name represents.
So again, and let's go to about let's refresh it and now check it out.
You could see that this is my journey for me.
My name is uses the name of my operating system, desktop and then web server folder.
So now we know that we can get the name as this and going to be dynamic irrespective of your operating
system.
So now we know what the name represents.
So next is you pass in the name as that.
The next is the folder where the files are located.
It's inside the public folder and then comma and the file that we want, which is about dot HTML.
So this line of course simply means that you want a file inside the public folder.
So if you try to console.log the file path.
Firepower.
Let's see what the firepower represents.
As that.
And let's get back to Node started.
And now you can see that now we have the path to the file that is about HTML.
But there is something wrong here.
This about the HTML is not directly inside the public folder, but instead it is inside pages folder.
So what we need to do is to make sure that we add forward slash and pages, which goes like this one.
We want the de name which represents the current folder and then going into the public and pages and
take about the HTML.
So here, if we if we save it and then restart the server and then we go to about refresh it and none
we see that now we have the path which is this public and then pages.
So now instead of the hardcoded path here, we can use this dynamic path.
Now let's restart the server, play the console.
And have a look.
Now, let's refresh it.
And you can see that it's still the same and this is the ideal way to go.
So you can modify the home route or you are allowed to use this format.
All right.
Thanks for watching.