Angular App Collaboration {{ Node.JS in Stackblitz }} Part 1

In this exciting video, I and Juan embark on a journey to collaborate on creating an Angular app using Node.JS on StackBlitz. Our adventure starts as we begin our Node.JS project using StackBlitz so we can use the Angular CLI. This is just the beginning and we have many more plans to grow this app in the future.

As we delve into the project, we start by installing the necessary dependencies through npm install, including the RxJS Reactive Extension Library. Then, we add the Angular Material to make the app look sleek and stylish. We double-check to ensure we have everything we need and then start discussing the app structure.

We delete the temporary test component and generate a module, renaming it as necessary. We then generate a component for the nav and add it to the app.component.html. After starting the app with ng serve, we add some minimal styling for testing and refine it as necessary. We then import the Angular Material Components in the app.module.ts and experiment with different Material UI components such as the menu and nested menu.

Video

Adding custom styling in the nav.component.scss, we then plan on adding a logo and aligning the nav bar. We even address the question of how to add images to a StackBlitz project, discovering there is more than one way.

The final step of our journey is to connect the StackBlitz project to our GitHub repository. We create a second branch and push changes to GitHub, enjoying the convenience of StackBlitz where commits and pushes happen simultaneously. And finally, we tackle the issue of adding images to the project, marking the end of our collaboration on this Angular app with Node.JS on StackBlitz.

Terminal Commands

1. npm install - installing node package manager - all the dependencies

2. npm install @angular/cli - installing the Angular CLI (-g is usually omitted in web-based IDEs)

3. ng add @angular/material - adding Angular Material

4. ng g m module-name - generating a Module

5. ng g c component-name - generating a Component

6. ng sereve - running the app - compiling