How To Transfer AdminLTE To Jade Template Engine In Express.js

Converting AdminLTE theme into jade template engine is quite easy to do. Using jade template engine facilitates and accelerates us to make front end web applications based node.js. Why I chose AdminLTE ? page HTML on AdminLTE to jade template engine. Throughout this tutorial, I will only discuss tutorials how to move adminLTE layouts into jade template engine at express for beginners.

What is a Node Js ?

I have yet to discuss what is node.js on seegatesite.com blog. This is my first tutorial on Node.js. May already be familiar to you about Node.js.

Node.js is a software designed to develop WEB-based applications. Node.js is executed as an application server. This platform uses the javascript programming language and uses non-blocking I/O technique to speed up the process.

The platform built by Ryan Dahl in 2009 then this is enough to make a big change in the world of development. The concept of event-driven and non-blocking i/o makes the Node.js as a new alternative for building server-side applications. For more information please visit the node.js official site.

What is an Express Js ?

Express is one of the most popular frameworks in the node.js world. Complete documentation and it’s easy enough, it can make us develop various products such as web applications or RESTful API.

Express can also be used as the basis for building a web framework that is more complex, such as Sails.js, MEAN (MongoDB, Express.js, Angular.js, Node.js) and MERN (MongoDB, Express.js, React.js, Node.js).

Express.js created by TJ Holowaychuk and now managed by the community. For more information please read on the expressjs.com official site.

What is Jade Template Engine ?

One of the most popular template engines on NodeJS is JADE. According to https://www.npmjs.com/package/jade, the jade is a template engine that A clean and are whitespace-sensitive.

So it should be really considered writing code using jade. For the tutorial please read on http://naltatis.github.io/jade-syntax-docs/ ( absolutely complete )

Okay, the above is a little introduction about node.js, express and jade, let’s go back to the main topic. Before starting this tutorial, you should learn about jade template engine first. Why? If you immediately follow this tutorial without knowing the basic concept jade template engine , in my opinion, would be a bit of trouble (especially for beginners).

Transfer adminLTE theme to jade template engine in express JS

1. I sure you have already installed node.js and express.
2. Create new express project as expressproject

then

3. Download adminLTE theme and fontawesome. Then copy both the framework into folder expressproject/public in your project. Make sure the sequence folder as picture below

Then create a folder named layout in the folder expressproject/views. Where we will put the layout parts that will be split into several sections as shown below.

• base.jade is the main part of the layout.
• header.jade is the head of the layout in which there are codes for use stylesheets.
• navigation.jade is the layout navigation located in the header.
• sidebar.jade is the layout for the navigation menu located on the left sidebar.
• footer.jade is the footer section of the adminLTE.
• js.jade is the footer section that contains the assets of javascript and jquery

1. header.jade

Copy the following code and paste it in the file header.jade

2. navigation.jade

Copy the following code and paste it in the file navigation.jade

3. sidebar.jade

Copy the following code and paste it in the file sidebar.jade

4. footer.jade

Copy the following code and paste it in the file footer.jade

5. js.jade

Copy the following code and paste it in the file js.jade

6. base.jade

Copy the following code and paste it in the file base.jade

Base jade is the main page that will be used as a template to create a new page

If you’ve completed the above step, please try to create a new page by creating a file with the name blankpage.jade. Make sure the order of the file same with the image below

Copy the following code and paste it in the file blankpage.jade

Do not forget to add routes to access the blankpage.jade file on index.js in the folder routes

To enable expressJS so that it can run in the browser please execute the following code

1. Please go to the folder expressproject through a terminal ubuntu or command prompt windows

2. Please execute the following code

Linux

Windows

Please open your browser and run the following URL

http://localhost:3000/blankpage

If successful will be as shown below

If you are interested to get the full source code please share this article with the button below

Thus my article on How To Transfer To Jade Template Engine AdminLTE In Express.js, may be useful. If there are suggestions and questions please ask through the comment field below

The following two tabs change content below.

• Bio
• Latest Posts

Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Latest posts by Sigit Prasetya Nugroho (see all)

• Tutorial Create Todolist App With Vue Js 2 For Beginners - September 29, 2018
• Create WordPress Slider Without Javascript - August 30, 2018
• Typed.js The Javascript Library For Automatic Text Writing Effects - August 6, 2018