Fullstack NestJs with AdminLTE 3 : How to Implement Template

Photo by Mariko margetson on Unsplash

List of Content

  1. Requisite
  2. Setup NestJs
  3. Import AdminLTE
  4. Render AdminLTE using NestJs
  5. Separate Files and Layouts HandlebarsJs
  6. OverView

1. Requisite

1.1. NestJS

Screen captured from nestjs.com

1.2. AdminLTE 3

live preview AdminLte 3

1.3. HandlebarJs

Handlebars web page

2. Setup NestJs

2.1. Create a new project

Using NPM$ npm install -g @nestjs/cli
$ nest new learnadminlteIf you have VS Code installed
$ code learnadminlte
Or open the project with whatever code editor you like.
newly generated project

2.2. Setup handlebars

$ npm install --save hbs
  • 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

adminLTE github

3.2 Copy source file to NestJs

adminlte public directory

3.3 Create index views

preview index.hbs

4. Render AdminLTE using NestJs

$ npm run start:dev

5. Separate Files and Layouts HandlebarsJs

5.1. Separate index.hbs

  • 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.
separate views

5.2. Create a New layout

Result

6. Overview

Python & NodeJs Programmer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Destructuring Props

fgdfgdfgdfdfgdf

Uppy File Uploader in Laravel & Vue.js Apps

Real-Life Example of a Linked List

React Native fullscreen player

In this article, we will see how we can make Dismissible Alerts in Bootstrap and how we can remove…

CSS REFACTOR: Let's Make Amazon Responsive with Grid Instead

Some JavaScript interview question topic

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Riris Bayu Asrori

Riris Bayu Asrori

Python & NodeJs Programmer

More from Medium

GraphQL Schema, Queries and Relationships ( node.js )

GraphQL, Apollo Studio, and Cookies

Live Reload with Docker and React

Part2: Setup production docker and docker-compose with Node.js, MongoDB, Redis, and Next.js