Frontend/Makefile: improve and sync with package.json

CHANGELOG.md

@@ -22,6 +22,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   is tested accordingly in the CI at every push.
 - **Website**: add comparison list of implemented and missing GraphQL endpoints
   ([#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))
 
 ### Changed
 

frontend/Makefile

@@ -3,39 +3,108 @@
 .PHONY: help
 help: ## Display this help message
 	@echo "Frontend Makefile - Available targets:"
-	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}'
+	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | \
+		awk 'BEGIN {FS = ":.*?## "}; \
+		{printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}'
+
+.PHONY: build
+build: ## Build the frontend
+	ng build
+
+.PHONY: build-dev
+build-dev: ## Build the frontend for development
+	ng build --configuration development
+
+.PHONY: build-prod
+build-prod: ## Build the frontend for production
+	ng build --configuration production && $(MAKE) sentry-sourcemaps
+
+.PHONY: check-prettify
+check-prettify: ## Check if files are formatted with Prettier
+	npx prettier --check 'src/**/*.{ts,js,html,scss,css,json}'
+
+.PHONY: clean
+clean: ## Clean build artifacts and node_modules
+	rm -rf dist node_modules
+
+.PHONY: copy-env
+copy-env: ## Copy webnode.js to env.js
+	cp dist/frontend/browser/assets/environments/webnode.js \
+		dist/frontend/browser/assets/environments/env.js
+
+.PHONY: deploy
+deploy: ## Deploy the application
+	$(MAKE) prebuild && $(MAKE) build-prod && $(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
+
+.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
 
 .PHONY: install
 install: ## Install npm dependencies
 	npm install
 
+.PHONY: install-deps
+install-deps: ## Install npm dependencies (alias)
+	npm install
+
+.PHONY: prebuild
+prebuild: ## Run prebuild script to update version
+	node scripts/update-frontend-version.js
+
 .PHONY: prettify
 prettify: ## Format HTML, SCSS, TypeScript, and JavaScript files with Prettier
 	npx prettier --write 'src/**/*.{ts,js,html,scss,css,json}'
 
-.PHONY: check-prettify
-check-prettify: ## Check if files are formatted with Prettier
-	npx prettier --check 'src/**/*.{ts,js,html,scss,css,json}'
+.PHONY: rebuild
+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
 
 .PHONY: start
 start: ## Start the development server
-	npm start
+	npm install && ng serve --configuration local --open
 
-.PHONY: build
-build: ## Build the frontend for production
-	npm run build:prod
+.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
+
+.PHONY: start-fuzzing
+start-fuzzing: ## Start the fuzzing build and serve
+	$(MAKE) install-deps && ng build --configuration fuzzing && \
+		$(MAKE) start-bundle
+
+.PHONY: start-webnode
+start-webnode: ## Start the webnode development server
+	npm install && ng serve --configuration webnodelocal --open
 
 .PHONY: test
 test: ## Run Cypress tests
-	npm run tests
+	npx cypress open --config baseUrl=http://localhost:4200
 
 .PHONY: test-headless
 test-headless: ## Run Cypress tests in headless mode
-	npm run tests:headless
-
-.PHONY: clean
-clean: ## Clean build artifacts and node_modules
-	rm -rf dist node_modules
-
-.PHONY: rebuild
-rebuild: clean install build ## Clean, reinstall dependencies, and rebuild
+	npx cypress run --headless --config baseUrl=http://localhost:4200

frontend/package.json

@@ -2,26 +2,26 @@
   "name": "frontend",
   "version": "1.0.184",
   "scripts": {
-    "install:deps": "npm install",
-    "start": "npm install && ng serve --configuration local --open",
-    "start:dev": "ng serve --configuration development",
-    "start:webnode": "npm install && ng serve --configuration webnodelocal --open",
-    "start:dev:mobile": "ng serve --configuration development --host 0.0.0.0",
-    "start:fuzzing": "npm run install:deps && ng build --configuration fuzzing && npm run start:bundle",
-    "build": "ng build",
-    "build:dev": "ng build --configuration development",
-    "build:prod": "ng build --configuration production && npm run sentry:sourcemaps",
-    "tests": "npx cypress open --config baseUrl=http://localhost:4200",
-    "tests:headless": "npx cypress run --headless --config baseUrl=http://localhost:4200",
-    "docker": "npm run build:prod && docker buildx build --platform linux/amd64 -t openmina/frontend:latest . && docker push openmina/frontend:latest",
-    "start:bundle": "serve dist/frontend/browser -s -l 4200",
-    "prebuild": "node scripts/update-frontend-version.js",
-    "sentry:sourcemaps": "sentry-cli sourcemaps inject --org openmina-uv --project openmina ./dist/frontend/browser && sentry-cli sourcemaps upload --org openmina-uv --project openmina ./dist/frontend/browser",
-    "copy-env": "cp dist/frontend/browser/assets/environments/webnode.js dist/frontend/browser/assets/environments/env.js",
-    "deploy": "npm run prebuild && npm run build:prod && npm run copy-env && firebase deploy",
-    "deploy:leaderboard": "npm run prebuild && npm run build:prod && cp dist/frontend/browser/assets/environments/leaderboard.js dist/frontend/browser/assets/environments/env.js && firebase deploy",
+    "build": "make build",
+    "build:dev": "make build-dev",
+    "build:prod": "make build-prod",
+    "check-prettify": "make check-prettify",
+    "copy-env": "make copy-env",
+    "deploy": "make deploy",
+    "deploy:leaderboard": "make deploy-leaderboard",
+    "docker": "make docker",
+    "install:deps": "make install-deps",
+    "prebuild": "make prebuild",
     "prettify": "make prettify",
-    "check-prettify": "make check-prettify"
+    "sentry:sourcemaps": "make sentry-sourcemaps",
+    "start": "make start",
+    "start:bundle": "make start-bundle",
+    "start:dev": "make start-dev",
+    "start:dev:mobile": "make start-dev-mobile",
+    "start:fuzzing": "make start-fuzzing",
+    "start:webnode": "make start-webnode",
+    "tests": "make test",
+    "tests:headless": "make test-headless"
   },
   "private": true,
   "dependencies": {