chore(pnpm): bootstrap project with pnpm

Author: balzdur

.dockerignore

@@ -12,4 +12,6 @@ README.md
 docker-compose.yml
 **/.DS_Store
 **/venv
-**/env
+**/env
+**/dist
+**/build

.github/workflows/build_and_deploy.yaml

@@ -46,24 +46,20 @@ jobs:
 
       - name: Build
         run: |
-          docker build \
-            --platform linux/amd64 \
-            --tag ${{env.TAG }} \
-            -f ./packages/app-builder/Dockerfile \
-            .
+          docker build . --target app-builder --tag ${{ env.TAG}}
 
       - name: Push
         run: |
-          docker push ${{env.TAG }}
+          docker push ${{ env.TAG }}
 
       - name: Deploy server
         run: |
           gcloud run deploy marble-front \
             --quiet \
-            --image="${{env.TAG }}" \
+            --image="${{ env.TAG }}" \
             --region="europe-west1" \
             --allow-unauthenticated \
-            --service-account=${{env.SERVICE_ACCOUNT }} \
+            --service-account=${{ env.SERVICE_ACCOUNT }} \
             --set-env-vars=ENV=${{ vars.ENV }},FIREBASE_API_KEY=${{ vars.FIREBASE_API_KEY }},FIREBASE_APP_ID=${{ vars.FIREBASE_APP_ID }},FIREBASE_AUTH_DOMAIN=${{ vars.FIREBASE_AUTH_DOMAIN }},FIREBASE_MESSAGING_SENDER_ID=${{ vars.FIREBASE_MESSAGING_SENDER_ID }},FIREBASE_PROJECT_ID=${{ vars.FIREBASE_PROJECT_ID }},FIREBASE_STORAGE_BUCKET=${{ vars.FIREBASE_STORAGE_BUCKET }},MARBLE_API_DOMAIN=${{ vars.MARBLE_API_DOMAIN }},NODE_ENV=${{ vars.NODE_ENV }},SESSION_MAX_AGE=${{ vars.SESSION_MAX_AGE }} \
             --set-secrets=SESSION_SECRET=COOKIE_SESSION_SECRET:latest \
             --port=8080

.github/workflows/check.yaml

@@ -11,17 +11,19 @@ jobs:
       actions: read
     steps:
       - uses: actions/checkout@v3
-
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
           node-version-file: '.tool-versions'
-          cache: 'npm'
+          cache: 'pnpm'
 
-      - run: npm ci
+      - run: pnpm install --frozen-lockfile
 
-      - run: npm run format:check
-      - run: npm run lint --workspaces
-      - run: npm run type-check --workspaces
-      - run: npm run test:all
-      - run: npm run build --workspaces --if-present
+      - run: pnpm run format:check
+      - run: pnpm run -r lint
+      - run: pnpm run -r type-check
+      - run: pnpm run test:all
+      - run: pnpm run -r build

.prettierignore

@@ -1,5 +1,6 @@
 # Add files here to ignore them from prettier formatting
 /.vscode/
+pnpm-lock.yaml
 
 # app-builder
 /packages/app-builder/.cache/

.tool-versions

@@ -1 +1,2 @@
 nodejs 20.2.0
+pnpm 8.6.8

Dockerfile

@@ -0,0 +1,28 @@
+FROM node:20-slim AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+COPY . /app
+WORKDIR /app
+
+FROM base AS prod-deps
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
+
+FROM base AS build
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+RUN pnpm run -r build
+
+FROM base AS app-builder
+ENV NODE_ENV=production
+ENV PORT=8080
+
+# To remove when nested package.json are correctly setup
+COPY --from=prod-deps /app/node_modules /app/node_modules
+
+COPY --from=prod-deps /app/packages/app-builder/node_modules/ /app/packages/app-builder/node_modules
+COPY --from=build /app/packages/app-builder/build /app/packages/app-builder/build
+COPY --from=build /app/packages/app-builder/public /app/packages/app-builder/public
+WORKDIR /app/packages/app-builder
+EXPOSE 8080
+CMD [ "pnpm", "exec", "remix-serve", "build"]
+

README.md

@@ -1,15 +1,52 @@
 # Marble Front Monorepo
 
-This is the frontend marble monorepo. We use `npm` to handle dependancies and `nx` as build system tool.
+This is the frontend marble monorepo. We use `pnpm` to handle dependancies.
 
 ## Getting started
 
-We recommand you look at [Nx](https://nx.dev/) documentation. For information, most of this monorepo follow the "Integrated Repo" philosophy.
+This README is a global README for the monorepo. Each package may have its own README. You can find them in the `packages/*/README.md` files.
 
-For VS Code users, we higlhy recommand the [official extension](https://nx.dev/core-features/integrate-with-editors#vscode-plugin:-nx-console). It will bring some UI on top of nx consol. It is based on the introspection of the monrepo `project.json` and `package.json` files, and thus can help you inspect/lauch all the targets of each projects.
+### Install pnpm
 
-> There is also some community extensions for WebStorm and Neovim
+```bash
+brew install pnpm
+```
 
-## Environment variables in Nx
+> NB: more installation options [here](https://pnpm.io/installation)
 
-Nx task runner comes with [a built in opinionated way to handle env variables](https://nx.dev/recipes/environment-variables/define-environment-variables)
+To enable shell autocompletion (works for bash, zsh and fish), run:
+
+```bash
+pnpm install-completion
+```
+
+### Install dependancies
+
+```bash
+pnpm install
+```
+
+### Work in a package
+
+Each packages are located in the `packages` folder. To work in a package, you can use the `--filter` option of `pnpm` to trigger the dedicated scripts present in each `packages/*/package.json`. Exemple to start the app builder in dev mode:
+
+```bash
+# This will run the dev script in the ./packages/app-builder/package.json
+pnpm --filter app-builder run dev
+```
+
+### Some usefull commands
+
+```bash
+# Start the builder app in dev mode
+pnpm --filter app-builder run dev
+
+# Generate the marble-api client
+pnpm --filter marble-api run generate-api
+
+# Start the storybook in dev mode
+pnpm --filter ui-design-system run storybook
+
+# Generate icons from svg files
+pnpm --filter ui-icons run generate-icons
+```