Frontend: define one build target per configuration

.github/actions/frontend-build/action.yml

@@ -9,6 +9,10 @@ inputs:
     description: 'Whether to run Cypress tests'
     required: false
     default: 'false'
+  test-build-commands:
+    description: 'Whether to test all build commands'
+    required: false
+    default: 'false'
   node-version:
     description: 'Node.js version to use'
     required: false
@@ -40,7 +44,81 @@ runs:
       shell: bash
 
     - name: Build frontend
-      run: npm run build
+      run: make build
+      working-directory: frontend
+      shell: bash
+
+    # Test Makefile targets
+    - name: Test make build
+      if: inputs.test-build-commands == 'true'
+      run: |
+        rm -rf dist
+        make build
+        [ -d "dist/frontend" ] || { echo "Error: make build failed"; exit 1; }
+      working-directory: frontend
+      shell: bash
+
+
+    - name: Test make build-development
+      if: inputs.test-build-commands == 'true'
+      run: |
+        rm -rf dist
+        make build-development
+        [ -d "dist/frontend" ] || { echo "Error: make build-development failed"; exit 1; }
+      working-directory: frontend
+      shell: bash
+
+    - name: Test make build-fuzzing
+      if: inputs.test-build-commands == 'true'
+      run: |
+        rm -rf dist
+        make build-fuzzing
+        [ -d "dist/frontend" ] || { echo "Error: make build-fuzzing failed"; exit 1; }
+      working-directory: frontend
+      shell: bash
+
+    - name: Test make build-local
+      if: inputs.test-build-commands == 'true'
+      run: |
+        rm -rf dist
+        make build-local
+        [ -d "dist/frontend" ] || { echo "Error: make build-local failed"; exit 1; }
+      working-directory: frontend
+      shell: bash
+
+    - name: Test make build-prod
+      if: inputs.test-build-commands == 'true'
+      run: |
+        rm -rf dist
+        make build-prod
+        [ -d "dist/frontend" ] || { echo "Error: make build-prod failed"; exit 1; }
+      working-directory: frontend
+      shell: bash
+
+    - name: Test make build-producer
+      if: inputs.test-build-commands == 'true'
+      run: |
+        rm -rf dist
+        make build-producer
+        [ -d "dist/frontend" ] || { echo "Error: make build-producer failed"; exit 1; }
+      working-directory: frontend
+      shell: bash
+
+    - name: Test make build-production
+      if: inputs.test-build-commands == 'true'
+      run: |
+        rm -rf dist
+        make build-production
+        [ -d "dist/frontend" ] || { echo "Error: make build-production failed"; exit 1; }
+      working-directory: frontend
+      shell: bash
+
+    - name: Test make build-webnodelocal
+      if: inputs.test-build-commands == 'true'
+      run: |
+        rm -rf dist
+        make build-webnodelocal
+        [ -d "dist/frontend" ] || { echo "Error: make build-webnodelocal failed"; exit 1; }
       working-directory: frontend
       shell: bash
 
@@ -51,4 +129,4 @@ runs:
         working-directory: frontend
         start: npm start
         wait-on: http://localhost:4200
-        wait-on-timeout: 180s
+        wait-on-timeout: 180s

.github/workflows/frontend-macos-13.yaml

@@ -17,4 +17,6 @@ jobs:
         uses: actions/checkout@v5
 
       - name: Frontend build
-        uses: ./.github/actions/frontend-build
+        uses: ./.github/actions/frontend-build
+        with:
+          test-build-commands: 'true'

.github/workflows/frontend-macos-14.yaml

@@ -17,4 +17,6 @@ jobs:
         uses: actions/checkout@v5
 
       - name: Frontend build
-        uses: ./.github/actions/frontend-build
+        uses: ./.github/actions/frontend-build
+        with:
+          test-build-commands: 'true'

.github/workflows/frontend-macos-15.yaml

@@ -17,4 +17,6 @@ jobs:
         uses: actions/checkout@v5
 
       - name: Frontend build
-        uses: ./.github/actions/frontend-build
+        uses: ./.github/actions/frontend-build
+        with:
+          test-build-commands: 'true'

.github/workflows/frontend-macos-latest.yaml

@@ -17,4 +17,6 @@ jobs:
         uses: actions/checkout@v5
 
       - name: Frontend build
-        uses: ./.github/actions/frontend-build
+        uses: ./.github/actions/frontend-build
+        with:
+          test-build-commands: 'true'

.github/workflows/frontend-ubuntu-22-04.yaml

@@ -17,4 +17,6 @@ jobs:
         uses: actions/checkout@v5
 
       - name: Frontend build
-        uses: ./.github/actions/frontend-build
+        uses: ./.github/actions/frontend-build
+        with:
+          test-build-commands: 'true'

.github/workflows/frontend-ubuntu-24-04-arm.yaml

@@ -17,4 +17,6 @@ jobs:
         uses: actions/checkout@v5
 
       - name: Frontend build
-        uses: ./.github/actions/frontend-build
+        uses: ./.github/actions/frontend-build
+        with:
+          test-build-commands: 'true'

.github/workflows/frontend.yaml

@@ -22,3 +22,4 @@ jobs:
         with:
           run-prettier-check: 'true'
           run-tests: 'true'
+          test-build-commands: 'false'

CHANGELOG.md

@@ -24,6 +24,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   ([#1486](https://github.com/o1-labs/mina-rust/pull/1466))
 - **Frontend**: use a Makefile for scripts in package.json
   ([#1468](https://github.com/o1-labs/mina-rust/pull/1468))
+- **Frontend**: define one Makefile target per build configuration
+  ([#1469](https://github.com/o1-labs/mina-rust/pull/1469))
 
 ### Changed
 

frontend/Makefile

@@ -9,15 +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 && $(MAKE) sentry-sourcemaps
+	npx ng build --configuration production
+
+.PHONY: build-prod-sentry
+build-prod-sentry: ## Build the frontend for production with 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
@@ -34,21 +59,24 @@ copy-env: ## Copy webnode.js to env.js
 
 .PHONY: deploy
 deploy: ## Deploy the application
-	$(MAKE) prebuild && $(MAKE) build-prod && $(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 && \
-		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 && \
-		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
@@ -72,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,8 +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",
@@ -16,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"
   },