diff --git a/CHANGELOG.md b/CHANGELOG.md index 915ab2937..f229435df 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/frontend/Makefile b/frontend/Makefile index 5413b96f8..bdf29827d 100644 --- a/frontend/Makefile +++ b/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 \ No newline at end of file diff --git a/frontend/package.json b/frontend/package.json index f760769be..a7e70869c 100644 --- a/frontend/package.json +++ b/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": {