DEV Community: Nathan Kratzmeyer

More Fun With VueJS

Nathan Kratzmeyer — Wed, 25 Mar 2020 19:41:32 +0000

Welcome to to the second part of my Vue Basics tutorial. In the first part, we covered how to set up a simple project, display data, use custom methods, and do simple databinding. The code from the last part is located here in the Part1 branch. In this part, we'll cover using events, conditional rendering, and looping in our view.

Handling Events

The first way we can handle events is inline in the view. To demonstrate this, let's add some more properties to our data object that we can play with. Continuing from previous code, it looks like this:

// app.js
// Data properties that we can display and bind to
data: {
    title: 'Welcome to Vue!',
    name: 'Big Boss',
    my_cool_class: 'cool',
    strength: 1,
    dexterity: 2,
    XP : 1
}

We've added strength and dexterity properties that we'll display and manipulate. In index.html, let's first set those up to be displayed as we did before. We'll also set up some buttons to manipulate them. Below our existing code, add the following.

<!-- index.html -->
<label>Strength: {{strength}}</label>
<!-- Handle events inline javascript -->
<button v-on:click="strength++">+</button>
<button v-on:click="strength--">-</button>
<br />
<label>Dexterity: {{dexterity}}</label>
<!-- Handle events inline javascript - shorthand -->
<button @click="dexterity++">+</button>
<button @click="dexterity--">-</button>

On the labels, we are just rendering the data in our model as before. The interesting bits are the buttons. Using the v-on directive, we are able to handle events for the button. In this case, we're handling the click event with some simple inline javascript. Notice also that the shorthand for v-on is simply the @ symbol followed by the event that you want to handle. We can also call custom methods on our model with this same mechanism. Let's do that now. Add the following to our methods object in app.js:

// app.js
increaseXP(amount){
    this.XP += amount;
}

Now let's add the code to call this method in our view. Under our existing code, add this:

<!--  index.html -->
<label>XP: {{XP}}</label>
<!-- Handle events with custom method - Shorthand -->
<button @click="increaseXP(20)">+</button>

Now if you check out the rendered page, you should be able to click the buttons to maniplulate the data in our model.

Conditional Rendering

Now let's check out how to do conditional rendering. That is, we will render certain html elements only if some condition on our model is true. Let's add a hasShield data property to our model:

// app.js
data: {
  //... other properties
  hasShield: true;
}

Ok we now have a boolean property hasShield that we'll use as our condition. We use the v-if directive for conditional rendering as shown below:

<!-- index.html -->
<!-- this <p> element will only be rendered if hasShield is true in our model -->
<p v-if="hasShield">{{ name }} has a shield!</p>

If you view the page now, you should see the <p> tag rendered. If you change hasShield to false in the model, you'll see that the <p> tag is not rendered. Cool right? Let's expand this just a little to use the v-else directive to display something else when hasShield is false. Add another <p> tag so that we have the following:

<!-- this <p> element will only be rendered if hasShield is true in our model -->
<p v-if="hasShield">{{ name }} has a shield!</p>
<p v-else>{{ name }} does NOT have a shield!</p>

The first tag will be rendered if hasShield is true, otherwise the second will be rendered. There is also a v-else-if directive that functions exactly as you would expect.

Looping

OK let's do one more thing for this part of the tutorial. Let's demonstrate how to do simple looping with Vue. First, we'll need an array to loop over in our model. Add one to our data object like this:

// app.js
data: {
  // ... other items
  inventory: [
    "Simple Belt",
    "Simple Gloves",
    "Sword of Fire",
    "Helmet of Healing"
  ];
}

Now we have a simple array of "inventory" items that we can loop over and display in our view. We do so by using the v-for directive like so:

<!-- index.html -->
<!-- Display our inventory items using v-for -->
<h2>Inventory Items</h2>
<ul>
  <li v-for="item in inventory" v-bind:key="item">
    {{ item }}
  </li>
</ul>

In the snippet above, we are telling Vue to render a new <li> element for each item in our inventory array. Notice that "item" is the name that we are giving to each element of the array and that we use that name to refer to the element in the subsequent block of code. Our array could have just as easily been an array of objects. In this case, we would use dot notation to refer to properties on each item like so:

<!-- Pretend that our data array is an array of objects -->
<li v-for="item in inventory" v-bind:key="item.id">
  {{ item.propertyName }}
</li>

For now, ignore the v-bind:key part of this code. In advanced scenarios where you might be manipulating the array, Vue will need a unique key for each item iterated over. This is irrelevant in our simple scenario.

Conclusion

In this post I've gone over handling events, conditional rendering, and looping using VueJS. Honestly, that pretty much covers the very, very basics of using Vue. I'm very much open to requests for further explanation/examples on the topics covered in these two articles. Barring that, I'll probably jump into components and using Vue the "right way". Hope this was informative and comments/critiques/requests are always welcome!

Code for this article is here

VueJS Basics

Nathan Kratzmeyer — Sun, 15 Mar 2020 00:23:15 +0000

I have recently starting learning a bit about VueJS. I’d like to share what I’ve learned in order to help others get started with Vue as well as to solidify my own understanding. This tutorial assumes familiarity with HTML, CSS, and JavaScript. You will also need some sort of local development server such as live-server So without further ado, let’s get started.

Setting up the Project

Navigate into your chosen project directory and create 2 files, index.html and app.js, with the following content.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Import VueJS from CDN. In a production app, we wouldn't do 
    it this way. Instead, we would download the libraries locally or 
    use vue-cli -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      body {
        width: 80%;
        margin: auto;
      }
    </style>
    <title>Vue Basics</title>
  </head>

  <body>
    <!-- This will be our "root" element for Vue
    Everything that we do with Vue will be rendered inside
    this tag. 
     -->
    <div id="app">
      <!-- In app.js, we are giving the Vue engine a data object. 
      One of the properties of this object is :title. The following 
      line tells the Vue engine to output that value -->
      <h1>{{ title }}</h1>
    </div>

    <script src="app.js"></script>
  </body>
</html>

// app.js

// Here we are initializing the Vue engine, telling it where 
// we want to render, and giving it some data
new Vue({
  // the "el" property tells the Vue engine where in the DOM we 
  //want to render our content. Below, we are telling Vue to use 
  // the element with id=app
  el: "#app",
  // The "data" property is where we give the Vue engine our data. 
  // In this case, we're giving a title
  data: {
    title: "Welcome to Vue!"
  }
});

Now fire up your dev server and navigate to the proper url in your browser. Live-server should start at http://localhost:5500/. Hopefully the comments in the code are enough show you what's going on so far. In our HTML, the double brackets {{}} lets us access data in our Vue instance. Now let's do something a little more interesting.

Custom Methods

We can create custom methods for the Vue engine to use. Let's see this in action now. In app.js, let's add another data property and a method as shown below.

new Vue({
  el: "#app",
  data: {
    title: "Welcome to Vue!",
    name: "Big Boss"
  },

  methods: {
    greet() {
      return `Hello ${this.name}`;
    }
  }
});

Now let's use the method in our View like this:

<!-- For brevity I'm only showing the "root" element where Vue is 
rendering -->
<div id="app">
  <h1>{{ title }}</h1>
  <h2>{{ greet() }}</h2>
</div>

Again, we can call methods in our Vue instance inside the double brackets. In your browser, you should see "Hello Big Boss" rendered to the page. Now let's check out simple data binding.

Data binding with v-bind

With data-binding, we can bind our view elements to model properties such that when our model updates, our view is updated automatically. This is a one-way binding from model to view. We'll check out two-way binding shortly. For now, let's do a simple one-way binding to bind an element's class attribute to a model property. We do this with the v-bind directive. In app.js, update our data object as shown below.

// app.js
data: {
    title: 'Welcome to Vue!',
    name: 'Big Boss',
    my_cool_class: 'cool'
}

In index.html, below our existing code (still inside our "app" div), let's make an h1 tag and bind its class to the "my_cool_class" property.

<!-- Data-binding -->
<!-- Bind our class attribute to a model property -->
<h1 v-bind:class="my_cool_class">Hi there {{ name }}</h1>

In our inline css, add a class selector called .cool and style it however you like so that you can see the effects of what we've done. If you inspect the above h1 element in the DOM after it has been rendered, you'll see that it has a class of "cool". Side note: you can use shorthand syntax for the v-bind directive, which is just the : followed by the attribute that you want to bind to as shown below:

<!-- Data-binding (shorthand) -->
<h1 :class="my_cool_class">Hi there {{ name }}</h1>

Two-way binding

OK so that was pretty cool. We were able to bind a view attribute to a data property, but it was only one-way. Now let's do a two-way binding on our name property by using the v-model directive. In index.html, add the following to our app div.

<!-- Two-way binding with v-model -->
<input type="text" v-model:value="name" />

When you view in your browser, you should see that the input box already contains the value "Big Boss". When you change this value, you should see the values in our previous h1 tags updated as well. How cool is that?! The correct answer is VERY cool. The v-model directive tells Vue to bind to a specific property and to update that property when we change it in the view. I encourage you to experiment further with this. Maybe create another style selector in our internal css, and play around with two-way binding to my_cool_class.

Conclusion

In this post I've gone over the very basics of using VueJS. I plan to continue this series and cover at least more basic stuff like:

Handling events
Conditional rendering
Looping

and possibly more so stay tuned. Hope this was helpful and comments/critiques/requests are always welcome!

Github repo

Using Mixins with PugJS

Nathan Kratzmeyer — Sun, 01 Mar 2020 18:27:38 +0000

This post is the fifth in a short series on using the PugJS templating engine with nodejs and expressjs. In the last part, I covered using using "partials" in PugJS. In this post, I will demonstrate how to use Pug to create reusable blocks of code with mixins. Let's get started!

Starting Code

For brevity, I won't list our starting code here. To follow along, be sure your code is up to date with the last part. Final code is on GitHub here.

Adding a Mixin

Let's say you have a form element that you want to use in multiple places throughout your application. Furthermore, let's say you want to be able to style the form independently in each place. How might we do this? We could probably figure out a way to do this with conditional logic as described in part 3. However, this would probably not be the most efficient way to go about it. This is an excellent use-case for PugJS mixin functionality documented here. We're going to skip some of the basic examples and go to a slightly more advanced one, using attributes in mixins. First, let's create a partial file to declare our mixin. Under the partials folder, create a new file called mixins.pug with the following content.

mixin user-form
    form(action="/", method="post" class!=attributes.class)
        input#user-email(type="email", name="user-email")
        button(type="submit") Submit

Here we've declared our user form mixin. The interesting part is class!=attributes.class. As described in the Pug docs, mixins get an implicit 'attributes' argument which we will use to add attributes to our form. Now let's put our form to use. In main-layout.pug, at the very top above the DOCTYPE declaration, add this line:

include ../partials/mixins

This will give us access to our mixin from any file that extends main-layout. In index.pug add the mixin by adding this line to the bottom of the file (be sure to indent properly):

    +user-form

Now if you visit the home page in your browser, you should see your form at the bottom of the page. Notice that there is no class added to the form. Now let's add the form in a different spot and give it a class. In about.pug, add the following as the last line of the file.

    +user-form()(class='modal')

With this usage, we have specified that we want to apply a class of 'modal' to the form. Now if you visit the 'about' page, you should see the form with the correct class applied.

Conclusion

In this post I've gone over using mixins with PugJS. We've seen how to create reusable blocks of code to which we can apply different attributes depending on context.
Hope this was helpful and corrections/comments/critiques are welcome!

Writing A Simple WMI Scanner with Electron.js

Nathan Kratzmeyer — Sat, 21 Dec 2019 16:42:26 +0000

In this article, I'm going to do a quick walk-through of how to create a very simple WMI (Windows Management Instrumentation) scanner for Windows, using ElectronJS. The intention of this article is to show one of the types of apps that you can create with ElectronJS as well as to demonstrate the very basic architecture of such an app. A familiarity with Javascript, NodeJS, npm, HTML, and CSS would be best to get the most out of this article. I won't be going in-depth at all but will be happy to explain any of my code should questions arise. Let's get started!

To start us off, we're going to clone the ElectronJS quick start repo. Fire up a terminal, change to an appropriate directory and run the following commands:

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

Now you have a barebones ElectronJS app running! Now fire up your favorite code editor and clean up the project by removing LICENSE.md, preload.js, and README.md. Clean up index.html by removing everything from the body except the script tag for renderer.js. In main.js, remove the path import. Also, change

 preload: path.join(__dirname, 'preload.js');

nodeIntegration: true;

This will give our renderer code access to node environment. Now uncomment the line to show devtools in the main window.

mainWindow.webContents.openDevTools();

Now we are pretty much done with main.js. Everything else will be done in renderer.js.

Now let's prep our index.html file. Add the following code to the body tag

<div id="scanned">
</div>
<hr>
<input type="text" name="host" id="host-name">
<button id="scan">Scan</button>

Now we have our basic HTML structure, let's add some styling so it doesn't look terrible. Create a main.css file and reference it inside index.html. In main.css, add the following:

body{
    font-family: Arial, Helvetica, sans-serif;
    background: #eee;
}

#scanned{
    background: white;
    padding: 10px;
    border: 1px solid gray;
    height: 400px;
}

input{
    font-size: 20px;
    border : 1px solid lightgrey;
}

button {
    font-size: 20px;
    border : 1px solid lightgrey;
    background: dodgerblue;
    color: white;
}

Our next step is to install the module that will help us do our WMI queries. Do this by running

npm install node-wmi

in your project directory. Now let's require that module in renderer.js and write code for our scan. Do so with the following code.

//renderer.js

const wmi = require("node-wmi");

//Dom elements
const scannedList = document.getElementById('scanned');
const btnScan = document.getElementById("scan");
const inputHost = document.getElementById("host-name");

//Handle clicking the scan button
btnScan.addEventListener("click", e => {
    //Grab the hostname from input
  const hostName = inputHost.value;

  //Create an options object to be passed to wmi.Query
  const queryOptions = {
    class: "Win32_BIOS",
    host: hostName
  };

  //Execute the query and use a callback to get results
  wmi.Query( queryOptions , (err, data) => {
    if (err) {
      return console.log(err);
    }
    console.log(data);
  });
});

If everything is correct, you should be able to run the app with npm start, enter "localhost" as the host name, click Scan and see a BIOS object output in the console. You will need admin rights on your machine for this to work properly. If you are on a LAN and have admin rights to other machines, you can enter their host names to see results from remote Windows PCs.
Notice that the BIOS object we got back has a lot of properties that we don't care about. Also notice that we are getting back an array. Let's only ask for the properties we want and only use the first item of the array. Also, we'll output our data to the app instead of the console. Modify the click event listener as shown below.

  //Grab the hostname from input
  const hostName = inputHost.value;

  //Create an options object to be passed to wmi.Query
  const queryOptions = {
    class: "Win32_BIOS",
    host: hostName,
    //Only get these properties
    properties: ["Manufacturer", "SerialNumber"]
  };

  //Execute the query and use a callback to get results
  wmi.Query(queryOptions, (err, data) => {
    if (err) {
      return console.log(err);
    }
    console.log(data);

    //Get only the first item in the array
    const biosItem = data[0];

    //Create a <div> to put our data in
    const newDomElement = document.createElement("div");

    //Add a class so we can style the div
    newDomElement.classList.add("scanned-pc");

    //Put in our data
    newDomElement.innerHTML = `<p>${hostName} -- ${biosItem.SerialNumber}</p>
                               <p>Manufacturer -- ${biosItem.Manufacturer}</p>`;

    //Add our div to the DOM
    scannedList.appendChild(newDomElement);
  });

Awesome! Now we have our info showing in the app instead of the console. The last thing we will do is to style our div item so it looks a little better. In main.css, add this:

.scanned-pc{
    box-shadow: 2px 2px 2px rgba(1, 1, 1, .75);
    background: lightgray;
    padding: 2px 5px;
    margin-bottom: 4px;
}

Now you can view our app in all of its grayscale glory. To augment the app, try using a different WMI class such as Win32_ComputerSystem or even doing multiple queries with different classes to get lots of info about a PC. And obviously the app could use some help in the style department. 😊 You can also deploy the app with help of electron-builder or a similar packaging system. See the docs for more info.
As you can see, Electron is a pretty cool technology which gives you the power of NodeJS, HTML, and CSS to create desktop apps. I hope this post was informative and at least got you excited to play around with ElectronJS for your next desktop app.

Github repo for this article is here

PATCH Case Sensitivity

Nathan Kratzmeyer — Tue, 22 Oct 2019 18:45:44 +0000

For Future Reference

I had the following code in my front-end app:

  const result = await fetch(url, {
    method: 'patch',
    headers: {
      'Content-Type': 'application/json'
    },
    body: json,
    mode: 'cors'
  });

I was getting CORS errors but I could see that the OPTIONS request was sending back PATCH as an allowed method. After banging my head against a wall for at least 2 hours, I finally stumbled on this StackOverflow post. BOOM! Problem solved! "patch" needed to be "PATCH".

Hope this helps someone!

Using Includes/Partials In PugJS

Nathan Kratzmeyer — Wed, 11 Sep 2019 12:39:58 +0000

This post is the fourth in a short series on using the PugJS view engine with NodeJS and ExpressJS. In the last part, we covered using PugJS to display dynamic data. In this post, we'll cover the concept of using includes (as named in the PugJS documentation). I prefer to call them "partials" and will do so in this article. Let's get started!

Starting Code

Below is our starting code (slightly modified since the last post).

//index.js
const express = require('express');

const userNames = ['Sean', 'George', 'Roger', 'Timothy', 'Pierce', 'Daniel']
const bestMovie = 'Casino Royale';
const licensedToKill = true;

const app = express();

app.set('view engine', 'pug');

app.get('/', (req, res) => {
    res.render('index', {
        userNames,
        bestMovie,
        licensedToKill,
        title : "Home Page"
    });
});

app.get('/about', (req, res) => {
    res.render('about', {
        userNames,
        title : 'About'
    });
});

app.listen(3000, () => {
    console.log('Server listening on 3000');
});

//- main-layout.pug
<!DOCTYPE html>
html(lang="en")
    head
        title #{ title }
    body
        header
            nav
                ul
                    li 
                        a(href="/") Home
                    li
                        a(href="/about") About
        h1 This h1 is from the layout.
        hr
        block content
        section
            h2 This h2 is also from the layout
            for user in userNames
                li= user
        block more_content

//- Index.pug
extends layouts/main-layout.pug
block content
    if licensedToKill
        p Bond is licensed to kill!
    else
        p Bond is NOT licensed to kill!
block more_content
    p The best movie is #{ bestMovie }
    p= bestMovie

//- about.pug
extends layouts/main-layout.pug
block content
    p This content is from about.pug!
    p About my cool site!

And here is our folder layout

project_folder
├── index.js
├── node_modules
├── package.json
├── package-lock.json
└── views
    ├── about.pug
    ├── index.pug
    ├── layouts
    │   └── main-layout.pug

About Partials (Includes)

The concept behind includes is very simple. It gives us a mechanism to pull in the contents of one file into another. To do this, we use the include keyword followed by the path to a partial file. It is somewhat similar to the the "layout" concept discussed in the previous posts in this series. I like to think of the template system as a good way to create a general layout for your site whereas partials provide a good way to create modular components that can be reused. Let's see how we can integrate partials into our existing code.

Using a Partial For the Header

The header element in our main-layout file seems like a good candidate for a partial. In a real website, the header and nav elements could get a little complex and it would be nice to separate the header into a different file for easier readability and maintenance. To start, create a new folder under views called partials. Then create a new file in the partials folder called header.pug. Now cut the header element from main-layout and paste into header.pug. We'll also add an h1 with some text. It should look like this:

//- header.pug
header
    nav
        ul
            li 
                a(href="/") Home
            li
                a(href="/about") About
    h1 This page title is coming from header.pug -- #{ title }

In main-layout.pug include the header by adding this line where the header previously was. Be sure to indent properly. It should be indented one tab further than our body element:

    include ../partials/header

Now if you view your page, you should see that we have the same end result. If you view the page source in the browser, you should see that we have well-formed HTML. If you don't have well formed html, there is an error in your pug syntax.
In our contrived example, there's not a lot of advantage to doing it this way. However, as previously noted, this could be pretty helpful in a more complex website. Let's do something slightly more useful.

Create a User Card

Now we'll create a reusable component for displaying a user. Create a new file in partials called user.pug with this content:

div.card
    p= user

When this is translated into html, we will get a div with a class of card. In main-layout.pug, modify the users list to:

for user in userNames
    include ../partials/user.pug

Now if we wanted to display a user anywhere in our site, we can just include our user.pug being sure that it has access to a user object.
As further practice, you could create a partial for a footer or another nav element. IMPORTANT NOTE: In these examples, I've only used partials in the main-layout file. However, this is not a requirement. We can use the include keyword in any pug file.

Avoid This!

You might think that we could change the first line of our index.pug to this:

include partials/main-layout.pug

However, this won't work! The html and body tags will be closed off too early and our html will be all jacked up!

Conclusion

In this post I've gone over using includes/partials in PugJS. We've seen how to split pieces of our views into separate files to aid reuse and readability. Hopefully this post was informative and, as always, corrections/comments/critiques are welcome!

Displaying Dynamic Data with PugJS

Nathan Kratzmeyer — Sat, 24 Aug 2019 13:42:13 +0000

This post is the third in a short series on using the PugJS view engine with NodeJS and ExpressJS. In the last part, we covered using PugJS to create shared HTML layouts. In this post, we'll cover passing data from the express server into a Pug page. Let's get started!

Starting Code

Below is the code as it was at the end of the last post.

//   index.js
const express = require("express");

const app = express();

app.set("view engine", "pug");

app.get("/", (req, res) => {
  res.render("index");
});

app.get("/about", (req, res) => {
  res.render("about");
});

app.listen(3000, () => {
  console.log("Server listening on 3000");
});

//- main-layout.pug
<!DOCTYPE html>
html(lang="en")
    head
        title Home Page
    body
        header
            nav
                ul
                    li
                        a(href="/") Home
                    li
                        a(href="/about") About
        h1 This h1 is from the layout.
        hr
        block content
        section
            h2 This h2 is also from the layout
        block more_content

//- Index.pug
extends layouts/main-layout.pug
block content
    p This content is from index.pug!
block more_content
    p More content from index.pug!!

//- about.pug
extends layouts/main-layout.pug
block content
    p This content is from about.pug!
    p About my cool site!

And here is our folder layout

project_folder
>node_modules
--Lots of stuff
>views
>>layouts
---main-layout.pug
--about.pug
--index.pug
-index.js
-package-lock.json
-package.json

Adding Some Data

Let's put some dummy data into our server so that we have something to pass into our Pug pages. Open index.js and insert the following just before our app declaration.

const userNames = ["Sean", "George", "Roger", "Timothy", "Pierce", "Daniel"];
const bestMovie = "Casino Royale";
const licensedToKill = true;

Now let's pass this data into our rendered pages. On the home route handler, modify the res.render code to the following.

res.render("index", {
  userNames,
  bestMovie,
  licensedToKill
});

Here we are passing an object to the view engine. This method of passing data to the engine seems to be standard across the major view engines. The passed object's properties will be available inside the Pug template as we'll see next.

Displaying Data

Let's start by just displaying bestMovie on the home page. Open index.pug and modify the more_content block to match the below code:

block more_content
    p The best movie is #{ bestMovie }
    p= bestMovie

Now check out the home route to see the results. The first paragraph element shows how we can perform interpolation in our content. The second paragraph demonstrates how we can set the text content of an element without interpolation.

Conditional Logic

Now let's look at integrating a little conditional logic in our Pug page. In index.pug, modify the content block to match the following:

block content
    if licensedToKill
        p Bond is licensed to kill!
    else
        p Bond is NOT licensed to kill!

Try switching the value of licensedToKill in index.js and see how it changes the page rendering. Pug gives us a nice clean way to perform conditional rendering based on passed in data.

Looping

Now let's check out how we can iterate over our array of user names. This time let's work in main-layout.pug just to show that we can use dynamic data in our layout files. Under our existing h2, add the following (the ul should be indented to the same level as the h2):

ul
    for user in userNames
        li= user

Once again, the syntax for looping over an array is very concise.
NOTE: At this point, if you go to the about page, you will receive an error on the page as we haven't passed in any data on that route, but the main-layout.pug page is looking for a userNames array. As an exercise, modify the route handler to pass in the necessary data.

Conclusion

In this post I've gone over using PugJS to render data received from the server. We've seen how to display simple data, how to use interpolation, conditional logic, and looping with PugJS. Hopefully this post and series was useful and informative to anyone looking at PugJS as a view engine. As always, corrections/comments/critiques are welcome!

Shared HTML Layouts With Pugjs

Nathan Kratzmeyer — Thu, 22 Aug 2019 11:58:24 +0000

This post is the second in a short series on using the PugJS templating engine with nodejs and expressjs. In the first part, I went over the basics of using Pugjs to render HTML pages. In this post, I will demonstrate how to use Pug to create and render shared layout templates. Let's get started!

Starting Code

Below is the code as it was at the end of the last post.

//   index.js
const express = require('express');

const app = express();

app.set('view engine', 'pug');

app.get('/', (req, res)=>{
    res.render('index');
});

app.listen(3000, ()=>{
    console.log('Server listening on 3000');
});

//- Index.pug
<!DOCTYPE html>
html(lang="en")
    head
        title Home Page
    body
        header
            h1 Hello from Pug Template!
        main
            p This is a paragraph

And here is our folder layout

project_folder
>node_modules
--Lots of stuff
>views
--index.pug
-index.js
-package-lock.json
-package.json

Adding a Layout

Under the views directory, create a new sub-directory called layouts. Under this directory, create a new file called main-layout.pug with the following content.

<!DOCTYPE html>
html(lang="en")
    head
        title Home Page
    body
        header
            nav
                ul
                    li 
                        a(href="/") Home
                    li
                        a(href="/about") About
            h1 This h1 is from the layout.
            hr
        block content

So this is just a regular pug template with the exception of the block element on the last line. This denotes a block of content that will be provided by any other Pug template that uses this layout. The word "content" next to the block identifier is just a name and can be anything. So block content just creates a named placeholder for content that will be injected by other Pug pages. Later we'll see how to create multiple such placeholder blocks. Now lets modify our index.pug file to make use of our layout. Open index.pug and change its content to:

extends layouts/main-layout.pug

block content
    p This content is from index.pug!

The first line tells the Pug engine to use the main-layout.pug file that we just created. The second line says "insert the following content into the block named content of the main-layout file before rendering it". So you should be able to start up nodemon and view the page at http://localhost:3000.

Adding the About Page

In our main-layout file, we created a link to /about but we haven't yet created this page or this route handler on our server. Let's do this now. Open index.js and add the following route handler underneath our "/" handler.

app.get('/about', (req, res)=>{
    res.render('about');
});

Under our views folder, let's create an about.pug file with the following content.

extends layouts/main-layout.pug

block content
    p This content is from about.pug!
    p About my cool site!

Now we have two pages that use the main-layout file and each page has different content. If you go back to the site, your nav links should now be working.

Multiple Named Blocks

Now let's look at how we can create multiple placeholder blocks in our layout page. Open main-layout.pug and put the enter the following code under our existing code.

section
    h2 This h2 is also from the layout
block more_content

Be sure that the section tag is indented to the same level as the block content line. Modify index.pug to make use of the new placeholder. Add the following under our existing code in index.pug.

block more_content
    p More content from index.pug!!

Now if you check out the site at the home route, you should see that different pieces of the page are provided by different files. Notice that we didn't provide anything for the more-content block in our about.pug file. If you navigate to the about page, you'll see that this is no issue.

Conclusion

In this post I've gone over using Pugjs to render shared HTML layouts. We've seen how to denote placeholder blocks in our layouts so that content can be injected from other pages that use the layout. In the next (and probably last) post of this series, I'll go over how to inject dynamic data into our Pug templates from the server.
Hope this was helpful and corrections/comments/critiques are welcome!

HTML Templating With Pugjs

Nathan Kratzmeyer — Tue, 20 Aug 2019 01:47:58 +0000

Today I learned about rendering HTML templates and layouts using Pugjs. I’d like to share what I’ve learned in order to help others get started with Pug as well as to solidify my own understanding. This tutorial assumes familiarity with Nodejs and Express. So without further ado, let’s get started.

Setting up the Project

Navigate into your chosen project directory and run the following to initialize npm with all defaults:
npm init -y

Next run the following command to install Express and Pug:
npm i express pug

Also install nodemon as a dev dependency with the following command:
npm i nodemon --save-dev

Now open your favorite code editor in that directory and add the following to the scripts section of your package.json file.
"dev" : "nodemon index.js"

Now create an index.js file with the following code.

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

app.get('/', (req, res)=>{ 
    res.send('Testing 123');
});

app.listen(3000, ()=>{
    console.log('Server listening on 3000');
});

Now fire up the app from the terminal with the following command:
npm run dev

Now you should be able to hit http://localhost:3000 in your browser and see the test page.

Adding Pugjs Pages

In your project folder, add a new subfolder called views. By convention, Pug will look here when you request a view to be rendered. You may call the folder something else, but you have to tell Pug where to look. Consult the Pug documentation for this.
In the views folder, create a new file called index.pug with the following content.

<!DOCTYPE html>
html(lang="en")
    head
        title Home Page
    body
        header
            h1 Hello from Pug Template!
        main
            p This is a paragraph

The code above demonstrates the basic syntax of a Pug template. Notice that it is basically HTML stripped of the tag markers <>. Each child element is indented 1 tab further than its parent. Also note that there are no closing tags.
Now let's tell Express to use Pug as its view engine. We can do this by inserting the following code into our index.js file immediately after our app declaration.

const app = express();

// New code
app.set('view engine', 'pug');

The app.set(.. statement above sets Pugjs as the view engine for Express. Notice that we do NOT have to import pugjs before this. Now we can render the index.pug page when the browser requests the home route. In index.js, replace this line:

res.send('Testing 123');

with this:

res.render('index');

Notice that we didn't have to specify 'index.pug' in our render statement. Now head over to hit http://localhost:3000 in your browser and see our beautiful page.

Conclusion

In this post I've gone over the very basics of using Pugjs to render HTML Pages. This isn't particularly impressive in itself, but stay tuned! In my next post, I'll go over using Pugjs layouts so that we can modularize (pretty sure that's a word) sections of HTML to avoid repeating code. Hope this was helpful and comments/critiques are welcome!