PR Deploy Preview 🤝 meets 🤝 Github Pages (#1527)

* Implemented pull request deployment preview * Updated the yarn version for better compatibility and in future and avoiding yarn.lock issues. * Removed unused libraries. * Removed and fixed react import. * Removed unused imports. * Fixed assets path used from public or public/svg folder
push-protocol · May 20, 2024 · 66a13f5 · 66a13f5
1 parent 151ce74
commit 66a13f5
Show file tree

Hide file tree

Showing 182 changed files with 11,510 additions and 13,621 deletions.
diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
@@ -0,0 +1,48 @@
+name: Deploy PR previews
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+    branches:
+      - main
+concurrency: preview-${{ github.ref }}
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Set up environment variables
+        run: |
+          echo "VITE_PR_PREVIEW_BASE=pr-${{ github.event.pull_request.number }}" >> $GITHUB_ENV
+          echo "VITE_APP_NODE_ENV=production" >> $GITHUB_ENV
+          echo "VITE_APP_DEPLOY_ENV=PREVIEW" >> $GITHUB_ENV
+          echo "VITE_APP_PUBLIC_URL=https://push-protocol.github.io/" >> $GITHUB_ENV
+          echo "ESLINT_NO_DEV_ERRORS=true" >> $GITHUB_ENV
+          echo "TSC_COMPILE_ON_ERROR=true" >> $GITHUB_ENV
+          echo "DISABLE_ESLINT_PLUGIN=true" >> $GITHUB_ENV
+          echo "GENERATE_SOURCEMAP=true" >> $GITHUB_ENV
+
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install and Build
+        if: github.event.action != 'closed' # You might want to skip the build if the PR has been closed
+        env:
+          VITE_APP_WALLETCONNECT_PROJECT_ID: ${{ secrets.VITE_APP_WALLETCONNECT_PROJECT_ID }}
+
+        run: |
+          yarn install
+          yarn build:pr:preview
+
+      - name: Deploy preview
+        uses: rossjrw/[email protected]
+        with:
+          source-dir: ./build/
+
+      - uses: rossjrw/[email protected]
+        if: github.event.action == 'closed' && !github.event.pull_request.merged
+        with:
+          source-dir: ./build/
+          action: remove
diff --git a/.yarn/releases/yarn-3.4.1.cjs b/.yarn/releases/yarn-3.4.1.cjs
diff --git a/.yarn/releases/yarn-4.2.2.cjs b/.yarn/releases/yarn-4.2.2.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1,2 +1,7 @@
-yarnPath: .yarn/releases/yarn-3.4.1.cjs
+compressionLevel: mixed
+
+enableGlobalCache: false
+
 nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.2.2.cjs
diff --git a/README.md b/README.md
diff --git a/basePath.js b/basePath.js
@@ -0,0 +1,10 @@
+export function getPreviewBasePath() {
+  if (typeof import.meta !== 'undefined' && import.meta.env) {
+    // Vite environment
+    return import.meta.env.VITE_PR_PREVIEW_BASE ? `/push-dapp/pr-preview/${import.meta.env.VITE_PR_PREVIEW_BASE}` : '';
+  } else if (typeof process !== 'undefined' && process.env) {
+    // Node.js environment (e.g., during the build process)
+    return process.env.VITE_PR_PREVIEW_BASE ? `/push-dapp/pr-preview/${process.env.VITE_PR_PREVIEW_BASE}` : '';
+  }
+  return '';
+}
diff --git a/build.mjs b/build.mjs
@@ -2,6 +2,7 @@ import chalk from 'chalk';
 import { parse } from 'envfile';
 import fs from 'fs';
 import readline from 'readline';
+import { getPreviewBasePath } from './basePath.js';
 
 const envPresets = {
   alpha: {
@@ -24,6 +25,10 @@ const envPresets = {
     VITE_APP_DEPLOY_ENV: 'PROD',
     VITE_APP_PUBLIC_URL: 'https://app.push.org/',
   },
+  preview: {
+    VITE_APP_DEPLOY_ENV: 'PREVIEW',
+    VITE_APP_PUBLIC_URL: `https://push-protocol.github.io${getPreviewBasePath()}`,
+  },
   // alpha: {
   //   VITE_APP_DEPLOY_ENV: 'ALPHA',
   //   VITE_APP_PUBLIC_URL: 'https://alpha.epns.io/',
@@ -48,13 +53,22 @@ const envPresets = {
 
 // Prep for deployment starts everything
 const prepForDeployment = async (appEnv) => {
-  console.log(chalk.green('Starting Custom Deployment Prebuild...' ));
+  console.log(chalk.green('Starting Custom Deployment Prebuild...'));
 
   // Test if app dev is passed, else fail
   let indexAppEnv = appEnv;
-  if (appEnv !== 'dev' && appEnv !== 'staging' && appEnv !== 'prod' && appEnv !== 'w2w' && appEnv !== 'alpha') {
+  if (
+    appEnv !== 'dev' &&
+    appEnv !== 'staging' &&
+    appEnv !== 'prod' &&
+    appEnv !== 'w2w' &&
+    appEnv !== 'alpha' &&
+    appEnv !== 'preview'
+  ) {
     console.log(
-      chalk.red('App Environment not set correctly... can only be dev, staging, prod, alpha or w2w. Please check and retry'), 
+      chalk.red(
+        'App Environment not set correctly... can only be dev, staging, prod, alpha or w2w. Please check and retry'
+      )
     );
     process.exit(1);
   }
@@ -79,6 +93,10 @@ const prepForDeployment = async (appEnv) => {
     indexAppEnv = 'prod';
   }
 
+  if (appEnv === 'preview_push') {
+    indexAppEnv = 'preview';
+  }
+
   await changeIndexHTML(indexAppEnv);
   await changeENV(appEnv);
 };
@@ -104,7 +122,7 @@ const changeIndexHTML = async (appEnv) => {
 
   const sitemaptxtcontent = fs.readFileSync(sitemapreplacepath, 'utf8');
   fs.writeFileSync(sitemappath, sitemaptxtcontent, { flag: 'w' });
-}
+};
 
 const changeENV = async (appEnv) => {
   console.log(chalk.green.dim('  -- Generating custom .env file...'));

diff --git a/index.html b/index.html
@@ -1,29 +1,71 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <base href="/">
+    <base href="/" />
     <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Ethereum Push Notification Service (EPNS) | Subscribe. Notify. Earn" />
-    <link rel="apple-touch-icon" href="/logo192.png" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#cf1c84" />
-    <meta name="msapplication-TileColor" content="#9f00a7" />
-    <meta name="theme-color" content="#ffffff" />
-
+    <link
+      rel="icon"
+      href="/favicon.ico"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1"
+    />
+    <meta
+      name="theme-color"
+      content="#000000"
+    />
+    <meta
+      name="description"
+      content="Ethereum Push Notification Service (EPNS) | Subscribe. Notify. Earn"
+    />
+    <link
+      rel="apple-touch-icon"
+      href="/logo192.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/favicon-16x16.png"
+    />
+    <link
+      rel="mask-icon"
+      href="/safari-pinned-tab.svg"
+      color="#cf1c84"
+    />
+    <meta
+      name="msapplication-TileColor"
+      content="#9f00a7"
+    />
+    <meta
+      name="theme-color"
+      content="#ffffff"
+    />
+
     <!-- Content Security Policy (CSP) to help add a layer of protection against Cross-Site Scripting (XSS), clickjacking, and other code injection attacks -->
     <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; object-src 'none'; frame-src 'none'; base-uri 'none';" /> -->
- 
+
     <!-- <script type="text/javascript" src="https://app.olvy.co/script.js" defer="defer"></script> -->
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="/site.webmanifest" />
+    <link
+      rel="manifest"
+      href="/site.webmanifest"
+    />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -34,27 +76,63 @@
     -->
     <!-- HTML Meta Tags -->
     <title>Push App (Previously EPNS) | Communication Protocol of Web3</title>
-    <meta name="description" content="Push App (Previously EPNS) | Communication Protocol of Web3">
+    <meta
+      name="description"
+      content="Push App (Previously EPNS) | Communication Protocol of Web3"
+    />
 
     <!-- Facebook Meta Tags -->
-    <meta property="og:url" content="https://app.push.org">
-    <meta property="og:type" content="website">
-    <meta property="og:title" content="Push App (Previously EPNS)">
-    <meta property="og:description" content="Push App (Previously EPNS) | Communication Protocol of Web3">
-    <meta property="og:image" content="https://app.push.org/previews/homepage.jpg">
+    <meta
+      property="og:url"
+      content="https://app.push.org"
+    />
+    <meta
+      property="og:type"
+      content="website"
+    />
+    <meta
+      property="og:title"
+      content="Push App (Previously EPNS)"
+    />
+    <meta
+      property="og:description"
+      content="Push App (Previously EPNS) | Communication Protocol of Web3"
+    />
+    <meta
+      property="og:image"
+      content="https://app.push.org/previews/homepage.jpg"
+    />
 
     <!-- Twitter Meta Tags -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta property="twitter:domain" content="app.push.org">
-    <meta property="twitter:url" content="https://app.push.org">
-    <meta name="twitter:title" content="Push App (Previously EPNS)">
-    <meta name="twitter:description" content="Push App (Previously EPNS) | Communication Protocol of Web3">
-    <meta name="twitter:image" content="https://app.push.org/previews/homepagetwitter.jpg">
+    <meta
+      name="twitter:card"
+      content="summary_large_image"
+    />
+    <meta
+      property="twitter:domain"
+      content="app.push.org"
+    />
+    <meta
+      property="twitter:url"
+      content="https://app.push.org"
+    />
+    <meta
+      name="twitter:title"
+      content="Push App (Previously EPNS)"
+    />
+    <meta
+      name="twitter:description"
+      content="Push App (Previously EPNS) | Communication Protocol of Web3"
+    />
+    <meta
+      name="twitter:image"
+      content="https://app.push.org/previews/homepagetwitter.jpg"
+    />
 
     <!-- Meta Tags Generated via https://www.opengraph.xyz -->
 
-     <!-- Start Single Page Apps for GitHub Pages -->
-     <script type="text/javascript">
+    <!-- Start Single Page Apps for GitHub Pages -->
+    <script type="text/javascript">
       // Single Page Apps for GitHub Pages
       // MIT License
       // https://github.com/rafgraph/spa-github-pages
@@ -65,16 +143,18 @@
       // When the single page app is loaded further down in this file,
       // the correct url will be waiting in the browser's history for
       // the single page app to route accordingly.
-      (function(l) {
-        if (l.search[1] === '/' ) {
-          var decoded = l.search.slice(1).split('&').map(function(s) { 
-            return s.replace(/~and~/g, '&')
-          }).join('?');
-          window.history.replaceState(null, null,
-              l.pathname.slice(0, -1) + decoded + l.hash
-          );
+      (function (l) {
+        if (l.search[1] === '/') {
+          var decoded = l.search
+            .slice(1)
+            .split('&')
+            .map(function (s) {
+              return s.replace(/~and~/g, '&');
+            })
+            .join('?');
+          window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash);
         }
-      }(window.location))
+      })(window.location);
     </script>
     <!-- End Single Page Apps for GitHub Pages -->
   </head>
@@ -83,7 +163,10 @@
     <div id="root"></div>
     <div id="portal"></div>
     <div id="onboard-container"></div>
-    <script type="module" src="/src/index.tsx"></script>
+    <script
+      type="module"
+      src="/src/index.tsx"
+    ></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.