From 24d002247e7f7ec8c93a86076b3f1368436a7425 Mon Sep 17 00:00:00 2001 From: Deryk DeGuzman Date: Fri, 12 Jan 2024 12:23:56 -0800 Subject: [PATCH] chore: deploy dev page as github page on PR merge --- .github/workflows/deploy-pages-site.yml | 52 ++++++++++ dev/build.js | 4 + dev/buildConfigs.js | 13 +++ dev/devServer.js | 13 +-- dev/public/index.html | 2 +- package.json | 1 + src/index.tsx | 131 ++++++++++++------------ 7 files changed, 137 insertions(+), 79 deletions(-) create mode 100644 .github/workflows/deploy-pages-site.yml create mode 100644 dev/build.js create mode 100644 dev/buildConfigs.js diff --git a/.github/workflows/deploy-pages-site.yml b/.github/workflows/deploy-pages-site.yml new file mode 100644 index 0000000..864f22e --- /dev/null +++ b/.github/workflows/deploy-pages-site.yml @@ -0,0 +1,52 @@ +name: Deploy to GitHub Pages +on: + push: + branches: [chore/create_pages_site] + +permissions: + contents: read + pages: write + id-token: write + +# Allow one concurrent deployment +concurrency: + group: "pages" + cancel-in-progress: true + +jobs: + # Build job + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v3 + + - name: Setup Pages + uses: actions/configure-pages@v1 + + - name: Install Dependencies + run: npm install + + - name: Build react-search Package + run: npm run build + + - name: Build Page Script + run: npm run buildDevScript + + - name: Upload artifact + uses: actions/upload-pages-artifact@v2 + with: + # Upload entire repository + path: "dev/public" + + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v1 diff --git a/dev/build.js b/dev/build.js new file mode 100644 index 0000000..f80fcfb --- /dev/null +++ b/dev/build.js @@ -0,0 +1,4 @@ +const { build } = require("esbuild"); +const { config } = require("./buildConfigs"); + +build(config); diff --git a/dev/buildConfigs.js b/dev/buildConfigs.js new file mode 100644 index 0000000..6daf242 --- /dev/null +++ b/dev/buildConfigs.js @@ -0,0 +1,13 @@ +module.exports = { + config: { + bundle: true, + define: { + "process.env.NODE_ENV": JSON.stringify( + process.env.NODE_ENV || "development" + ), + }, + entryPoints: ["dev/index.tsx"], + outfile: "dev/public/script.js", + sourcemap: true, + }, +}; diff --git a/dev/devServer.js b/dev/devServer.js index 9d6ba16..6b3a5ad 100644 --- a/dev/devServer.js +++ b/dev/devServer.js @@ -2,23 +2,14 @@ const esbuild = require("esbuild"); const chokidar = require("chokidar"); const liveServer = require("live-server"); const { esm } = require("../buildConfigs"); +const { config: devScriptBuildConfig } = require("./buildConfigs"); (async () => { // Builder for the react-search package const pkgBuilder = await esbuild.context(esm); // Builder for the development page - const devPageBuilder = await esbuild.context({ - bundle: true, - define: { - "process.env.NODE_ENV": JSON.stringify( - process.env.NODE_ENV || "development" - ), - }, - entryPoints: ["dev/index.tsx"], - outfile: "dev/public/script.js", - sourcemap: true, - }); + const devPageBuilder = await esbuild.context(devScriptBuildConfig); chokidar // Watch for changes to dev env code or react-search build diff --git a/dev/public/index.html b/dev/public/index.html index 3c10ca9..dd7504b 100644 --- a/dev/public/index.html +++ b/dev/public/index.html @@ -8,6 +8,6 @@
- + diff --git a/package.json b/package.json index 4f5b360..08521ca 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "types": "dist/index.d.ts", "scripts": { "build": "npm run clean && node build.js && tsc --emitDeclarationOnly --outDir dist", + "buildDevScript": "node dev/build.js", "clean": "rimraf dist", "test": "echo \"Error: no test specified\" && exit 1", "dev": "npm run build && node dev/devServer.js" diff --git a/src/index.tsx b/src/index.tsx index 77f8823..5332050 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -23,7 +23,6 @@ import { SearchResult } from "./SearchResult"; import { SearchModal } from "./SearchModal"; import { useSearchHistory } from "./useSearchHistory"; import "./_index.scss"; -import { BrowserRouter } from "react-router-dom"; import { SearchInput } from "SearchInput"; const getQueryParam = (urlParams: URLSearchParams, key: string) => { @@ -246,73 +245,71 @@ export const ReactSearch: FC = ({ return ( <> - -
-
- -
- - -
-
- - {isLoading ? ( -
- -
- ) : ( -
- -
- )} -
-
- - {resultsList && ( -
{resultsList}
- )} - +
+
+
- + + +
+
+ + {isLoading ? ( +
+ +
+ ) : ( +
+ +
+ )} +
+
+ + {resultsList && ( +
{resultsList}
+ )} + +
); };