 Hi everybody and welcome to my channel my name is Wadi and you're watching my channel Wadi the Brand. In today's video we're going to have a look at how we can do a simple Node.js setup using Express. We're going to set up or CSS, JavaScript and images and on top of that we will render our pages with EJS. And before we get started don't forget to smash the like, comment below if you have any questions and subscribe to my channel. And now let's jump on the computer and get started. Hello and welcome everybody let's get started by building our project. The first thing that we need to do is create a folder you can create it on your desktop if you like. Give your folder a name for example my folder name is called Node.js tutorial. Inside this folder is where we'll be building our project and let's open the PowerShell or terminal if you're Mac inside this folder. So on Windows it's fairly easy we can left shift right click and open PowerShell Windows here but on Mac I believe that you're gonna have to CD to this folder so we can start working on our project. The first thing that we need to do is set up our server. To do this we need to create a package.json file in our root folder and this package.json file holds various metadata relevant to the project and it's used to give information to NPM that allows to identify the project as well as handle dependencies. So now that we are in the root folder of this project to initialize the package.json file all we have to do is NPM in it just like this. This will lead us through a couple of questions and the first thing that we need to do is give our package a name. So I'm just going to call this Node.js tutorial. I'll just call it Node.js tutorial like this and press enter. The second thing that we need to do is add version but if you press enter this will just use the default version which is 1.0.0 then we can add a description so Node.js tutorial then we can add an entry point let's press enter for now test command let's press enter for now git repository and we can just skip the rest of the stuff. Once we are done this will say is this okay let's type yes to agree and we should be good to go. As you can see inside of folder we now have package.json file and let's open that with a code editor and for me I'm just going to open this with Visual Studio Code so in PowerShell I can actually just do code and then dots and that should open the project for me just like this but if you're on Mac you can simply go to file open folder and just navigate to the folder so let's open package.json and have a look at what's going on so as you can see this has generated a few things for us and as we are building the project and adding dependencies the metadata for the dependencies will automatically be added to this package.json which I will show you in a second. The next thing that I want to do is install Express and EJS. Express is a web application framework for Node.js that is designed for building web applications and APIs and EJS is a simple template in language that lets you generate HTML markup with plain JavaScript and alternative to EJS is PUC which you can have a look at it's spelled P U G and to install both of them we can actually use the terminal inside Visual Studio Code just because it's easier so let's go to terminal and start a new terminal which will open here at the bottom but of course you can use PowerShell or the terminal on Mac so let's start by installing Express and EJS and let's have a look at what happens to package.json file. To install Express and EJS we can actually do this on one line so we can do npm install and we can install Express together with EJS so let's press enter and as you can see this has added two dependencies EJS and Express. The next thing that we need to do is install Node1. Node1 is basically a tool that helps develop NodeJS based application by automatically restarting the Node application when the file changes in the directory are detected. To install Node1 we can simply do npm install Node1 and then dash dash save there. Let's install Node1 as well. As you can see Node1 was added here as their dependencies and now let's have a look how we can organize our project and create some of the files and folders. So let's drag this down because we won't need so much of it and let me zoom in a little bit so you can see a little bit better just like this. As you can see the NodeJS modules were added automatically and there is a lot of modules that you can use but I won't go through this right now. Let's start by creating our first folder and this folder will be called public and basically this folder will hold all CSS JavaScript and images. So let's do three more folders inside here. So let's do CSS let's do JS let's add another one for images. IMG for images. For now let's create an empty CSS file so let's do main.css. Let's add an image in here so I'm gonna go to the folder go to public images and I'm just going to paste an image from unsplash.com. Let's go back minimize this minimize the CSS and for JS I'm just going to leave this empty and for the JavaScript I'm just going to leave this empty. Let's close the public folder and create another folder and the other folder will be called views and this is where all pages will be stored. So let's create two example pages and we can create index.html page and we can create about .html page as well and later on I will convert those two pages to .ejs so I can show you how to do both. Now let's minimize this and the last document that we need to create is our app document. So let's create a new file in here and just call it app.js. Now before we able to run our project with Nodemon which will refresh the project on any changes we need to go back to the package.json and inside here inside script we have to add comma and we have to add start and then we have to point to a file app.js but before this we need to add the Nodemon just like this and app.js. Okay before we run our application let's go back to app.js and import express which we installed earlier and also let's set a port for application. To do this let's comment in here let's add import and to import express we can simply do const express equals require and then we need to require express just like this. The next thing that we need to do is set a variable name app to be equals express just like this and now we should be able to use express and set all listening port. Let's create another variable so we can do port and the port will be equals 3000 or you can have 5000 and now we need to tell Node to listen on that port. Let's add another comment in here listen on port 3000 then to do this we can do app.listen and then we can just simply add the variable name here port and this should now work but to make it look a little bit nicer let's display a message in the console here console info the console info will be something like listening on port and then we can add the variable. Technically speaking if we save this now and run npm start this should start the project for us and as you can see Nodemon started the app.js and we are listening on port 3000 so to open our project we need to go back to we need to go in the browser we need to do localhost 3000 if you get this message you cannot get slash that means that everything is working correctly so let's go back to a project and set a few more things up so first of all let's make some space I want to add a few static files and this will be or CSS JavaScript and images so this will allow us to easily access this public folder then the CSS images and JS which I will show you in a second so let's do that first of all and for the static files we can do app.use and then we can use express.static and then we need to pass the name of the folder which in this case is public once we are done here we can do app.use and then we can specify the CSS folder which is slash CSS so public then slash CSS then we can do express.static and we need to do underscore underscore their name plus public slash CSS I will show you how this works in a second and as you saw when I saved the Nodemon restarted the application for us which is great and then let's duplicate that two more times and the second one will be for or JS JavaScript and of course we need to change the name here and the third one will be for or images and then we can change the folder in here as well let's leave this for now and let's now concentrate on the views so first of all let's have a look at how we can display the index.html and the about.html and then I actually want to convert them to EJS and I will show you how to do that as well and display the JS files so first of all to display the index.html we can simply do app.get we can leave this as empty then we need to do request and then response inside here we need to do get the response and send file underscore underscore their name plus and now we need to navigate to views and then index.html so let's do slash views slash index.html save this and refresh you'll see that we're not getting anything so far and this is because or HTML page is empty so let's go back to or index.html and put some of the information so I'm gonna create a very simple HTML and inside here I will put hello well just like this save this page go back to localhost 3000 refresh and as you can see we're getting hello world the other thing that we can do we can go back and instead of send file we can do send and we can send some sort of a string here so let's say hello world again and send this to the page if we save this you will see that we are getting the hello world and of course let's change it to hello world 123 just so you can see the difference so we get in hello world 123 now let's have a look at how we can convert those two pages to EJS and display them first of all let's rename the index.html to index.ejs and we can do the same for the HTML here with about so EJS like this and now let's go back to application and set the views for EJS so we can do set views and inside here we can do app.set views which is the folder here then we can do dot slash views and after this we need to set the view engine which will be app.set and the view engine will be obviously EJS in this example so let's save this now instead of send or send file let's do render and for the render now we don't have to actually write the whole file name we can actually just write index just like this save go back to or browser refresh and as you can see we're getting hello world and let me also show you how we can use EJS as a templating engine and to do this let's pass a variable in inside here let's do a text variable and we can say this is EJS or something like this save this let's go back to our index.ejs and inside here let's create H2 and for EJS we're gonna have to do this syntax here so open arrow % equals and then we usually close it with % and then close the arrow and obviously inside here as well will be passing a variable so let's just put the text just like this and save so let's go back to the browser and hopefully we should be getting this is EJS which is great let's now have a look at how we can do the about page the way I want to make the about page work is by doing slash about and as you can see currently it's not working so let's make it work we can go back to about to up JS for the about page we can do exactly the same thing as here so let's close the other pages we won't need them anymore and let's copy this paste it in here and because this is and because the index is in the root of our document we don't need to specify the exact path but for the about we need to specify it like this so I want about to be accessible by slash about and then we need to render the about EJS page and let's change the text this time to be to be something like about page and let's see how we can display this so let's open about EJS let's create an HTML5 document again inside the title we'll put about and let's give it a title of H1 and inside the H1 we're gonna open and close EJS just like this and we're gonna pass the text variable so let's save this refresh and we can see the about page and the last thing that I wanted to show you is the static files that we added earlier what we can do on the index dot HTML page so let's add a link in here instead of going to public CSS main CSS we can now do CSS slash main dot CSS to see whether this is working let's open the CSS and add a quick rule so body we can add background color and we can just put it as aqua save this go back to a project refresh and as you can see the CSS is working and this also works for the JavaScript images and so on so for example if I wanted to add an image to this page let's tidy this up a little bit and add an image source instead of the source being public then image then the image source which is cat dot jpeg now we can simply do IMG which stands for image and then cat dot jpeg give it a no tag with cat and save so let's go back to a project refresh and as you can see we're getting the picture of the cat which is awesome obviously if you want to add a link to the about page we can simply do let's first of all remove the background we can simply add a link in here so I can do a href slash about like this page save go back refresh and I think the link is down here below so let's click on the about page and as you can see we're getting the about page and we can do the same here before we finish with this I just wanted to let you know that I'm writing an article on this topic and you can simply follow this article to create your package.json file, install your dependencies, install nodemon, see the project folder, how to run your application, how to start it, how to add your static files, how to set up your views with EJS, how to write render pages and so on so basically it's all in here if you wish to follow along and copy and paste some of the commands and that's everything for this tutorial I hope you enjoyed it I hope you learned something new and I will see you next time thank you very much for watching please subscribe like and share this video