From c864ab2c84a0fb6d9a3ec078fe9bc19fd4d46b87 Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Mon, 20 May 2024 17:59:55 +0200 Subject: [PATCH 1/5] knowledge from moving sneridagh.dev to the new setup --- project/cookiecutter.json | 3 + .../.github/workflows/frontend.yml | 80 +++++++---- .../frontend/.dockerignore | 2 - .../frontend/Dockerfile | 74 +++------- .../frontend/Makefile | 126 ++++++++++++++++++ 5 files changed, 204 insertions(+), 81 deletions(-) create mode 100644 sub/project_settings/{{ cookiecutter.__folder_name }}/frontend/Makefile diff --git a/project/cookiecutter.json b/project/cookiecutter.json index 9a031c0..f74e4f9 100644 --- a/project/cookiecutter.json +++ b/project/cookiecutter.json @@ -51,6 +51,9 @@ "__pre_commit_version": "3.7.1", "__gha_enable": true, "__gha_version_checkout": "v4", + "__gha_version_setup_node": "v4", + "__gha_version_setup_pnpm": "v4", + "__gha_version_cache": "v4", "__gha_version_docker_stack": "v1.2.0", "__gha_version_code_analysis": "v2", "__gha_version_docker_metadata": "v5", diff --git a/project/{{ cookiecutter.__folder_name }}/.github/workflows/frontend.yml b/project/{{ cookiecutter.__folder_name }}/.github/workflows/frontend.yml index 41e8453..0ccbc25 100644 --- a/project/{{ cookiecutter.__folder_name }}/.github/workflows/frontend.yml +++ b/project/{{ cookiecutter.__folder_name }}/.github/workflows/frontend.yml @@ -17,6 +17,23 @@ defaults: working-directory: ./frontend jobs: + meta: + runs-on: ubuntu-latest + outputs: + BASE_TAG: ${{ steps.vars.outputs.BASE_TAG }} + VOLTO_VERSION: ${{ steps.vars.outputs.VOLTO_VERSION }} + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Compute several vars needed for the build + id: vars + run: | + echo "BASE_TAG=sha-$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT + python3 -c 'import json; data = json.load(open("./mrs.developer.json")); print("VOLTO_VERSION=" + data["core"]["tag"])' >> $GITHUB_OUTPUT + - name: Test vars + run: | + echo "BASE_TAG=${{ steps.vars.outputs.BASE_TAG }}" + echo "VOLTO_VERSION=${{ steps.vars.outputs.VOLTO_VERSION }}" code-analysis: runs-on: ubuntu-latest @@ -24,55 +41,64 @@ jobs: - name: Checkout codebase uses: actions/checkout@{{ cookiecutter.__gha_version_checkout }} - - name: Update Global Yarn - run: | - corepack enable - corepack prepare yarn@stable --activate - - name: Use Node.js {{ "${{ env.node-version }}" }} - uses: actions/setup-node@v3 + uses: actions/setup-node@{{ cookiecutter.__gha_version_setup_node }} with: node-version: {{ "${{ env.NODE_VERSION }}" }} - cache: 'yarn' - cache-dependency-path: 'frontend/yarn.lock' - - name: Prettier - id: prettier - run: npx prettier@3.0.3 --single-quote --check 'src/**/*.{js,jsx,ts,tsx,css,scss}' --config=package.json + - uses: pnpm/action-setup@{{ cookiecutter.__gha_version_setup_pnpm }} + name: Install pnpm + with: + version: 9 + # We don't want to install until later, + # when the cache is in place + run_install: false + + - name: Get pnpm store directory + shell: bash + run: | + echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV - - name: Install packages + - uses: actions/cache@{{ cookiecutter.__gha_version_cache }} + name: Setup pnpm cache + with: + path: ${{ env.STORE_PATH }} + key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm-store- + + - name: Install dependencies run: make install - - name: ESLint - id: eslint - if: {{ "${{ success() || failure() }}" }} - run: yarn run lint:ci + - name: Linting + id: lint + if: ${{ success() || failure() }} + run: make lint - name: i18n sync id: i18n - if: {{ "${{ success() || failure() }}" }} - run: make i18n-ci + if: ${{ success() || failure() }} + run: make ci-i18n - name: Unit Tests id: unit - if: {{ "${{ success() || failure() }}" }} + if: ${{ success() || failure() }} run: make test - name: Report - if: {{ "${{ success() || failure() }}" }} + if: ${{ success() || failure() }} run: | echo '# Code Analysis' >> $GITHUB_STEP_SUMMARY echo '| Test | Status |' >> $GITHUB_STEP_SUMMARY echo '| --- | --- |' >> $GITHUB_STEP_SUMMARY - {{ "echo '| Prettier | ${{ steps.prettier.conclusion == 'failure' && '❌' || ' ✅' }} |' >> $GITHUB_STEP_SUMMARY" }} - {{ "echo '| ESLint | ${{ steps.eslint.conclusion == 'failure' && '❌' || ' ✅' }} |' >> $GITHUB_STEP_SUMMARY" }} - {{ "echo '| i18n | ${{ steps.i18n.conclusion == 'failure' && '❌' || ' ✅' }} |' >> $GITHUB_STEP_SUMMARY" }} - {{ "echo '| Unit Tests | ${{ steps.unit.conclusion == 'failure' && '❌' || ' ✅' }} |' >> $GITHUB_STEP_SUMMARY " }} - + echo '| Lint | ${{ steps.lint.conclusion == 'failure' && '❌' || ' ✅' }} |' >> $GITHUB_STEP_SUMMARY + echo '| i18n | ${{ steps.i18n.conclusion == 'failure' && '❌' || ' ✅' }} |' >> $GITHUB_STEP_SUMMARY + echo '| Unit Tests | ${{ steps.unit.conclusion == 'failure' && '❌' || ' ✅' }} |' >> $GITHUB_STEP_SUMMARY release: runs-on: ubuntu-latest needs: + - meta - code-analysis permissions: contents: read @@ -125,4 +151,6 @@ jobs: file: frontend/Dockerfile push: {{"${{ github.event_name != 'pull_request' }}"}} tags: {{"${{ steps.meta.outputs.tags }}"}} - labels: ${{"${{ steps.meta.outputs.labels }}"}} + labels: {{"${{ steps.meta.outputs.labels }}"}} + build-args: | + VOLTO_VERSION={{"${{ needs.meta.outputs.VOLTO_VERSION }}"}} diff --git a/sub/project_settings/{{ cookiecutter.__folder_name }}/frontend/.dockerignore b/sub/project_settings/{{ cookiecutter.__folder_name }}/frontend/.dockerignore index be3a7a0..71a9d07 100644 --- a/sub/project_settings/{{ cookiecutter.__folder_name }}/frontend/.dockerignore +++ b/sub/project_settings/{{ cookiecutter.__folder_name }}/frontend/.dockerignore @@ -1,8 +1,6 @@ -.yarn/cache *.log build cache cypress Dockerfile node_modules -omelette \ No newline at end of file diff --git a/sub/project_settings/{{ cookiecutter.__folder_name }}/frontend/Dockerfile b/sub/project_settings/{{ cookiecutter.__folder_name }}/frontend/Dockerfile index e241630..779b916 100644 --- a/sub/project_settings/{{ cookiecutter.__folder_name }}/frontend/Dockerfile +++ b/sub/project_settings/{{ cookiecutter.__folder_name }}/frontend/Dockerfile @@ -1,62 +1,30 @@ # syntax=docker/dockerfile:1 -FROM node:{{ cookiecutter.__node_version }}-slim as base -FROM base as builder - -RUN < Start Docker-based Plone Backend$(RESET)" + docker run -it --rm --name=backend -p 8080:8080 -e SITE=Plone $(DOCKER_IMAGE) + +## Storybook +.PHONY: storybook-start +storybook-start: ## Start Storybook server on port 6006 + @echo "$(GREEN)==> Start Storybook$(RESET)" + pnpm run storybook + +.PHONY: storybook-build +storybook-build: ## Build Storybook + @echo "$(GREEN)==> Build Storybook$(RESET)" + mkdir -p $(CURRENT_DIR)/.storybook-build + pnpm run build-storybook -o $(CURRENT_DIR)/.storybook-build + +## Acceptance +.PHONY: acceptance-frontend-dev-start +acceptance-frontend-dev-start: ## Start acceptance frontend in development mode + RAZZLE_API_PATH=http://127.0.0.1:55001/plone pnpm start + +.PHONY: acceptance-frontend-prod-start +acceptance-frontend-prod-start: ## Start acceptance frontend in production mode + RAZZLE_API_PATH=http://127.0.0.1:55001/plone pnpm build && pnpm start:prod + +.PHONY: acceptance-backend-start +acceptance-backend-start: ## Start backend acceptance server + docker run -it --rm -p 55001:55001 $(DOCKER_IMAGE_ACCEPTANCE) + +.PHONY: ci-acceptance-backend-start +ci-acceptance-backend-start: ## Start backend acceptance server in headless mode for CI + docker run -i --rm -p 55001:55001 $(DOCKER_IMAGE_ACCEPTANCE) + +.PHONY: acceptance-test +acceptance-test: ## Start Cypress in interactive mode + pnpm --filter @plone/volto exec cypress open --config-file $(CURRENT_DIR)/cypress.config.js --config specPattern=$(CURRENT_DIR)'/cypress/tests/**/*.{js,jsx,ts,tsx}' + +.PHONY: ci-acceptance-test +ci-acceptance-test: ## Run cypress tests in headless mode for CI + pnpm --filter @plone/volto exec cypress run --config-file $(CURRENT_DIR)/cypress.config.js --config specPattern=$(CURRENT_DIR)'/cypress/tests/**/*.{js,jsx,ts,tsx}' + +.PHONY: build-image +build-image: ## Build Docker Image + @DOCKER_BUILDKIT=1 docker build . -t $(IMAGE_NAME):$(IMAGE_TAG) -f Dockerfile --build-arg VOLTO_VERSION=$(VOLTO_VERSION) From 029673775880d3c2f16e1ebda7011eab6a532775 Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Mon, 20 May 2024 18:16:19 +0200 Subject: [PATCH 2/5] Better now --- .../.github/workflows/frontend.yml | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/project/{{ cookiecutter.__folder_name }}/.github/workflows/frontend.yml b/project/{{ cookiecutter.__folder_name }}/.github/workflows/frontend.yml index 0ccbc25..040e2c4 100644 --- a/project/{{ cookiecutter.__folder_name }}/.github/workflows/frontend.yml +++ b/project/{{ cookiecutter.__folder_name }}/.github/workflows/frontend.yml @@ -20,20 +20,20 @@ jobs: meta: runs-on: ubuntu-latest outputs: - BASE_TAG: ${{ steps.vars.outputs.BASE_TAG }} - VOLTO_VERSION: ${{ steps.vars.outputs.VOLTO_VERSION }} + BASE_TAG: {{"${{ steps.vars.outputs.BASE_TAG }}"}} + VOLTO_VERSION: {{ "${{ steps.vars.outputs.VOLTO_VERSION }}" }} steps: - name: Checkout uses: actions/checkout@v4 - name: Compute several vars needed for the build id: vars run: | - echo "BASE_TAG=sha-$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT + echo 'BASE_TAG=sha-$(git rev-parse --short HEAD)' >> $GITHUB_OUTPUT python3 -c 'import json; data = json.load(open("./mrs.developer.json")); print("VOLTO_VERSION=" + data["core"]["tag"])' >> $GITHUB_OUTPUT - name: Test vars run: | - echo "BASE_TAG=${{ steps.vars.outputs.BASE_TAG }}" - echo "VOLTO_VERSION=${{ steps.vars.outputs.VOLTO_VERSION }}" + echo 'BASE_TAG={{"${{ steps.vars.outputs.BASE_TAG }}"}}' + echo 'VOLTO_VERSION={{"${{ steps.vars.outputs.VOLTO_VERSION }}"}}' code-analysis: runs-on: ubuntu-latest @@ -62,38 +62,38 @@ jobs: - uses: actions/cache@{{ cookiecutter.__gha_version_cache }} name: Setup pnpm cache with: - path: ${{ env.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} + path: {{"${{ env.STORE_PATH }}"}} + key: {{"${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}"}} restore-keys: | - ${{ runner.os }}-pnpm-store- + {{"${{ runner.os }}"}}-pnpm-store- - name: Install dependencies run: make install - name: Linting id: lint - if: ${{ success() || failure() }} + if: {{ "${{ success() || failure() }}" }} run: make lint - name: i18n sync id: i18n - if: ${{ success() || failure() }} + if: {{ "${{ success() || failure() }}" }} run: make ci-i18n - name: Unit Tests id: unit - if: ${{ success() || failure() }} + if: {{ "${{ success() || failure() }}" }} run: make test - name: Report - if: ${{ success() || failure() }} + if: {{ "${{ success() || failure() }}" }} run: | echo '# Code Analysis' >> $GITHUB_STEP_SUMMARY echo '| Test | Status |' >> $GITHUB_STEP_SUMMARY echo '| --- | --- |' >> $GITHUB_STEP_SUMMARY - echo '| Lint | ${{ steps.lint.conclusion == 'failure' && '❌' || ' ✅' }} |' >> $GITHUB_STEP_SUMMARY - echo '| i18n | ${{ steps.i18n.conclusion == 'failure' && '❌' || ' ✅' }} |' >> $GITHUB_STEP_SUMMARY - echo '| Unit Tests | ${{ steps.unit.conclusion == 'failure' && '❌' || ' ✅' }} |' >> $GITHUB_STEP_SUMMARY + {{ "echo '| Lint | ${{ steps.lint.conclusion == 'failure' && '❌' || ' ✅' }} |' >> $GITHUB_STEP_SUMMARY" }} + {{ "echo '| i18n | ${{ steps.i18n.conclusion == 'failure' && '❌' || ' ✅' }} |' >> $GITHUB_STEP_SUMMARY" }} + {{ "echo '| Unit Tests | ${{ steps.unit.conclusion == 'failure' && '❌' || ' ✅' }} |' >> $GITHUB_STEP_SUMMARY " }} release: runs-on: ubuntu-latest From fabc672fe88f26882f902f7ecda21991cd61442e Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Mon, 20 May 2024 20:21:33 +0200 Subject: [PATCH 3/5] Try to fix tests --- project/cookiecutter.json | 1 + .../.github/workflows/frontend.yml | 2 +- sub/project_settings/cookiecutter.json | 4 ++-- .../{{ cookiecutter.__folder_name }}/frontend/Makefile | 2 +- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/project/cookiecutter.json b/project/cookiecutter.json index f74e4f9..42e3ad0 100644 --- a/project/cookiecutter.json +++ b/project/cookiecutter.json @@ -36,6 +36,7 @@ "1", "0" ], + "__npm_package_name": "{{ cookiecutter.frontend_addon_name }}", "__folder_name": "{{ cookiecutter.project_slug }}", "__python_package_name_upper": "{{ cookiecutter.python_package_name | pascal_case }}", "__node_version": "{{ cookiecutter.volto_version | node_version_for_volto }}", diff --git a/project/{{ cookiecutter.__folder_name }}/.github/workflows/frontend.yml b/project/{{ cookiecutter.__folder_name }}/.github/workflows/frontend.yml index 040e2c4..d32bee4 100644 --- a/project/{{ cookiecutter.__folder_name }}/.github/workflows/frontend.yml +++ b/project/{{ cookiecutter.__folder_name }}/.github/workflows/frontend.yml @@ -21,7 +21,7 @@ jobs: runs-on: ubuntu-latest outputs: BASE_TAG: {{"${{ steps.vars.outputs.BASE_TAG }}"}} - VOLTO_VERSION: {{ "${{ steps.vars.outputs.VOLTO_VERSION }}" }} + VOLTO_VERSION: {{"${{ steps.vars.outputs.VOLTO_VERSION }}"}} steps: - name: Checkout uses: actions/checkout@v4 diff --git a/sub/project_settings/cookiecutter.json b/sub/project_settings/cookiecutter.json index af33124..65e43ff 100644 --- a/sub/project_settings/cookiecutter.json +++ b/sub/project_settings/cookiecutter.json @@ -9,6 +9,7 @@ "language_code": "en", "volto_version": "{{ 'Yes' | latest_volto }}", "github_organization": "collective", + "__npm_package_name": "{{ cookiecutter.frontend_addon_name }}", "__folder_name": "{{ cookiecutter.project_slug }}", "__package_name": "{{ cookiecutter.python_package_name | package_name }}", "__package_namespace": "{{ cookiecutter.python_package_name | package_namespace }}", @@ -17,8 +18,7 @@ "__profile_language": "{{ cookiecutter.language_code|gs_language_code }}", "__locales_language": "{{ cookiecutter.language_code|locales_language_code }}", "__node_version": "{{ cookiecutter.volto_version | node_version_for_volto }}", - "_copy_without_render": [ - ], + "_copy_without_render": [], "_extensions": [ "cookieplone.filters.use_prerelease_versions", "cookieplone.filters.node_version_for_volto", diff --git a/sub/project_settings/{{ cookiecutter.__folder_name }}/frontend/Makefile b/sub/project_settings/{{ cookiecutter.__folder_name }}/frontend/Makefile index f760025..020504f 100644 --- a/sub/project_settings/{{ cookiecutter.__folder_name }}/frontend/Makefile +++ b/sub/project_settings/{{ cookiecutter.__folder_name }}/frontend/Makefile @@ -23,7 +23,7 @@ PLONE_VERSION=6 DOCKER_IMAGE=plone/server-dev:${PLONE_VERSION} DOCKER_IMAGE_ACCEPTANCE=plone/server-acceptance:${PLONE_VERSION} -ADDON_NAME='{{ cookiecutter.npm_package_name }}' +ADDON_NAME='{{ cookiecutter.__npm_package_name }}' IMAGE_NAME={{cookiecutter.__container_image_prefix}}-frontend IMAGE_TAG=latest VOLTO_VERSION = $(shell cat ./mrs.developer.json | python -c "import sys, json; print(json.load(sys.stdin)['core']['tag'])") From b4673f3193d133c195fe6149e0417139491af479 Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Mon, 20 May 2024 20:37:32 +0200 Subject: [PATCH 4/5] Finally --- sub/project_settings/cookiecutter.json | 3 +++ sub/project_settings/tests/test_cutter.py | 1 + 2 files changed, 4 insertions(+) diff --git a/sub/project_settings/cookiecutter.json b/sub/project_settings/cookiecutter.json index 65e43ff..ddf48b7 100644 --- a/sub/project_settings/cookiecutter.json +++ b/sub/project_settings/cookiecutter.json @@ -9,7 +9,10 @@ "language_code": "en", "volto_version": "{{ 'Yes' | latest_volto }}", "github_organization": "collective", + "container_registry": ["github", "docker_hub", "gitlab"], "__npm_package_name": "{{ cookiecutter.frontend_addon_name }}", + "__container_registry_prefix": "{{ cookiecutter.container_registry | image_prefix }}", + "__container_image_prefix": "{{ cookiecutter.__container_registry_prefix }}{{ cookiecutter.github_organization }}/{{ cookiecutter.project_slug }}", "__folder_name": "{{ cookiecutter.project_slug }}", "__package_name": "{{ cookiecutter.python_package_name | package_name }}", "__package_namespace": "{{ cookiecutter.python_package_name | package_namespace }}", diff --git a/sub/project_settings/tests/test_cutter.py b/sub/project_settings/tests/test_cutter.py index 0466455..eda2ebd 100644 --- a/sub/project_settings/tests/test_cutter.py +++ b/sub/project_settings/tests/test_cutter.py @@ -36,6 +36,7 @@ def test_variable_substitution(build_files_list, variable_pattern, cutter_result "backend/src/project/title/profiles/default/registry/plone.i18n.interfaces.ILanguageSchema.xml", "frontend/.dockerignore", "frontend/Dockerfile", + "frontend/Makefile", "frontend/packages/volto-project-title/src/index.js", ], ) From d5324464d241674fb8017f16015d17151008a191 Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Tue, 21 May 2024 09:13:18 +0200 Subject: [PATCH 5/5] Fix Readme RST in backend --- backend_addon/{{ cookiecutter.__folder_name }}/README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/backend_addon/{{ cookiecutter.__folder_name }}/README.md b/backend_addon/{{ cookiecutter.__folder_name }}/README.md index f8ab205..7ca026a 100644 --- a/backend_addon/{{ cookiecutter.__folder_name }}/README.md +++ b/backend_addon/{{ cookiecutter.__folder_name }}/README.md @@ -12,8 +12,7 @@ This package contains a simple volto configuration. -Installation ------------- +## Installation Install {{ cookiecutter.python_package_name }} with `pip`: