split frontend by packages

.github/workflows/ci-frontend-size-limit.yml

@@ -14,7 +14,7 @@ jobs:
       CI_JOB_NUMBER: 1
     steps:
       - name: Checkout
-        uses: actions/checkout@v1
+        uses: actions/checkout@v3
 
       - name: Install pnpm
         uses: pnpm/[email protected]
@@ -27,4 +27,4 @@ jobs:
         uses: andresz1/size-limit-action@v1
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          directory: frontend
+          directory: frontend/apps/remark42

.github/workflows/ci-frontend.yml

@@ -15,18 +15,18 @@ on:
       - "!**.md"
 
 jobs:
-  check-translations:
+  translations:
     runs-on: ubuntu-latest
     strategy:
       matrix:
         node: [16.15.1]
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Install node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
 
@@ -51,68 +51,25 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: pnpm i --loglevel warn
+        run: pnpm i
         working-directory: ./frontend
 
       - name: Run translations check
-        run: pnpm run check:translation
-        working-directory: ./frontend
-
-  check-typescript:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [16.15.1]
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Install node
-        uses: actions/setup-node@v1
-        with:
-          node-version: ${{ matrix.node }}
-
-      - name: Install pnpm
-        uses: pnpm/[email protected]
-        id: pnpm-install
-        with:
-          version: 7
-          run_install: false
+        run: pnpm translation-check
+        working-directory: ./frontend/apps/remark42
 
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
-
-      - name: Setup pnpm cache
-        uses: actions/cache@v3
-        with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm i --loglevel warn
-        working-directory: ./frontend
-
-      - name: Run type check
-        run: pnpm run check:types
-        working-directory: ./frontend
-
-  lint:
+  checks:
     runs-on: ubuntu-latest
     strategy:
       matrix:
         node: [16.15.1]
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Install node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
 
@@ -140,8 +97,8 @@ jobs:
         run: pnpm i --loglevel warn
         working-directory: ./frontend
 
-      - name: Run linters
-        run: pnpm run lint
+      - name: Run checks
+        run: pnpm checks
         working-directory: ./frontend
 
   test:
@@ -152,10 +109,10 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Install node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
 
@@ -180,14 +137,14 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: pnpm i --loglevel warn
+        run: pnpm i
         working-directory: ./frontend
 
       - name: Collect tests coverage
-        run: pnpm run test --coverage
-        working-directory: ./frontend
+        run: pnpm coverage
+        working-directory: ./frontend/apps/remark42
 
       - name: Submit coverage
-        run: ${{ github.workspace }}/frontend/node_modules/.bin/codecov
+        run: ${{ github.workspace }}/frontend/apps/remark42/node_modules/.bin/codecov
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

.gitignore

@@ -17,7 +17,7 @@ debug.test
 remark42
 /bin/
 /backend/var/
-/backend/app/var/
+/var/
 /backend/web/
 /backend/*.html.tmpl
 compose-private-backend.yml

Dockerfile

@@ -1,3 +1,37 @@
+FROM --platform=$BUILDPLATFORM node:16.15.1-alpine AS frontend-deps
+
+ARG SKIP_FRONTEND_TEST
+ARG SKIP_FRONTEND_BUILD
+
+WORKDIR /srv/frontend
+
+COPY ./frontend/package.json ./frontend/pnpm-lock.yaml ./frontend/pnpm-workspace.yaml /srv/frontend
+COPY ./frontend/apps/remark42/package.json /srv/frontend/apps/remark42/package.json
+
+RUN \
+  if [[ -z "$SKIP_FRONTEND_BUILD" || -z "$SKIP_FRONTEND_TEST" ]]; then \
+    apk add --no-cache --update git && \
+    npm i -g pnpm; \
+  fi
+
+RUN --mount=type=cache,id=pnpm,target=/root/.pnpm-store/v3 \
+  if [[ -z "$SKIP_FRONTEND_BUILD" || -z "$SKIP_FRONTEND_TEST" ]]; then \
+    pnpm i; \
+  fi
+
+FROM --platform=$BUILDPLATFORM frontend-deps AS build-frontend
+
+ARG SKIP_FRONTEND_TEST
+ARG SKIP_FRONTEND_BUILD
+ENV CI=true
+
+WORKDIR /srv/frontend
+
+COPY ./frontend/ /srv/frontend/
+
+RUN [ -n "$SKIP_FRONTEND_TEST" ] && pnpm checks
+RUN [ -n "$SKIP_FRONTEND_BUILD" ] && pnpm build
+
 FROM umputun/baseimage:buildgo-v1.9.1 as build-backend
 
 ARG CI
@@ -25,53 +59,14 @@ RUN \
         cat /profile.cov_tmp | grep -v "_mock.go" > /profile.cov ; \
         golangci-lint run --config ../.golangci.yml ./... ; \
     else \
-    	echo "skip backend tests and linter" \
+      echo "skip backend tests and linter" \
     ; fi
 
 RUN \
     version="$(/script/version.sh)" && \
     echo "version=$version" && \
     go build -o remark42 -ldflags "-X main.revision=${version} -s -w" ./app
 
-FROM --platform=$BUILDPLATFORM node:16.15.1-alpine as build-frontend-deps
-
-ARG CI
-ARG SKIP_FRONTEND_BUILD
-ENV HUSKY_SKIP_INSTALL=true
-
-RUN if [ -z "$SKIP_FRONTEND_BUILD" ] ; then \
-    	apk add --no-cache --update git \
-    ; fi
-ADD frontend/package.json /srv/frontend/package.json
-ADD frontend/package-lock.json /srv/frontend/package-lock.json
-WORKDIR /srv/frontend
-RUN if [ -z "$SKIP_FRONTEND_BUILD" ] ; then \
-			npm i -g pnpm && \
-    	CI=true pnpm i --loglevel warn \
-    else \
-    	echo "skip frontend build" \
-    ; fi
-
-FROM --platform=$BUILDPLATFORM node:16.15.1-alpine as build-frontend
-
-ARG CI
-ARG SKIP_FRONTEND_TEST
-ARG SKIP_FRONTEND_BUILD
-ARG NODE_ENV=production
-
-COPY --from=build-frontend-deps /srv/frontend/node_modules /srv/frontend/node_modules
-ADD frontend /srv/frontend
-WORKDIR /srv/frontend
-RUN mkdir public
-RUN if [ -z "$SKIP_FRONTEND_BUILD" ] ; then \
-		if [ -z "$SKIP_FRONTEND_TEST" ] ; then \
-			npm run lint test check; \
-			else \
-    			echo "skip frontend tests and lint" ; npm run build \
-    	; fi \
-    ; fi
-RUN rm -rf ./node_modules
-
 FROM umputun/baseimage:app-v1.9.1
 
 WORKDIR /srv
@@ -84,7 +79,7 @@ RUN chmod +x /entrypoint.sh /usr/local/bin/backup /usr/local/bin/restore /usr/lo
 
 COPY --from=build-backend /build/backend/remark42 /srv/remark42
 COPY --from=build-backend /build/backend/templates /srv
-COPY --from=build-frontend /srv/frontend/public/ /srv/web
+COPY --from=build-frontend /srv/frontend/apps/remark42/public/ /srv/web/
 COPY docker-init.sh /srv/init.sh
 RUN chown -R app:app /srv
 RUN ln -s /srv/remark42 /usr/bin/remark42

Dockerfile.artifacts

@@ -1,30 +1,24 @@
-FROM node:16.15.1-alpine as build-frontend-deps
+FROM node:16.15.1-alpine AS frontend-deps
 
-ARG CI
-
-ENV SKIP_FRONTEND_TEST=true
 ENV CI=true
 
-ADD frontend/package.json /srv/frontend/package.json
-ADD frontend/package-lock.json /srv/frontend/package-lock.json
-RUN
-	cd /srv/frontend && \
-	apk add --no-cache --update git && \
-	npm i -g pnpm && \
-	pnpm i
+WORKDIR /srv/frontend
+
+COPY ./frontend/package.json ./frontend/pnpm-lock.yaml ./frontend/pnpm-workspace.yaml /srv/frontend
+COPY ./frontend/apps/remark42/package.json /srv/frontend/apps/remark42/package.json
+
+RUN apk add --no-cache --update git && npm i -g pnpm
+RUN --mount=type=cache,id=pnpm,target=/root/.pnpm-store/v3 pnpm i
 
-FROM node:16.15.1-alpine as build-frontend
+FROM frontend-deps AS build-frontend
+
+ENV NODE_ENV=production
+ENV CI=true
 
-ARG CI
-ARG NODE_ENV=production
-ENV SKIP_FRONTEND_TEST=true
-ENV HUSKY_SKIP_INSTALL=true
+WORKDIR /srv/frontend
 
-COPY --from=build-frontend-deps /srv/frontend/node_modules /srv/frontend/node_modules
-ADD frontend /srv/frontend
-RUN cd /srv/frontend && \
-    npm run build && \
-    rm -rf ./node_modules
+COPY ./frontend/ /srv/frontend/
+RUN pnpm build
 
 FROM umputun/baseimage:buildgo-v1.9.1 as build-backend
 
@@ -38,7 +32,7 @@ ADD backend /build/backend
 ADD README.md /build/
 ADD LICENSE /build/
 
-COPY --from=build-frontend /srv/frontend/public/ web
+COPY --from=build-frontend /srv/frontend/apps/remark42/public/ /build/backend/web/
 
 RUN \
     export WEB_ROOT=/build/backend/web && \
@@ -50,7 +44,7 @@ RUN \
     ls -la /build/backend/web/
 
 RUN \
-	version=$("/script/version.sh") && echo "version=${version}" && \
+  version=$("/script/version.sh") && echo "version=${version}" && \
     export GOFLAGS="-mod=vendor" && \
     GOOS=linux GOARCH=amd64 go build -o remark42.linux-amd64 -ldflags "-X main.revision=${version} -s -w" ./app && \
     GOOS=linux GOARCH=386 go build -o remark42.linux-386 -ldflags "-X main.revision=${version} -s -w" ./app && \

Makefile

@@ -22,7 +22,7 @@ dockerx:
 
 release:
 	docker build -f Dockerfile.artifacts --no-cache --pull --build-arg CI=true \
- 		--build-arg GITHUB_REF=$(GITHUB_REF) --build-arg GITHUB_SHA=$(GITHUB_SHA) -t remark42.bin .
+		--build-arg GITHUB_REF=$(GITHUB_REF) --build-arg GITHUB_SHA=$(GITHUB_SHA) -t remark42.bin .
 	- @docker rm -f remark42.bin 2>/dev/null || exit 0
 	- @mkdir -p bin
 	docker run -d --name=remark42.bin remark42.bin

compose-dev-frontend.yml

@@ -13,8 +13,8 @@ services:
       dockerfile: Dockerfile
       args:
         - SKIP_BACKEND_TEST=true
-        - SKIP_FRONTEND_BUILD=true
-        # - NODE_ENV=development
+        # - SKIP_FRONTEND_BUILD=true
+        # - SKIP_FRONTEND_TEST=true
 
     image: umputun/remark42:dev
     container_name: "remark42-dev"

frontend/.gitignore

@@ -1,7 +1,10 @@
 node_modules
 extracted-messages
-public
 *.log
 .env
 tsconfig.tsbuildinfo
 coverage
+.turbo
+public
+dist
+!remark42

frontend/.husky/post-commit

@@ -1,6 +1,4 @@
 # .husky/post-commit
 
-[ -n "$CI" ] && exit 0
-
 cd frontend
 git update-index --again

frontend/.husky/pre-commit

@@ -1,6 +1,4 @@
 # .husky/pre-commit
 
-[ -n "$CI" ] && exit 0
-
 cd frontend
 pnpm run lint-staged

frontend/apps/remark42/.lintstagedrc.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  './**/*.{ts,tsx}': ['pnpm lint --fix', 'pnpm format'],
+  './**/*.css': ['pnpm stylelint --fix', 'pnpm format'],
+  './apps/remark42/templates/**.html': ['pnpm stylelint --fix', 'pnpm format'],
+};