Node JS

Using PUG (JADE) create wizard for your apps – Node JS & Express

This blog post is to show the steps for creating a wizard using PUG. If you are new to PUG read the API docs. It’s always a best practice to keep the code clean. Having said that, it’s a bit complex to manage if we haven’t followed naming conventions. PUG supports includes¬†which helps us to keep the JavaScripts and Style (CSS) as a separate files!

Gist Code Files are here. Copy all files at one go!

For a demo let me create my project root folder named Wizard which is structured as shown below. Look at the views folder in which we created JS and STYLE folders which holds javascript and css respectively. Index and UserInformation.pug file will be added later!

Install Express, pug and body-parser packages which are available in npm.

Source JSON

We are set partially! Let’s begin to play with PUG! If you are good at HTML and CSS it’s easy to build pages easily and if not refer W3Schools to pick logic! HTML source from the same site.

STYLE SHEET

JAVASCRIPT

The functionality is very straight forward – Go forward and backward! In our index.pug file we simple call style:include and script:include

So our index code looks like below!

INDEX

For our demo we need to collect user information and show as text in another page for which we created a POST route named userinformation.pug

USERINFORMATION

We have created two routes with GET and POST which renders index and userinformation files respectively. Look at the server.js code – For a demo I haven’t created separate route folder!

SERVER JS

Enjoy PUG!

 

Leave a Reply

Your email address will not be published. Required fields are marked *