Part 2 of Web Application Creation Tutorial with Express.js: Using Jade and Installing AdminLTE Templates

In the first part of our web application creation tutorial with Express.js, we set up our project environment, installed necessary dependencies, and created a basic server using Express.js. In this part, we will explore using Jade for templating and installing AdminLTE templates.

Setting Up Jade Templating

To begin using Jade templating with our Express.js application, we need to install the required package by running the following command in our terminal:

npm install express-jade --save

Next, let's create a simple view file by creating a new file named index.jade under the views directory. Here is an example of a basic Jade template:

doctype html
html
  head
    title Your Express App
  body
    h1 Welcome to your Express application
    p Click <a href="/">here</a> to go home
    block scripts
      script(src="/public/js/main.js")

Notice how we use a block called "scripts" which will be replaced by the corresponding content when our application serves this view.

Now let's update our Express.js server to render this template:

const express = require('express');
const app = express();
const jade = require('jade');
const fs = require('fs');

// Set view engine to Jade
app.set('view engine', 'jade');
app.set('views', __dirname + '/views');

// Define a route for the home page
app.get('/', (req, res) => {
  const options = {}; // Options object if needed
  const fn = jade.compileFile('./views/index.jade');
  res.send(fn(options));
});

// Start our server and listen on port 3000
app.listen(3000, () => {
  console.log('Our app is running on http://localhost:3000');
});

Now when we visit the home page in our browser, it should display "Welcome to your Express application" and a link with the text "here".

Installing AdminLTE Templates

AdminLTE is a free and open-source template for rapid application development. To install it, follow these steps:

1. Go to the AdminLTE GitHub repository and download the latest release as a zip file.
2. Extract the downloaded file and place its contents into your project directory under a new folder called public/admin. Make sure this path aligns with our Jade template's "scripts" block we created earlier.
3. Now let's update our Jade template to include the AdminLTE stylesheets and scripts:

doctype html
html
  head
    title Your Express App
    link(rel='stylesheet', href='/admin/css/adminlte.min.css')
    link(rel='stylesheet', href='/admin/plugins/fontawesome-free/css/all.min.css')
  body
    include(src="/admin/includes/_header.html")
    div class="container"
      // Your content here
    include(src="/admin/includes/_footer.html")

Note how we link the AdminLTE CSS file and include the header and footer templates from the admin/includes directory.

That's it! In this part of our tutorial, we explored using Jade templating and installing the AdminLTE templates for our Express.js application. Stay tuned for more tips on creating web applications with Express.js.

Published July, 2017