To exemplify the use of the micro frontend architecture in our gym diary, we will create a form to define new exercises for our users. Let’s create another Angular project, simulating a new team that will specifically take care of this functionality. In your operating system’s command line, use the following command:
ng new gym_exercises –skip-git –standalone –routing false –style css
We learned about the ng new command in Chapter 1, Starting Projects the Right Way, but here we are using some parameters that we haven’t seen before. We are using the skip-git parameter because, in this example, we are creating it in the same Git project (which already has the gym-diary and gym-backend projects). The routing parameter is set to false because our project will be loaded in the diary application route, and the style parameter is set to CSS so the Angular CLI does not need to ask what type of styling our project will have.
The biggest difference in this command is standalone, which parameterized our project to create all components as standalone by default. But you might be wondering what a standalone component is. Created from version 15 of Angular, this feature allows you to create a component without using Angular modules (NgModule). Although modules are very important, as we saw in Chapter 2, Organizing Your Application, there are cases in which they are not very useful and make the project unnecessarily complicated. A good example of this is in small projects with a limited scope, such as this micro frontend, where we will not have multiple routes or lazy loading.
Before we start creating the exercise form, let’s add and configure the Tailwind CSS framework, as we want to have a style compatible with our main application. Inside the created project folder, run the following command from the command line of your operating system:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
This command will add development dependencies to the project and create configuration files in the Tailwind CSS framework.
In the tailwind.config.js file, make the following changes:
/** @type {import(‘tailwindcss’).Config} */
module.exports = {
content: [
“./src/**/*.{html,ts}”,
],
theme: {
extend: {},
},
plugins: [],
}
In this file, we are telling Angular that it will apply the Tailwind CSS framework to all HTML files in the src folder.
Finally, add the following lines of code to the app.component.css file:
@tailwind base;
@tailwind components;
@tailwind utilities;
With these CSS variables, the component will have access to the tailwindcss class.
We will then create a service that will be responsible for interacting with our backend’s exercise API. On the command line, we will use the following:
ng g service service/Exercises
ng g interface exercise
Note a detail of our architecture: we already have a service that queries the exercise API in our main project, but we cannot reuse it here because they are independent projects, and certain code duplication is a cost of this architecture.
Following the best practices, we will create our API as follows:
Export interface Exercise {
id?: string;
description: string;
}
export type ExerciseList = Array<Exercise>;
export interface ExerciseListAPI {
hasNext: boolean;
items: ExerciseList;
};
Here, we are recreating the types that represent the API data. For more details about TypeScript interfaces, you can consult Chapter 3, TypeScript Patterns for Angular.
In the created service, we will add interaction with the backend:
@Injectable({
providedIn: ‘root’,
})
export class ExercisesService {
private httpClient = inject(HttpClient);
private url = ‘http://localhost:3000/exercises’;
getExercises(): Observable<ExerciseList> {
return this.httpClient
.get<ExerciseListAPI>(`${this.url}`)
.pipe(map((api) => api?.items));
}
addExercises(exercises: Partial<Exercise>): Observable<Exercise> {
return this.httpClient.post<Exercise>(this.url, exercises);
}
}
No Responses