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

express --view=jade expressproject

then

cd myapp
npm install 

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

Adminlte And Font Awesome Folder In The Public Folder Expressjs

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.

Folder Layout In The Views Folder And Create 5 New Jade File

  • 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

title=AdminLTE
link(rel='stylesheet', href='/adminlte/bootstrap/css/bootstrap.min.css')
link(rel='stylesheet', href='/font-awesome/css/font-awesome.css')
link(rel='stylesheet', href='/adminlte/dist/css/AdminLTE.min.css')
link(rel='stylesheet', href='/adminlte/dist/css/skins/_all-skins.min.css')
link(rel='stylesheet', href='/adminlte/plugins/iCheck/square/blue.css')

2. navigation.jade

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

header.main-header
	a(href='/').logo
		span.logo-mini
			<b>A</b> LT
		span.logo-lg
			<b>Admin</b> LT
	nav(role='navigation').navbar.navbar-static-top
		a(href='#', role='button', data-toggle='offcanvas').sidebar-toggle
			span.sr-only Toggle Navigation
			span.icon-bar
			span.icon-bar
			span.icon-bar
		div.navbar-custom-menu
			ul.nav.navbar-nav
				li.dropdown.messages-menu
					a(href='#', data-toggle='dropdown').dropdown-toggle
						i.fa.fa-envelope-o
						span.label.label-success
							| 4
					ul.dropdown-menu
						li.header
							| You have 4 messages
						li
							ul.menu
								li
									a(href='#')
										.pull-left
											img(src='/adminlte/dist/img/user2-160x160.jpg',alt="User image").img-circle
										h4
											| Support Team
											small
												i.fa.fa-clock-o	5 mins
										p
											| Why not buy a new awesome theme?
						li.footer
							a(href='#')
								| See All Messages

				li.dropdown.notifications-menu
					a(href='#',data-toggle='dropdown').dropdown-toggle
						i.fa.fa-bell-o
						span.label.label-warning
							| 0
					ul.dropdown-menu
						li.header
							| You have 10 notifications
						li
							ul.menu
								li
									a(href='#')
										i.fa.fa-users.text-aqua
										| 5 new members joined today
						li.footer
							a(href='#')
								| View All

				li.dropdown.tasks-menu
					a(href='#',data-toggle='dropdown').dropdown-toggle
						i.fa.fa-flag-o
						span.label.label-danger
							|9
					ul.dropdown-menu
						li.header
							| You have 9 tasks
						li
							ul.menu
								li
									a(href='#')
										h3
											| Design some buttons
											small.pull-right
												|20%
										.progress.xs
											.progress-bar.progress-bar-aqua(style='width:20%',role='progressbar', aria-valuenow='20', aria-valuemin='0', aria-valuemax='100')
												span.sr-only
													| 20% Complete
						li.footer
							a(href='#')
								| View all tasks
				li.dropdown.user.user-menu
					a(href='#',data-toggle='dropdown').dropdown-toggle
						img(src='/adminlte/dist/img/user2-160x160.jpg',alt='User Image').user-image
						span.hidden-xs
							| Alexander Pierce
					ul.dropdown-menu
						li.user-header
							img(src='/adminlte/dist/img/user2-160x160.jpg',alt='User Image').img-circle
							p
								| Alexander Pierce - Web Developer
								small
									| Member since Nov. 2012
						li.user-body
							.row
								.col-xs-4.text-center
									a(href='#')
										| Followers
								.col-xs-4.text-center
									a(href='#')
										| Sales
								.col-xs-4.text-center
									a(href='#')
										| Friends

						li.user-footer
							.pull-left
								a(href='#').btn.btn-default.btn-flat
									| Profile
							.pull-right
								a(href='#').btn.btn-default.btn-flat
									| Sign out

3. sidebar.jade

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

aside.main-sidebar
	section.sidebar
		.user-panel
			.pull-left.image
				img(src='/adminlte/dist/img/user2-160x160.jpg',alt='User Image').img-circle
			.pull-left.info
				p Alexander Pierces
				a(href='#')
					i.fa.fa-circle.text-success 
					| Online
		form(action='#',method='get').sidebar-form
			.input-group
				input(type='text', name='q',placeholder='Search...').form-control
				span.input-group-btn
						button(type='submit', name='search')#search-btn.btn.btn-flat
							i.fa-fa-search
		ul.sidebar-menu
			li.header
				| Main Navigation
			li.treeview
				a(href='#')
					i.fa.fa-dashboard
					span
						| Dashboard
					span.pull-right-container
						i.fa.fa-angle-left.pull-right
				ul.treeview-menu
					li
						a(href='#')
							i.fa.fa-circle-o
							| Dashboard V1
					li
						a(href='#')
							i.fa.fa-circle-o
							| Dashboard V2
			li.treeview
				a(href='#')
					i.fa.fa-files-o
					span
						| Layout Options
					span.pull-right-container
						span.label.label-primary.pull-right
							| 4
				ul.treeview-menu
					li
						a(href='#')
							i.fa.fa-circle-o
							| Top Navigation
					li
						a(href='#')
							i.fa.fa-circle-o
							| Boxed
					li
						a(href='#')
							i.fa.fa-circle-o
							| Fixed
					li
						a(href='#')
							i.fa.fa-circle-o
							| Collapsed Sidebar
			li
				a(href='#')
					i.fa.fa-th
					span
						| Widgets
					span.pull-right-container
						small.label.pull-right.bg-green
							| Hot
			li.treeview
				a(href='#')
					i.fa.fa-pie-chart
					span
						| Chart
					span.pull-right-container
						i.fa.fa-angle-left.pull-right
				ul.treeview-menu
					li
						a(href='#')
							i.fa.fa-circle-o
							| ChartJs
					li
						a(href='#')
							i.fa.fa-circle-o
							| Morris
					li
						a(href='#')
							i.fa.fa-circle-o
							| Flot
					li
						a(href='#')
							i.fa.fa-circle-o
							| ChartJs
					li
						a(href='#')
							i.fa.fa-circle-o
							| Inline charts
			li.treeview
				a(href='#')
					i.fa.fa-laptop
					span
						| UI Elements
					span.pull-right-container
						i.fa.fa-angle-left.pull-right
				ul.treeview-menu
					li
						a(href='#')
							i.fa.fa-circle-o
							| General
					li
						a(href='#')
							i.fa.fa-circle-o
							| Icons
					li
						a(href='#')
							i.fa.fa-circle-o
							| Buttons
					li
						a(href='#')
							i.fa.fa-circle-o
							| Sliders
					li
						a(href='#')
							i.fa.fa-circle-o
							| Timeline
					li
						a(href='#')
							i.fa.fa-circle-o
							| Modals

4. footer.jade

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

footer.main-footer
	.pull-right.hidden-xs 
		|  <b>Version</b> 2.3.7
	strong 
		| Copyright &copy; 2016 
		a(href="#") >Almsaeed Studio 
	| All rights reserved.
.control-sidebar-bg

5. js.jade

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

script(type='text/javascript', src='/adminlte/plugins/jQuery/jquery-2.2.3.min.js')
script(type='text/javascript', src='/adminlte/bootstrap/js/bootstrap.min.js')
script(type='text/javascript', src='/adminlte/plugins/slimScroll/jquery.slimscroll.min.js')
script(type='text/javascript', src='/adminlte/dist/js/app.min.js')
script(type='text/javascript', src='/adminlte/plugins/iCheck/icheck.min.js')

6. base.jade

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

doctype html
html
	head
		include header.jade
	body.hold-transition.skin-blue.sidebar-mini
		.wrapper
			include navigation.jade
			include sidebar.jade
			.content-wrapper
				block content
			include footer.jade
			include js.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

Blankpage Jade Order File

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

extends layout/base 
block content 
	section.content-header 
		h1 
			| Blank Page
			small it all starts here
		ol.breadcrumb 
			li 
				a(href='#') 
					i.fa.fa-dashboard
					| Level 
			li.active Here 
	section.content
		.box
			.box-header.with-border
				h3.box-title
					| Title
				.box-tools.pull-right
					button(type='button', data-widget='collapse', data-toggle='tooltip',title='collapse').btn.btn-box-tool
						i.fa.fa-minus
					button(type='button', data-widget='remove', data-toggle='tooltip',title='Remove').btn.btn-box-tool
						i.fa.fa-times
			.box-body
				| Start Creating your amazing application!
			.box-footer
				| Footer

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

router.get('/blankpage', function(req, res, next) {
  res.render('blankpage', { title: 'Express' });
});

Create Routes For Blankpage In Index Js In The Routes Folder

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

 DEBUG=expressproject:* npm start 

Windows

 DEBUG=expressproject:* & npm start 

Please open your browser and run the following URL

http://localhost:3000/blankpage

If successful will be as shown below

How To Transfer Adminlte In Jade Template Engine In The Express Js

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.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

%d bloggers like this: