Fullstack NestJs with AdminLTE 3 : How to Implement Template

6 min readAug 7, 2021

After compiling sources on how to using AdminLte Html template (mainly GitHub and StackOverflow). I think it’s worth sharing how to incorporate AdminLte and NestJs so you don’t have to spend 10 hours to do this (like I do).

So here’s a picture of a nest (pun intended).

If you don’t know what is NestJs, it’s a full-stack framework on Nodejs environment. Mainly it’s a wrapper of backend library like Expressjs or Fastify which you can choose to use one you prefer.

I think Nestjs started to gain more popularity in a recent year since devs just grew tired to build — everything — from scratch over and over again. Non-opinionated tools are great! But must we spend our precious time just to think what’s best practice and what’s not?

Same as AdminLTE. It’s tiresome work to build a full admin web page from scratch while there is an existing very stable HTML template. And the best part is, adminLTE is free with dozens of great features.

TL: DR;

List of Content

Requisite
Setup NestJs
Import AdminLTE
Render AdminLTE using NestJs
Separate Files and Layouts HandlebarsJs
OverView

1. Requisite

In this brief article, we only focused on how to combine adminLTE and nestJs into “full-stack ” website. So here’s the stuff you need to know:

1.1. NestJS

Nestjs documentation is pretty straightforward on how you do things. But it’s just taught you the basics stuff. You still need helps from the community to guide you if somethings is not included. And here pretty much I just continue what the documentation didn’t tell me.

1.2. AdminLTE 3

I’m sure most of you must have heard or even using AdminLTE at least once. It’s an HTML/Bootstrap template that is pretty much equipped with everything you need to build a management page. You can try the live preview from here.

1.3. HandlebarJs

HandlebarJs is a template engine to render your page into html for users. In NestJs docs it’s suggested to use handlebars as your template engines. But of course, you still can integrate other template engine that you like the most (with heavy customs configurations of course).

Out of context, but I’m wondering why most of the template engine’s main pages are not pleasant to see. Just sad :(

2. Setup NestJs

2.1. Create a new project

The first thing you need to install is nestjs cli tool globally.

Using NPM$ npm install -g @nestjs/cli

After it finishes installing go to your projects directory and type in terminal

$ nest new learnadminlteIf you have VS Code installed
$ code learnadminlte
Or open the project with whatever code editor you like.

Nest js cli will generate some new files like this

2.2. Setup handlebars

Add handlebars to your project with npm install

$ npm install --save hbs

After that, you need to modify your src/main.ts file like below

You can see in bootstrap() function, we adds some new lines.

First the useStaticeAssets, it’ll enable us to access statics files like css, js, or images for our views template.
Next is setBaseViewsDir is for where you wanna put your template file so you can access it from your controller.
Last is registerPartials which is need deep explanations that I will not cover in this article (it’s just too long).

3. Import AdminLTE

3.1 Download AdminLTE 3

You need to visit adminlte GitHub releases https://github.com/ColorlibHQ/AdminLTE/releases to download the zip file.

3.2 Copy source file to NestJs

At this point, you need to create public and views directory on your root project. Then extract files and directory from adminlte zip file into public directory. And delete other files that you dont’need

3.3 Create index views

Go to view directory, create a new file and let’s name it index.hbs . Copy everything from adminlte index.html (you can choose index, index2. or index3 doesn’t really matter).

4. Render AdminLTE using NestJs

After we set up handlebars, AdminLTE and NestJs now we can render the page from our controller.

Then you can start your local server with dev watch mode

$ npm run start:dev

Open your browser and you can see the dashboard page working nicely.

5. Separate Files and Layouts HandlebarsJs

This is the tricky part. Remember in point 2.2 where I mention “registerPartials”? Here I’ll try to explain as simple as I can.

Usually, we want to isolate our template so we don’t have to scroll a very long file just to find where we want to edit stuff. Or we don’t want to repeat our code multiple times. That’s just a tedious thing to do.

5.1. Separate index.hbs

Our goal here is to separate viewsindex.hbs file into several smaller size parts. You can see in the image below we make a new directory to group template views to make it easier to manage later.

Layout directory is where we want to set the basic layout of our page.
Page directory is where we want to declare our pages.
And partials is where we want to put part of our template to add in layout or pages.

5.2. Create a New layout

After you separate index.hbs then we can combine partials into a layout. Every partials we call with {{> part}} syntax. And notice in section content we have {{> content}}, it’s where we will put our content from pages later

Then in our views/pages/index.hbs we need to specify which layout that we use and the content of the page. In here, we call management layout. then we fill “content” with an inline helper so the layout could recognize where to put this content.

For the controller, we only want to render the message hello world, but the render file is change. So we need to change the render template into Render('pages/index.hbs').

Finally, you need to restart your server so it can rebuild the handlebars template. If you succeed in following the steps, your page should show “Hello world!” message or whatever message you’re passing from the controller.

6. Overview

I’ve tried and used adminLTE with the various framework before (Codeigniter 3/4, Django, Laravel, SailsJS), and they were pretty much the same. But in NestJs, the information and steps are spread all over the internet. Not like others frameworks where you can do everything with a single source of documentation. You need to compile any pieces of information from where ever you could.

These are advantages and disadvantages at the same time. On one side you can use whatever template engine suits you. On the other side, if you can’t use any template engine, you need to go outside of nestjs comfort zone to find how to do things correctly.

The dependency of a third-party library is a bit concerning as it adds more weight for the dev team to keep track of whatever tools they are using. If one is having failure, it could bring down entire applications.

Maybe in the future, the documentations will be more improved. Or the NestJS dev will add more build-in functions so it’ll minimalize using a third-party library.