Express Yourself with HTML: Using HTML views with Express.js

Express.js is a popular, easy to use framework used for FAST (and I do mean FAST) web application set up; Express will have your app layout up and running in about 2 commands. Express is made of three major components: the HTTP server, the Middleware and the Routers. I do not want to go too much into detail with this (because that was not the purpose of this blog post) but if you would like to know more here is a cool blog post that really explains the components in depth or check out the book, Express.js in Action .

If you are familiar with Express.js(this blog post if for you!), then you know that its views are written using jade. I am not too familiar with jade and I don’t know many people who are either, so I took it upon self to learn how to use HTML views. (I did do some research on Jade though, its pretty cool. blog post coming soon). If you prefer to use HTML for your views, you have two options:

  1. Just use HTML in the jade file. Its fairly simple. Looking at a jade file: Screen Shot 2016-04-04 at 2.30.51 PMyou can see that it has similar syntax to html. To use HTML in jade just do one thing, add a ‘.’ right next to where it says html. Kind of like this: Screen Shot 2016-04-04 at 2.35.15 PM.png
  2. Or the other method, is just change the way the app as a whole finds its views!

If you use the express generator today (following the examples for express.js site) to create your web app, you should have directory as such:

Screen Shot 2016-04-04 at 2.37.13 PM.png

In the views folder you may now delete the jade files and create some HTML pages. In this example we will be using filename index.html. The routes call the views, so that is where the changes will take place! If you go to routes => index.js you should see code similar to this:

Screen Shot 2016-04-04 at 2.47.18 PM.png

What you first need to do is add a variable path, that is equal to require(‘path). Next change the line inside the router.get function from res.send(‘….’) to res.sendFile(‘path.join(‘<insert path to index.html or other file here’)).

So now you should have something like this:

Screen Shot 2016-04-04 at 2.50.56 PM.png

** I used __dirname as a shortcut but you can just put the full path to the file instead

Feel free to create several routes that will access many different views using the code provided.

Short, sweet and to the point! Hope this helped you transition to HTML in the Express.js framework. If you need more information on Express and how it works, please check out the links provided above or shoot me a message 🙂

Advertisements
Standard

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s