Serving files from a NodeJS server using Express.
Building a Phone Number Validator using a third party API and Nodejs -Part 2
If You haven’t read by previous blog, you can read it here.
In the previous blog, we have seen how to run a server using Nodejs and Express. In this blog, we will build our front-end files that are Html, CSS, and Javascript and we will learn how to serve those files through our server.
let’s get started by creating the folder structure and new files:
- Create an HTML file inside the Number Validator folder we had created earlier, let’s call it index.html
- Create another folder inside the root folder and name it as files then create two files inside it that are
styles.cssandindex.js
You can give names to these files at your convenience. Now the folder structure should look like below:
Next, let’s build our front-end with Html and CSS. For this, I am going to implement the below design however if you want to design it differently, then feel free to do that.
Creating the Application Content with HTML:
The pre-requisites to understand the below code are here:
HTML form, Divs, ID, and Classes.
If you have basic knowledge of HTML you can continue.
The above Html code will create a form, a heading, and a div with the help of form ,h1 and div tag.
Inside the form tag, there are two inputs and a submit button. The method attribute of the form tag specifies how the form data is sent to the URL mentioned in the action attribute, that is /. The method attribute is set to a value post . The post method is used to send the data to the server. This will help us to fetch the user data stored in db.
After the form, we created a div with id = "data" . Inside the div tag, there is a bunch of p tags, each tag has text in key-value form. However, the value for each key is — which is inside the span tag. We will later dynamically replace it with the actual data returned by the API.
Styling using CSS
Step1: Setting up the background
Background-image can be set by using the background property. The above code sets a background image to the entire body of HTML. It has a color property and all the texts are aligned to the center of the page. The height and width are set to the full viewport of the device, that is 100vh and 100vw respectively.
The display: flex; property helps to give layout to the form, It makes the items(input fields) of a flexbox(form) position one after another.
According to the above design, there is a blackish layer in the background on top of the background image. To implement that do the following:
<div id = "layer"></div>Add an empty div with an id in the HTML page just before or after the body tag. Style it with the following properties
The above code will apply a light black layer above the background image. The position is set to absolute which places it relative to the nearest ancestor which is the body in our case. The opacity property increases transparency and lets us see the content behind it.
Step2: Content Layout and positioning
To give a layout to the form as shown in the above design use the following properties:
The properties in the box class implement a border and the properties justify-centre and align-items help to place the div or form in the center, then there is a .dispaly class that has only one property that is display:none; this property basically hides the element as it is never created.
Notice that we have assigned the class display to the div with id data. We have done this because we are going to implement a UI in which either the form or the div will be visible on the screen at a time. After the user submits the form then the div will be visible with all the information and the form will disappear. Similarly, when the user clicks the return button that is inside the div, then the form will appear again and the div will disappear. We are going to achieve this using Javascript.
The rest of the design like styling the button, fonts, etc. you can do on your own. If you want the design, the same as the one shown in the demo image then you can find the entire code for that here.
Javascript & JQuery
Now, we have to detect clicks on the button to switch the form to data div and vice versa as we have discussed above. We can use event listeners to achieve that. Write the below code in the index.js file.
First, we selected the form button using Jquery syntax and then called the click method which detects clicking on any element and then calls the function given to it. Inside the callback function, we have used the addClass method which adds the assigned class to an element.
Line 2 will make the form disappear as the display class is added and then the data function is called. Inside the data function on line 13, the removeClass method is invoked for the data div which makes the div visible as the display class will be removed
The same functionality is given to the “Return” button of data dive using the code from lines 7 to 10.
At this point, we are done with the frontend so let’s head over to app.js and serve these files from our server.
Serving Files
In the previous blog, we had created a server and responded with a message on making a request on localhost, the code for that is given below:
Now, we are going to modify this code to serve our files from that server. Add below line after line 2 and before line 5 in the above code.
app.use(express.static('files'));This line will serve all the static files such as images, HTML, CSS, and Javascript present in the files directory. The use function helps to set our app with the function(middleware) at the path which is being specified, in our case, since we added the “files” folder to the root, I just specified “files”. The express.static function serves all the files present in the specified directory, which is files in our case.
Now replace line 6 with the below code:
res.sendFile(__dirname + "\\index.html");The sendFile function helps to serve a file as a response on making a request to the specified path. Then we used the __dirname , it is an environment variable that refers to the absolute path of the directory in which the current file resides, and then we added the \index.html file name to complete the path in order to serve this file. The reason I have used double \\ is to escape the meaning of the second backslash which is a path to index.html.
Done! we have created a server that serves files. Run app.js and then type localhost:80 in your browser’s search bar, and press enter, now you should see your index.html file with all the styles you applied in CSS and javascript functionalities.
The final code looks like this:
Conclusion:
In the next blog, I will teach you how to call external API from our backend and how to handle the data received from it.
My name is Alfiya Siddique, I am a 2nd-year diploma student studying Computer Science. You can follow me on Linkedin and Twitter.
Thank you for your time! Have a great day ahead.
