Makefile: define one build/start target per configuration

Author: dannywillems

frontend/Makefile

@@ -9,19 +9,40 @@ help: ## Display this help message
 
 .PHONY: build
 build: ## Build the frontend
-	ng build
+	npx ng build
 
-.PHONY: build-dev
-build-dev: ## Build the frontend for development
-	ng build --configuration development
+.PHONY: build-development
+build-development: ## Build the frontend with development configuration
+	npx ng build --configuration development
+
+.PHONY: build-fuzzing
+build-fuzzing: ## Build the frontend with fuzzing configuration
+	npx ng build --configuration fuzzing
+
+.PHONY: build-local
+build-local: ## Build the frontend with local configuration
+	npx ng build --configuration local
 
 .PHONY: build-prod
 build-prod: ## Build the frontend for production
-	ng build --configuration production
+	npx ng build --configuration production
 
 .PHONY: build-prod-sentry
 build-prod-sentry: ## Build the frontend for production with Sentry sourcemaps
-	ng build --configuration production && $(MAKE) sentry-sourcemaps
+	npx ng build --configuration production
+	$(MAKE) sentry-sourcemaps
+
+.PHONY: build-producer
+build-producer: ## Build the frontend with producer configuration
+	npx ng build --configuration producer
+
+.PHONY: build-production
+build-production: ## Build the frontend with production configuration
+	npx ng build --configuration production
+
+.PHONY: build-webnodelocal
+build-webnodelocal: ## Build the frontend with webnodelocal configuration
+	npx ng build --configuration webnodelocal
 
 .PHONY: check-prettify
 check-prettify: ## Check if files are formatted with Prettier
@@ -38,21 +59,24 @@ copy-env: ## Copy webnode.js to env.js
 
 .PHONY: deploy
 deploy: ## Deploy the application
-	$(MAKE) prebuild && $(MAKE) build-prod-sentry && $(MAKE) copy-env && \
-		firebase deploy
+	$(MAKE) prebuild
+	$(MAKE) build-prod-sentry
+	$(MAKE) copy-env
+	firebase deploy
 
 .PHONY: deploy-leaderboard
 deploy-leaderboard: ## Deploy the leaderboard application
-	$(MAKE) prebuild && $(MAKE) build-prod-sentry && \
-		cp dist/frontend/browser/assets/environments/leaderboard.js \
-		dist/frontend/browser/assets/environments/env.js && \
-		firebase deploy
+	$(MAKE) prebuild
+	$(MAKE) build-prod-sentry
+	cp dist/frontend/browser/assets/environments/leaderboard.js \
+		dist/frontend/browser/assets/environments/env.js
+	firebase deploy
 
 .PHONY: docker
 docker: ## Build and push Docker image
-	$(MAKE) build-prod-sentry && \
-		docker buildx build --platform linux/amd64 -t openmina/frontend:latest . && \
-		docker push openmina/frontend:latest
+	$(MAKE) build-prod-sentry
+	docker buildx build --platform linux/amd64 -t openmina/frontend:latest .
+	docker push openmina/frontend:latest
 
 .PHONY: install
 install: ## Install npm dependencies
@@ -76,34 +100,49 @@ rebuild: clean install build ## Clean, reinstall dependencies, and rebuild
 .PHONY: sentry-sourcemaps
 sentry-sourcemaps: ## Upload sourcemaps to Sentry
 	sentry-cli sourcemaps inject --org openmina-uv --project openmina \
-		./dist/frontend/browser && \
-		sentry-cli sourcemaps upload --org openmina-uv --project openmina \
+		./dist/frontend/browser
+	sentry-cli sourcemaps upload --org openmina-uv --project openmina \
 		./dist/frontend/browser
 
 .PHONY: start
 start: ## Start the development server
-	npm install && ng serve --configuration local --open
+	npm install
+	npx ng serve --configuration local --open
 
 .PHONY: start-bundle
 start-bundle: ## Serve the built bundle
 	serve dist/frontend/browser -s -l 4200
 
-.PHONY: start-dev
-start-dev: ## Start the development server (dev configuration)
-	ng serve --configuration development
-
 .PHONY: start-dev-mobile
 start-dev-mobile: ## Start the development server for mobile (accessible on network)
-	ng serve --configuration development --host 0.0.0.0
+	npx ng serve --configuration development --host 0.0.0.0
+
+.PHONY: start-development
+start-development: ## Start the development server with development configuration
+	npx ng serve --configuration development
 
 .PHONY: start-fuzzing
 start-fuzzing: ## Start the fuzzing build and serve
-	$(MAKE) install-deps && ng build --configuration fuzzing && \
-		$(MAKE) start-bundle
+	$(MAKE) install-deps
+	npx ng build --configuration fuzzing
+	$(MAKE) start-bundle
+
+.PHONY: start-local
+start-local: ## Start the development server with local configuration
+	npx ng serve --configuration local
+
+.PHONY: start-production
+start-production: ## Start the development server with production configuration
+	npx ng serve --configuration production
 
 .PHONY: start-webnode
 start-webnode: ## Start the webnode development server
-	npm install && ng serve --configuration webnodelocal --open
+	npm install
+	npx ng serve --configuration webnodelocal --open
+
+.PHONY: start-webnodelocal
+start-webnodelocal: ## Start the development server with webnodelocal configuration
+	npx ng serve --configuration webnodelocal
 
 .PHONY: test
 test: ## Run Cypress tests

frontend/package.json

@@ -3,9 +3,15 @@
   "version": "1.0.184",
   "scripts": {
     "build": "make build",
-    "build:dev": "make build-dev",
+    "build:dev": "make build-development",
+    "build:development": "make build-development",
+    "build:fuzzing": "make build-fuzzing",
+    "build:local": "make build-local",
     "build:prod": "make build-prod",
     "build:prod:sentry": "make build-prod-sentry",
+    "build:producer": "make build-producer",
+    "build:production": "make build-production",
+    "build:webnodelocal": "make build-webnodelocal",
     "check-prettify": "make check-prettify",
     "copy-env": "make copy-env",
     "deploy": "make deploy",
@@ -17,10 +23,14 @@
     "sentry:sourcemaps": "make sentry-sourcemaps",
     "start": "make start",
     "start:bundle": "make start-bundle",
-    "start:dev": "make start-dev",
+    "start:dev": "make start-development",
     "start:dev:mobile": "make start-dev-mobile",
+    "start:development": "make start-development",
     "start:fuzzing": "make start-fuzzing",
+    "start:local": "make start-local",
+    "start:production": "make start-production",
     "start:webnode": "make start-webnode",
+    "start:webnodelocal": "make start-webnodelocal",
     "tests": "make test",
     "tests:headless": "make test-headless"
   },