Simplifying Angular Project Management with a Custom Makefile

Managing an Angular project efficiently requires a set of consistent commands to handle various tasks, from generating components to running tests and deploying the application. A Makefile can streamline this process by encapsulating these commands into easy-to-use targets. In this blog post, we'll explore a Makefile designed for Angular projects that simplifies common tasks and enhances project maintainability.

Understanding the Makefile Structure

Let's break down the key components of the Makefile:

Angular Version and Environment

The Makefile starts by defining essential variables such as the Node.js version, Angular version, Angular CLI alias, and project directories.

NODE_VERSION=18
ANGULAR_VERSION=17
NG_CLI = npx -p @angular/cli@$(ANGULAR_VERSION)
SOURCE_DIR = src
DIST_DIR = dist

These variables are crucial for maintaining a consistent development environment across different machines.

Functions for Angular Version and IP Address

Two functions are defined to fetch the Angular version and the local machine's IP address. These functions enhance the Makefile's flexibility and can be reused in various targets.

define get_angular_version
 $$(. $(HOME)/.nvm/nvm.sh && nvm use $(NODE_VERSION) && $(NG_CLI) ng version)
endef

define get_ip
 $(shell hostname -I | cut -d' ' -f1)
endef

The Makefile includes several targets to execute common Angular CLI commands. Here are some notable ones:

• g-state, g-actions, g-effects, g-feature: Generate NgRx store state, actions, effects, and feature.
• gs, gc: Generate Angular service and component.
• run: Start the development server with a specified IP address and port.
• build: Build the Angular application.
• rmn: Remove the dist directory.
• i: Install project dependencies using npm.
• v: Display the Angular version.
• test: Run Angular tests.
• lint: Perform linting using a custom script.

Docker Commands

The Makefile also includes targets for Docker commands, allowing for seamless integration with containerized environments:

dc-up:
sudo docker-compose up --remove-orphans

dc-down:
sudo docker-compose down

dc-remove-all:
sudo docker system prune -a

Complete Makefile for Angular Project

#! Function to read Angular version
define get_angular_version
$$(. $(HOME)/.nvm/nvm.sh && nvm use $(NODE_VERSION) && $(NG_CLI) ng version)
endef

#! Function to read the your local ip address
define get_ip
$(shell hostname -I | cut -d' ' -f1)
endef

#! Variables
NODE_VERSION=18
ANGULAR_VERSION=17
NG_CLI = npx -p @angular/cli@$(ANGULAR_VERSION)
SOURCE_DIR = src
DIST_DIR = dist

## Targets

.PHONY:g-state g-actions g-effects g-feature gs gc run build rmn i -v test lint dc-up dc-down

#! System Commands
ip:
@echo $(call get_ip)

#\* Angular Ngrx Cli Commands

## !Make sure you have installed the ngrx schemetics and add to the angular.json file in "cli" option, otherwise the commonds will not work.

g-state:
@. $(HOME)/.nvm/nvm.sh && nvm use $(NODE_VERSION) && $(NG_CLI) ng generate store --root --state-path --module
g-actions:
@. $(HOME)/.nvm/nvm.sh && nvm use $(NODE_VERSION) && $(NG_CLI) ng generate action --group
g-effects:
@. $(HOME)/.nvm/nvm.sh && nvm use $(NODE_VERSION) && $(NG_CLI) ng generate effect --group
g-feature:
@. $(HOME)/.nvm/nvm.sh && nvm use $(NODE_VERSION) && $(NG_CLI) ng generate feature

#! Angular cli commands
gs:
@. $(HOME)/.nvm/nvm.sh && nvm use $(NODE_VERSION) && $(NG_CLI) ng g s

gc:
@. $(HOME)/.nvm/nvm.sh && nvm use $(NODE_VERSION) && $(NG_CLI) ng g c

run:
@. $(HOME)/.nvm/nvm.sh && nvm use $(NODE_VERSION) && $(NG_CLI) ng serve --host $(call get_ip) --port 4200

build:
@. $(HOME)/.nvm/nvm.sh && nvm use $(NODE_VERSION) && $(NG_CLI) ng build

rmn:
rm -rf $(DIST_DIR)

i:
@. $(HOME)/.nvm/nvm.sh && nvm use $(NODE_VERSION) && $(NG_CLI) npm install --force

v:
@echo "Angular Version:$(call get_angular_version)"

test:
@. $(HOME)/.nvm/nvm.sh && nvm use $(NODE_VERSION) && $(NG_CLI) ng test

lint:
$(shell ./linting.sh)

#! Docker Cli Commands
dc-up:
sudo docker-compose up --remove-orphans

dc-down:
sudo docker-compose down

dc-remove-all:
sudo docker system prune -a

#! Default target
.DEFAULT_GOAL := serve

Simplifying Angular Development

By using this Makefile, developers can significantly simplify their workflow. Running common tasks, such as generating components, building the application, or starting the development server, becomes as simple as executing a make command. Additionally, the Makefile promotes consistency across development environments, ensuring that everyone works with the same versions of Node.js and Angular CLI.

To enhance this Makefile further, consider customizing it based on your project's specific needs. Add more targets, incorporate additional checks, or integrate other tools to tailor the Makefile to your workflow. With this approach, you can create a robust and standardized development environment for your Angular projects.

In conclusion, a well-structured Makefile can be a valuable asset for Angular developers, providing a unified and efficient way to manage their projects. Whether you are working on a small personal project or a large enterprise application, a Makefile can contribute to a smoother development experience and improved project maintainability.

Conclusion

This Makefile serves as a powerful tool for Angular developers, streamlining common development tasks and ensuring consistency across different environments. It encapsulates Angular CLI commands, Docker operations, and custom scripts, providing a unified and efficient workflow. Developers can further customize and extend this Makefile to suit the specific needs of their projects.