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

Learn how to setup Angular, Node, PostgreSQL and Angular Template for FleetMSv3, including AdminLTE, scripts, stylesheets, and application configuration.

TL;DR

• Install and test Node.js, Angular, and PostgreSQL.

• Create the FleetMSv3 Angular application and configure routing.

• Install and configure the AdminLTE Angular template.

• Add the required AdminLTE CSS and JavaScript files to angular.json.

• Update index.html and app.component.html with the AdminLTE dashboard structure.

• Copy the required images into the Angular assets folder and update their paths.

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 admin-lte@^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

FAQs

What technologies are used in FleetMSv3?

FleetMSv3 uses Angular for the UI, Node.js for the application middle tier, and MongoDB and PostgreSQL for data persistence.

How do I set up Angular for FleetMSv3?

Install Node.js, install Angular CLI, and create the application using the ng new fleetmsv3 command with routing enabled.

How do I install the AdminLTE template in Angular?

Install AdminLTE using npm install admin-lte@^3.2 --save, then configure its CSS and JavaScript files in the Angular angular.json file.

Where do I configure AdminLTE scripts and stylesheets?

The AdminLTE CSS files are added to the styles section and the JavaScript files are added to the scripts section of the angular.json build configuration.

Why are AdminLTE images not displaying in Angular?

The AdminLTE image paths need to be updated to point to the Angular assets folder. For example, dist/img/ should be replaced with assets/img/ after copying the image folder into src/assets.

Final Thoughts

FleetMSv3 brings together Angular, Node.js, PostgreSQL, and AdminLTE to create the foundation for the application’s frontend and backend development.

After installing the required tools, configuring AdminLTE, adding its scripts and stylesheets, and updating the image paths, you should have the dashboard running successfully in Angular. The project can then be extended with authentication, state management, database integration, and other features planned for FleetMSv3.