Add PR Preview support

.github/workflows/on_push_pr_preview.yml.yml

@@ -0,0 +1,25 @@
+name: '1 [on_push] Deploy PR version to Firebase for'
+
+on:
+  push:
+    branches:
+      - ops/prs-preview
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  deploy_on_firebase:
+    name: Deploy PR version to Firebase
+    uses: ./.github/workflows/on_workflow_pr_preview.yml
+    with:
+      ENV: 'testing'
+      PUSH_RELEASE_TO_SENTRY: false
+      CHANNEL: 'preview'
+      EXPIRES: '2d'
+      REF: 'refs/heads/ops/prs-preview'
+      CACHE_BUCKET_NAME: 'passculture-metier-ehp'
+    secrets:
+      GCP_EHP_SERVICE_ACCOUNT: ${{ secrets.GCP_EHP_SERVICE_ACCOUNT }}
+      GCP_EHP_WORKLOAD_IDENTITY_PROVIDER: ${{ secrets.GCP_EHP_WORKLOAD_IDENTITY_PROVIDER }}

.github/workflows/on_workflow_pr_preview.yml

@@ -0,0 +1,107 @@
+name: '2 [on_workflow/PR] Deploy PR version for validation'
+
+on:
+  workflow_call:
+    inputs:
+      ENV:
+        type: string
+        required: true
+      PUSH_RELEASE_TO_SENTRY:
+        description: 'If true, creates a release in Sentry and uploads sourcemaps'
+        type: boolean
+        default: false
+      CHANNEL:
+        type: string
+        required: true
+      EXPIRES:
+        type: string
+        default: '2d'
+      REF:
+        type: string
+        required: true
+      CACHE_BUCKET_NAME:
+        type: string
+        required: true
+    secrets:
+      GCP_EHP_SERVICE_ACCOUNT:
+        required: true
+      GCP_EHP_WORKLOAD_IDENTITY_PROVIDER:
+        required: true
+
+defaults:
+  run:
+    working-directory: '.'
+
+jobs:
+  deploy_on_firebase:
+    runs-on: ubuntu-22.04
+    if: ${{ github.actor != 'dependabot[bot]' }}
+    steps:
+      - uses: actions/[email protected]
+        with:
+          ref: ${{ inputs.REF }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+      - name: 'OpenID Connect Authentication'
+        if: ${{ !github.event.act }}
+        id: 'openid-auth'
+        uses: 'google-github-actions/auth@v2'
+        with:
+          workload_identity_provider: ${{ secrets.GCP_EHP_WORKLOAD_IDENTITY_PROVIDER }}
+          service_account: ${{ secrets.GCP_EHP_SERVICE_ACCOUNT }}
+      - name: 'Get Secret'
+        if: ${{ !github.event.act }}
+        id: 'secrets'
+        uses: 'google-github-actions/get-secretmanager-secrets@v2'
+        with:
+          secrets: |-
+            FIREBASE_TOKEN:passculture-metier-ehp/pc_native_${{ inputs.ENV }}_firebase_json
+        # ENTRY_TOKEN:passculture-metier-ehp/passculture-app-native-sentry-token
+      - name: 'Cache the node_modules'
+        if: ${{ !github.event.act }}
+        id: 'yarn-modules-cache'
+        uses: pass-culture-github-actions/[email protected]
+        with:
+          compression-method: 'gzip'
+          bucket: ${{ inputs.CACHE_BUCKET_NAME }}
+          path: |
+            **/node_modules
+          key: v1-yarn-pro-dependency-cache-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            v1-yarn-pro-dependency-cache-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+      - run: yarn install --immutable
+      - run: yarn build:${{ inputs.ENV }}
+        env:
+          # By default NodeJS processes are limited to 512MB of memory
+          # This is not enough for the build process when compiling sourcemaps
+          # Increases the limit so that the build doesnt fail
+          NODE_OPTIONS: --max_old_space_size=4096
+      - if: inputs.ENV != 'testing'
+        run: |
+          cat package.json | grep -E '"version": "[0-9]+.[0-9]+.[0-9]+"' | grep -Eo '[0-9]+.[0-9]+.[0-9]+' > build/version.txt
+      - name: 'Create Sentry release'
+        if: ${{ (inputs.PUSH_RELEASE_TO_SENTRY) && (!github.event.act) }}
+        uses: getsentry/action-release@v1
+        env:
+          SENTRY_AUTH_TOKEN: ${{ steps.secrets.outputs.SENTRY_TOKEN }}
+          SENTRY_ORG: sentry
+          SENTRY_PROJECT: pro
+          SENTRY_URL: https://sentry.passculture.team/
+        with:
+          sourcemaps: ./build
+          working_directory: .
+          version: ${{ inputs.CHANNEL }}
+          url_prefix: '~'
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        id: firebase-deploy
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: ${{ steps.secrets.outputs.FIREBASE_TOKEN }}
+          expires: ${{ inputs.EXPIRES }}
+          projectId: pc-native-${{ inputs.ENV }}
+          entryPoint: .
+          channelId: ${{ inputs.CHANNEL }}
+      - name: 'Firebase Deployment URL'
+        run: |
+          echo "::notice:: Firebase deployment is available at : ${{ steps.firebase-deploy.outputs.details_url }}"

ACT.md

@@ -0,0 +1,17 @@
+# ACT
+
+## Requirements
+
+- act
+- github cli
+- podman
+
+### Podman configuration
+
+```shell
+podman machine init --cpus 4 --memory 8192 --now gha-act
+```
+
+## Local testing
+
+act -W .github/workflows/pr.yml -P ubuntu-22.04=catthehacker/ubuntu:full-22.04 -s GITHUB_TOKEN="$(gh auth token)" --eventpath act/event.json --env-file .env.testing

act/event.json

@@ -0,0 +1,9 @@
+{
+    "act":true,
+    "inputs":{
+       "ENV":"testing",
+       "PUSH_RELEASE_TO_SENTRY":"false",
+       "CHANNEL":"pr-testing-foo",
+       "REF":"master"
+    }
+}

doc/development/general-info-web.md

@@ -16,7 +16,7 @@ In this guide, you will find explanations of the main aspects of the vite config
 There are 2 main files that contain the configuration for the web app:
 
 - `vite.config.js`
-- `public/index.html`
+- `src/index.html`
 
 Let's start by breaking down the `vite.config.js` file.
 
@@ -46,7 +46,7 @@ We of course use the `@vitejs/plugin-react` plugin. It enables fast refresh in d
 
 Then we wrote a custom plugin to handle libraries with files with a `.js` extension that actually contained `jsx` components. This plugin is only necessary during builds, so we set `apply: 'build'` in the plugin's configuration.
 
-There is also `vite-plugin-html` that allows us to easily pass variables to the entrypoint of our app: `index.html`. These variables are then used to set meta tags. In this plugin's configuration, if we set `entry: '/src/index.tsx'` and `template: 'public/index.html'` we don't need to add `<script type="module" src="/src/index.tsx"></script>` to `public/index.html`.
+There is also `vite-plugin-html` that allows us to easily pass variables to the entrypoint of our app: `index.html`. These variables are then used to set meta tags. In this plugin's configuration, if we set `entry: '/src/index.tsx'` and `template: 'src/index.html'` we don't need to add `<script type="module" src="/src/index.tsx"></script>` to `src/index.html`.
 
 `@sentry/vite-plugin` is another important plugin that allows us to upload sourcemaps to sentry. The `uploadLegacySourcemaps` option is currently needed since our self-hosted Sentry is using an older version of Sentry. Atm, our self-hosted Sentry is at `23.6.1` and if we trust [the information in this thread](https://github.com/getsentry/sentry-javascript-bundler-plugins/issues/360), we can remove the `uploadLegacySourcemaps` once it is upgraded to `23.6.2` (or newer).
 
@@ -100,7 +100,7 @@ We specify a few options :
   Uncaught (in promise) FirebaseError: Failed to obtain exclusive access to the persistence layer...
   ```
 
-## `public/index.html`
+## `src/index.html`
 
 In this file, we receive variables from `vite.config.js`.
 The template engine used by our plugin `vite-plugin-html` is EJS (Embedded JavaScript).
@@ -109,7 +109,7 @@ For example, we set the page's title this way:
 
 `<meta name="title" content="<%- TITLE %>" />`
 
-It is in this `public/index.html` file that we also set several meta tags.
+It is in this `src/index.html` file that we also set several meta tags.
 
 ## Building locally
 

firebase.json

@@ -2,8 +2,8 @@
   "functions": {
     "source": "server"
   },
-  "hosting":
-  [{
+  "hosting": [
+    {
       "target": "testing",
       "public": "build",
       "ignore": [
@@ -27,5 +27,6 @@
           "function": "serverTesting"
         }
       ]
-  }]
     }
+  ]
+}

server/src/app.ts

@@ -8,7 +8,7 @@ import { getVersion } from './routes/version'
 export const app = express()
 
 const options = {
-  // We set the index option at false because `public/index.html` is displayed instead of the homepage
+  // We set the index option at false because `src/index.html` is displayed instead of the homepage
   index: false,
 }
 

vite.config.js

@@ -68,7 +68,7 @@ export default ({ mode }) => {
       createHtmlPlugin({
         minify: true,
         entry: '/src/index.tsx',
-        template: 'public/index.html',
+        template: 'src/index.html',
         inject: {
           data: {
             TITLE: packageJson.author.name,