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
1 | express --view=jade expressproject |
then
1 2 | 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
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
1 2 3 4 5 6 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | 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
1 2 3 4 5 6 7 8 | footer.main-footer .pull-right.hidden-xs | <b>Version</b> 2.3.7 strong | Copyright © 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
1 2 3 4 5 | 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
1 2 3 4 5 6 7 8 9 10 11 12 | 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
Copy the following code and paste it in the file blankpage.jade
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 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
1 2 3 | router.get('/blankpage', function(req, res, next) { res.render('blankpage', { title: 'Express' }); }); |
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
1 | DEBUG=expressproject:* npm start |
Windows
1 | DEBUG=expressproject:* & npm start |
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
Latest posts by Sigit Prasetya Nugroho (see all)
- Tutorial Simple CRUD Angular 5 And Lumen 5.6 For Beginners - April 4, 2018
- Tutorial CRUD Firebase Real Time Database In Web Apps For Beginners - March 1, 2018
- The Point Responsive WordPress Theme For Blogging - February 28, 2018
Nice post, it helped me to use the Admin LTE with express-handlebars engine after trying your code.
Best regards
You’re Welcome 🙂
Very Helpful, Thank you so much! 🙂