by 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
- Install and Test Node.js, Angular and PostgreSQL
- Setup the AdminLTE 3.2 Angular Template
- Setting Up the Scripts and Stylesheets
- 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
