FleetMSv3 – Part 1 – Setup Angular, Node, PostgreSQL and Angular Template

FleetMS version 3 kicks off today!

Here’s the technology stack for FleetMS version 3.

  • Angular¬† for UI development
  • Node.js for application middle-tier
  • MongoDB, PostgreSQL for data persistence

Additionally, we would be using the following tools and technologies

  • Angular Material, PrimeNg and Bootstrap for UI design
  • MongoDB for learning a bit about NoSQL document¬† databases
  • NGRX for state management in Angular
  • GitHub for source control
  • auth0/angular-jwt library for authentication and authorization
  • Amazon EC2, IAM, S3 etc.
  • and lots more

The following is covered here

  1. Install and Test Node.js, Angular and PostgreSQL
  2. Setup the AdminLTE 3.2 Angular Template
  3. Setting Up the Scripts and Stylesheets
  4. Modify the index.html and app.component.html

 

1. Install and Test Node.js, Angular and PostgreSQL

In this session, we will download and install Node, Angular and PostgreSQL.

Step 1 – Download Node.js from here and install it following the prompts.

Step 2 – Install Angular using the CLI via this command

npm install - g @angular/cli

 

Step 3  РDownload and install PostgreSQL. Get it from here.

 

2. Setup the AdminLTE 3.2 Angular Template

For this application, we would be using the AdminLTE template version 3.0 from ColorLib and you can get it from here. You can follow the steps below to set it up.

Step 1 – Create an Angular application is some directory using this command:

ng new fleetmsv3

You need to include routing.

Step 2 – Navigate into the installed application and install the adminlte3 node modules using the command below:

npm install [email protected]^3.2 --save

You can check that it installed by looking into the node_modules directory

Step 3 – Build the application using the command

ng build

 

Step 4 – Fire up the application using the ng serve command as shown below:

ng serve --open

If it works, then thumbs up!

Step 5 – Check your package.json file to make sure you have the admin-lte dependency

 

3. Setting Up the Scripts and Stylesheets

Now we need to actually setup the AdminLTE pages, scripts and stylesheets.

Step 1 – Open one of the dashboard pages. Here, I choose index2.html. Open the page source and check the path of the included js and css files.

Step 2 – Open the angular.json file and check the styles and scripts keys under the build section.

Step 3 – Copy the css paths as given below to the styles section

"node_modules/admin-lte/plugins/fontawesome-free/css/all.min.css",
"node_modules/admin-lte/plugins/overlayScrollbars/css/OverlayScrollbars.min.css",
"node_modules/admin-lte/dist/css/adminlte.min.css"

 

Step 4 – Copy the js paths as given below the scripts section.

"node_modules/admin-lte/plugins/jquery/jquery.min.js",
"node_modules/admin-lte/plugins/bootstrap/js/bootstrap.bundle.min.js",
"node_modules/admin-lte/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js",
"node_modules/admin-lte/dist/js/adminlte.js",
"node_modules/admin-lte/plugins/jquery-mousewheel/jquery.mousewheel.js",
"node_modules/admin-lte/plugins/raphael/raphael.min.js",
"node_modules/admin-lte/plugins/jquery-mapael/jquery.mapael.min.js",
"node_modules/admin-lte/plugins/jquery-mapael/maps/usa_states.min.js",
"node_modules/admin-lte/plugins/chart.js/Chart.min.js",
"node_modules/admin-lte/dist/js/demo.js",
"node_modules/admin-lte/dist/js/pages/dashboard2.js"

 

4. Modify the index.html and app.component.html

Follow the steps to modify the index.html

Step 1 – Open the index.html file and update the body class tag with the one in the index2.html from the AdminLTE template

Step 2 – Open the app.component.html file and delete everything except the <router-outlet></router-outlet> tags.

Step 3 – Copy the rest of code inside the <body></body> tag from the index2.html from the index2.html in the AdminLTE template.

Step 4 – Paste this code in the app.component.html file just before the <router-outlet></router-outlet> tags.

Step 5 – Copy the img folder located inside the admin-lte/dist directory to the src/assets folder

Step 6 – Find this path <img src=”dist/img/user1-128×128.jpg” alt=”User Avatar”class=”img-size-50 mr-3 img-circle”>

and change the src to “assets/img/user1-128×128.jpg”

Step 7 – You should actually replace all occurrence of dist/img/ with assets/img/. You can use find and replace to achieve this.

Step 8 – Stop the application. Rebuild it and serve it up. Visit the home page, you will see the dashboard working perfectly well.

There is a second method which is more flexible and easier to follow. Method 2 here

kindsonthegenius

kindsonthegenius

Kindson Munonye is currently completing his doctoral program in Software Engineering in Budapest University of Technology and Economics

View all posts by kindsonthegenius →

Leave a Reply

Your email address will not be published.