Setup a Web Server (NodeJS) to serve Simple HTML pages


what’s up y’all this is Hussein Nasser
from I geometry and today we’ll learn how to install a web server to serve
your HTTP static pages so I picked up nodejs as a web server because it’s it’s
it’s the simplest to install really and it has a lot of other functionality but
we’re gonna use it today just to serve HTML pages alright so you can use it
obviously to do much much more more work but today we’re gonna learn how to sit
up no js’ in your Mac or Windows I’m using Mac today but it’s the same exact
hopefully just there is a look small differences but shouldn’t be that much
of a difference so so after after this app after this video you’ll learn how to
basically set up a web server so you can put your HTML pages JavaScript code into
this web server and access this web server from multiple devices like your
mobile phone so you you’re essentially you making your laptop PC or or Mac and
to a web server so what will happen here is you will get an address HTTP slash
slash computer name then port and then slash and X dot HTML or IG that file dot
HTML you whatever you want there right and then you will if your link to the
Wi-Fi you can just use your mobile phone visit the same exact page and then you
consume that this is really cool if you’re like doing something internally
right I built there like a Raspberry Pi webserver and I had like node.js running
on the PI and that nodejs was controlling that that PI to actually
control a motor which then I turned into a effectively a robot so from my mobile
phone from my phone I used this I connected to the PI which is effectively
a web server was literally literally Raspberry Pi HTTP raspberry pi that
there was that was the name of the PI itself and then slash I don’t remember
it’s just like robot dot HTML I think and then a page popped up on my phone
because I’m connected to the PI which is a web server but I was able to just I
had a but three buttons and if I click a button turn right the robot will the PI
will actually rotate into the right and if I click another button or is it so it
was like a cool control over Wi-Fi but it’s I think a factor to be a web server
lots of talk I’m sorry I just babble all up but that’s the one of the benefits of
the web server and we’re gonna use this video for as a reference for a lot of a
lot a lot of other stuff all right let’s get started ok so to install nodejs as a
web server just installed on your machine you’ll obviously need a computer
and whatever you’re gonna install this will become your web server all right so
head to node.js org and then you’ll be prompted with two options the long-term
support or the current if you’re feeling risky right this is like the current
development development and the current daily or that currently developed that
nodejs that the developer is maintaining but is like the most suitable one right
this has most features but we really we’re good with this this is more than
enough all right so let’s go ahead and download
that you’re gonna get a prompt nothing fancy here all right so we just
downloaded no gas let’s go ahead and just install it nothing fancy here just
go ahead and accept agree yes go ahead and format my machine all right yep
share all my personal information with this yeah why not
yep move to trash just this is then an actual installation so you can keep it
for all right and installed the moment you do this all right now the command
line stuff has been installed so next step is to either I think if I do ctrl T
nope nope ctrl T you find the or command your terminal find your terminal either
go to lunch pad or just type terminal I have it as a shortcut and the next thing
we want to do is if i remember that correctly is to install the actual
remember with node we get something called the node package manager and this
is a very useful tool all right and it’s like it’s the center to install
other platforms and packages and one of the packages that we want install on top
of node is something called HTTP server which is the web server right as the as
this names indicates all right so let’s go ahead and do sudo npm install quite
remember that i think that’s the one all right just like that we have an
installed HTTP server alright now that we
installed the HTTP server module all we have to do is actually we’ll go to this
we have installed in this directory so before your installers TV server make
sure you’re in a directory that you’re comfortable with right so once you
install that and no one door modules will be created for you so let’s go
ahead and go there and then we’ll go a little deeper HTTP server and we’ll go
all deeper into pin and we’re gonna find a file here called HTTP – Sarah where
and what are we gonna do is literally say no space HTTP that server and then
run and just like that we have a web server running but let’s cancel here and
the reason here is like I cancelled I want to actually serve something so it
actually makes sense right so it clearly says hey I am running on this I am
running on this portal so if you have the IP address also you can use the
cname and that will work too so use that IP and you literally navigate from your
phone and you you’ll be able to serve that content so let’s go ahead and just
create some sample page here let’s go to that page called og – the HTML and then
I know since I used VI so bear with me hello world just a little quick HTML
page here alright let’s just make this bigger that’s right and just like that
we have a HTML page so what we’re gonna do here is node HTTP that server and
then there is a dot which means run that server in this current directory right
that’s very important because I want this directory to be the root of my
server right let’s go ahead and do that and then now if I
literally go to a new page and I say HTTP there’s a local host and they say
8080 all right you can see all that previous
stuff that I did and he said HTML another thing you can do is 127.0.0.1
that’s another way of doing things another thing is not sure how that will
work or not but we can try you can use the oh I cancel that all right sorry how
do you copy man you copy cuz I can’t remember that I pay address that did not
seem to work that yeah that works too whatever works so 192 168 254 the ten is
my IP address in this case go ahead and hack me all right and yeah look at that
you can also use the Machine name that’s another way not hundred percent sure but
let’s give it a shot oh did that work don’t work a work man
look at that frontier you can you can all tell that I have one here I have no
idea why keep adding this domain right can I just do a Hossein Mac that’s my
Mac right oh that works too that’s sweet I was saying Mac so we found like
multiple ways of doing that so if you want to visit this page from your mobile
maybe I’ll show it I don’t know if you want to there’s a desk page from your
mobile phone make sure you’re connected to the same Wi-Fi obviously and then
once you do that you have to use either this or the IP address I think I wrote
this don’t use one 227 because it won’t work 127 or local is is actually
connected to the same server alright alright guys
I hope you enjoyed this episode and I’m gonna see you in the next one this will
be a reference for a lot of other videos that I’m planning to make and it’s it’s
very important to set up a web server because we’re gonna use that in building
our next episode it’s a secret alright alright guys so
this is a test of what we just built you can see the screen so we’ll try to
connect to the web server that we just built and from the mobile phone right so
if we remember I can give this right right if we remember my server was
Hussein Mac and then colon 8080 and that will do a slash and then I G dot HTML
and just like that we have to sit there you go so that’s that’s exactly how you
basically consume the static web pages from a web server and that’s musashi my
robot that I just I told you about so that’s actually a Raspberry Pi and
it’s connected to so modern it is it’s fully functional but I will show you
anything now I just need two batteries all right guys I’m gonna see you in the
next one goodbye

Leave a Reply

Your email address will not be published. Required fields are marked *