ExpressJS Series: What I need to know about serving a response?

In the previous post, we set up the basic secure for our ExpressJS Server. Before we start delving into details of an application development, we will also understand how to serve responses/files from our server.

There are three different types of application responses that serve some content:

1. Static Application (serving static assets like HTML, CSS, etc)
2. Template based application (dynamic pages processed and responses served as pages by the application)
3. REST / SOAP based Server application responses with a client either HTML or an Single Page Application

All the three are used today in the market extensively, depending on project needs. The way to serve responses from an ExpressJS application is also the same. This is apart from the fact that project structure, application architecture, coding patterns, testing and its ways, and deployment “may” differ for all the three ways of serving a response from the server.

Let us take the first, Static responses. These are response where where static files like HTML, CSS, Images, fonts, etc are served. One of the job’s of the server is that it serves static content. Now, this may be an entire site or just some assets of your application or site.

NodeJS and the ExpressJS framework by default does not expose any folder publicly. You have to do it explicitly. Let us do it.

ExpressJS provides a method called as .static that allows you to expose a static folder publicly. You can apply this as an middleware later.

Usage:

express.static(root, [options])

Let us create a folder called as public and put any file called styles.css in it. Second, let us create a folder client and then assets within it. Finally, let us add the middleware that servers the static folder. Take a look at the code snippet below:

We see that there are three ways of serving :

1. Same name exposed: The public folder inside our project folder basicsrv is served with the same name publicly.
2. Different name exposed with relative path: The ‘client/assets’ folder in line 12 is exposed as /assets publicly. This allows us to keep the system path names hidden (if not all secure).
3. Different name exposed with complete path: The ‘client/assets’ folder in line 20 is exposed as /assets publicly. But this time it uses the complete path of the OS rather than a relative path.

A point to note is that response object res in the route handler also provides us an option to send files. You can use the method .sendFile in the res object after the .status method like below:

That is all to serving static files and responses from the application.

There are two other ways of sending a response to the client.

1. We have looked at one way before by means of sending a JSON file using the .send method. The .send method applies for not just sending response as JSON but also for XML.
2. But, for a template engine based response you have to use the .render method. This has to be in the route handler after we set the view folder and templating engine details using the .set method of express app.

Before setting the template engine to our app, let us have a look at the code below for sending json/xml type responses:

Dont forget to install xml2js to send xml as a response.

npm install -S xml2js

To send a dynamic template engine based response, we will have to add a middleware informing our ExpressJS Application that we are going to use a specific templating engine. Commonly used templating engines are Jade (now pug), Pug, ejs, Mustache, etc.

ExpressJS uses Pug/Jade as the default. If you are coming from other backend programming languages then you might like ejs since it used variable binding based templates. However, if you like HAML, then Pug/Jade is for you.

Lets install pug.

npm install pug -S

Now, lets create a view folder in the basicsrv folder and inform express about what templating engine we are going to use:

Lets create the template file called as views/index.pug as below:

Add this code in your file, and run the file. The try accessing the path http://127.0.0.1:9001/template . You will see the template rendered. If you wish to change the templating engine to something else then you will have to set your new templating engine in the ExpressJS application.

Thats it. We covered the bare bone basics of ExpressJS.

To summarize, along the post we touched:

• Rendering files from a static pulic folder in three different ways.
• Sending JSON, and XML response.
• Sending a server processed html page processed from a pug template

ExpressJS Series All Blogs: https://medium.com/@ganeshsurfs/expressjs-series-links-9e038be8d78b

Let me know how I did, and if you learnt something new. Do leave your comments, and dont forget to like the article.