Merge pull request #620 from devanshkansagra/feat/deploy-pr-previews

Implemented workflow to deploy preview of pr changes

.github/workflows/ci-pr.yml

@@ -0,0 +1,138 @@
+name: Deploy PR previews
+concurrency: preview-${{ github.ref }}
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+      pull-requests: write
+      pages: write
+      id-token: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "16.19.0"
+
+      - name: Install Dependencies
+        run: yarn
+
+      - name: Filter the packages
+        uses: dorny/paths-filter@v3
+        id: changes
+        with:
+          filters: |
+            react:
+              - 'packages/react/**'
+            ui-elements:
+              - 'packages/ui-elements/**'
+            layout_editor:
+              - 'packages/layout_editor/**'
+            docs:
+              - 'packages/docs/**'
+
+      - name: Create Build Directory
+        run: mkdir -p build/
+
+      - name: Build Storybook
+        if: steps.changes.outputs.react == 'true' && github.event.action != 'closed'
+        run: yarn build:storybook
+        working-directory: packages/react
+
+      - name: Prepare Build for Storybook
+        if: steps.changes.outputs.react == 'true' && github.event.action != 'closed'
+        run: mv -v packages/react/storybook-static/* build/
+
+      - name: Build UI-Elements
+        if: steps.changes.outputs.ui-elements == 'true' && github.event.action != 'closed'
+        run: yarn build:storybook
+        working-directory: packages/ui-elements
+
+      - name: Prepare Build for UI-Elements
+        if: steps.changes.outputs.ui-elements == 'true' && github.event.action != 'closed'
+        run: |
+          if [ -z "$(ls -A build/)" ]; then
+            mv -v packages/ui-elements/storybook-static/* build/
+          else
+            mkdir -p build/ui-elements
+            mv -v packages/ui-elements/storybook-static/* build/ui-elements/
+          fi
+
+      - name: Build Layout Editor
+        if: steps.changes.outputs.layout_editor == 'true' && github.event.action != 'closed'
+        run: |
+          if [ -z "$(ls -A build/)" ]; then
+            export BASE_URL=/EmbeddedChat/pulls/pr-${{ github.event.number }}/
+          else
+            export BASE_URL=/EmbeddedChat/pulls/pr-${{ github.event.number }}/layout_editor/
+          fi
+          yarn build
+        working-directory: packages/layout_editor
+
+      - name: Prepare build for Layout_editor
+        if: steps.changes.outputs.layout_editor == 'true' && github.event.action != 'closed'
+        run: |
+          if [ -z "$(ls -A build/)" ]; then
+            mv -v packages/layout_editor/dist/* build/
+          else
+            mkdir -p build/layout_editor
+            mv -v packages/layout_editor/dist/* build/layout_editor/
+          fi
+
+      - name: Setup Node.js for Docs
+        if: steps.changes.outputs.docs == 'true' && github.event.action != 'closed'
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18.x"
+
+      - name: "Install dependencies for docs"
+        if: steps.changes.outputs.docs == 'true' && github.event.action != 'closed'
+        run: yarn install
+        working-directory: packages/docs/
+
+      - name: Build Docs
+        if: steps.changes.outputs.docs == 'true' && github.event.action != 'closed'
+        run: |
+          if [ -z "$(ls -A build/)" ]; then
+            export BASEURL=/EmbeddedChat/pulls/pr-${{ github.event.number }}/
+          else
+            export BASEURL=/EmbeddedChat/pulls/pr-${{ github.event.number }}/docs
+          fi
+          yarn build
+        working-directory: packages/docs
+
+      - name: Prepare build for Docs
+        if: steps.changes.outputs.docs == 'true' && github.event.action != 'closed'
+        run: |
+          if [ -z "$(ls -A build/)" ]; then
+            mv -v packages/docs/build/* build/
+          else
+            mkdir -p build/docs
+            mv -v packages/docs/build/* build/docs/
+          fi
+
+      - uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: build
+          preview-branch: gh-deploy
+          umbrella-dir: pulls
+          action: auto
+
+      - uses: rossjrw/pr-preview-action@v1
+        if: github.event.action == 'closed' || github.event.pull_request.merged == true
+        with:
+          source-dir: build
+          action: remove

.github/workflows/deploy.yml

@@ -5,17 +5,19 @@ on:
     branches:
       - develop
 
-permissions:
-  contents: write
-  pages: write
-  id-token: write
-
 env:
   STORYBOOK_RC_HOST: "https://demo.qa.rocket.chat"
 
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+      pull-requests: write
+      pages: write
+      id-token: write
+
     environment:
       name: github-pages
       url: "https://rocketchat.github.io/EmbeddedChat/"

packages/docs/docusaurus.config.js

@@ -17,7 +17,7 @@ const config = {
   url: "https://rocketchat.github.io/",
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: "/EmbeddedChat/docs/",
+  baseUrl: process.env.BASEURL || "/EmbeddedChat/docs/",
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.

packages/layout_editor/vite.config.ts

@@ -11,5 +11,5 @@ export default defineConfig({
       },
     }),
   ],
-  base: "/EmbeddedChat/layout_editor"
+  base: process.env.BASE_URL || '/EmbeddedChat/layout_editor',
 });