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

.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

.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

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 '';
+}

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...'));

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.