-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(day06): bazel + vite + github action to deploy a static page
- Loading branch information
Showing
29 changed files
with
522 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| node_modules | ||
| challenges/day-02/node_modules | ||
| challenges/day-04/node_modules | ||
| challenges/day-06/node_modules |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| # Simple workflow for deploying static content to GitHub Pages | ||
| name: GitHub Pages | ||
|
|
||
| on: | ||
| # Allows you to run this workflow manually from the Actions tab | ||
| workflow_dispatch: | ||
|
|
||
| # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages | ||
| permissions: | ||
| contents: read | ||
| pages: write | ||
| id-token: write | ||
|
|
||
| # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. | ||
| # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. | ||
| concurrency: | ||
| group: "pages" | ||
| cancel-in-progress: false | ||
|
|
||
| jobs: | ||
| # Single deploy job since we're just deploying | ||
| deploy: | ||
| environment: | ||
| name: github-pages | ||
| url: ${{ steps.deployment.outputs.page_url }} | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - name: Checkout | ||
| uses: actions/checkout@v3 | ||
|
|
||
| - name: Install NodeJS | ||
| uses: actions/setup-node@v3 | ||
| with: | ||
| node-version-file: .nvmrc | ||
|
|
||
| - name: Install pnpm | ||
| uses: pnpm/action-setup@v2 | ||
| with: | ||
| run_install: false | ||
|
|
||
| - name: Get pnpm store directory | ||
| shell: bash | ||
| run: | | ||
| echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV | ||
| - name: Setup pnpm cache | ||
| uses: actions/cache@v3 | ||
| with: | ||
| path: ${{ env.STORE_PATH }} | ||
| key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} | ||
| restore-keys: | | ||
| ${{ runner.os }}-pnpm-store- | ||
| - name: Install Bazelisk | ||
| uses: bazelbuild/setup-bazelisk@v2 | ||
|
|
||
| - name: Setup bazel cache | ||
| uses: actions/cache@v3 | ||
| with: | ||
| path: "~/.cache/bazel" | ||
| key: bazel-linux | ||
|
|
||
| - name: Install NodeJS dependencies | ||
| run: pnpm install | ||
|
|
||
| - name: Build with Bazel | ||
| run: | | ||
| bazel build //tools:build_packages --runs_on=linux | ||
| bazel build //pages:github-pages | ||
| - name: Setup Pages | ||
| uses: actions/configure-pages@v3 | ||
|
|
||
| - name: Upload artifact | ||
| uses: actions/upload-pages-artifact@v2 | ||
| with: | ||
| # Upload entire repository | ||
| path: 'bazel-bin/pages/artifacts' | ||
|
|
||
| - name: Deploy to GitHub Pages | ||
| id: deployment | ||
| uses: actions/deploy-pages@v2 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| load("@npm//:defs.bzl", "npm_link_all_packages") | ||
| load("@npm//:vite/package_json.bzl", vite_bin = "bin") | ||
| load("@npm//:vitest/package_json.bzl", vitest_bin = "bin") | ||
|
|
||
| # This macro expands to a link_npm_package for each third-party package in package.json | ||
| # See https://docs.aspect.build/rules/aspect_rules_js/docs/pnpm | ||
| npm_link_all_packages(name = "node_modules") | ||
|
|
||
| package(default_visibility = ["//visibility:public"]) | ||
|
|
||
| filegroup( | ||
| name = "config", | ||
| srcs = [ | ||
| "index.html", | ||
| "package.json", | ||
| "tsconfig.json", | ||
| "tsconfig.node.json", | ||
| "vite.config.ts", | ||
| ], | ||
| ) | ||
|
|
||
| filegroup( | ||
| name = "vite_srcs_export", | ||
| srcs = glob(["src/**/*"]), | ||
| visibility = ["//visibility:public"], | ||
| ) | ||
|
|
||
| filegroup( | ||
| name = "vite_public_export", | ||
| srcs = glob(["public/**/*"]), | ||
| visibility = ["//visibility:public"], | ||
| ) | ||
|
|
||
| filegroup( | ||
| name = "vite_srcs_tests", | ||
| srcs = glob([ | ||
| "src/**/*.spec.ts", | ||
| "tests/**/*", | ||
| ]), | ||
| visibility = ["//visibility:public"], | ||
| ) | ||
|
|
||
| vite_bin.vite( | ||
| name = "build", | ||
| srcs = [ | ||
| ":config", | ||
| ":node_modules", | ||
| ":vite_public_export", | ||
| ":vite_srcs_export", | ||
| ], | ||
| args = ["build"], | ||
| chdir = package_name(), | ||
| out_dirs = ["canary"], | ||
| visibility = ["//visibility:public"], | ||
| ) | ||
|
|
||
| vitest_bin.vitest_test( | ||
| name = "ut_test", | ||
| args = [ | ||
| "run", | ||
| ], | ||
| chdir = package_name(), | ||
| data = [ | ||
| ":config", | ||
| ":node_modules", | ||
| ":vite_public_export", | ||
| ":vite_srcs_export", | ||
| ":vite_srcs_tests", | ||
| ], | ||
| visibility = ["//visibility:public"], | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| # Day 06 | ||
|
|
||
| ## Challenge description | ||
|
|
||
| Deploy static HTML to GitHub Pages with Bazel + GitHub Action. | ||
|
|
||
| ## Getting Started | ||
|
|
||
| ### Use PNPM to install dependencies | ||
|
|
||
| ```bash | ||
| pnpm install | ||
| ``` | ||
|
|
||
| ### Use PNPM to develop | ||
|
|
||
| ```bash | ||
| pnpm --filter day-06 dev | ||
| ``` | ||
|
|
||
| ### Use Bazel to build and test | ||
|
|
||
| ```bash | ||
| bazel build //challenges/day-06:build | ||
| bazel test //challenges/day-06:ut_test | ||
| ``` | ||
|
|
||
| ## Build Assets | ||
|
|
||
| - The output directory is `/canary` | ||
| - The public assets path is `/canary` | ||
|
|
||
| ## References | ||
|
|
||
| - Doc: [actions/upload-pages-artifact](https://github.com/actions/upload-pages-artifact) | ||
| - Doc: [aspect-build/bazel-lib - copy_to_directory](https://github.com/aspect-build/bazel-lib/blob/main/docs/copy_to_directory.md) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Vite + React + TS</title> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| <script type="module" src="/src/main.tsx"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| { | ||
| "name": "day-06", | ||
| "private": true, | ||
| "version": "0.0.0", | ||
| "type": "module", | ||
| "scripts": { | ||
| "dev": "vite" | ||
| }, | ||
| "dependencies": { | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/react": "^18.2.15", | ||
| "@types/react-dom": "^18.2.7" | ||
| } | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| #root { | ||
| max-width: 1280px; | ||
| margin: 0 auto; | ||
| padding: 2rem; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .logo { | ||
| height: 6em; | ||
| padding: 1.5em; | ||
| will-change: filter; | ||
| transition: filter 300ms; | ||
| } | ||
| .logo.bazel:hover { | ||
| filter: drop-shadow(0 0 2em #72ca71); | ||
| } | ||
| .logo.vite:hover { | ||
| filter: drop-shadow(0 0 2em rgba(100, 108, 255, 0.67)); | ||
| } | ||
| .logo.react:hover { | ||
| filter: drop-shadow(0 0 2em #61dafbaa); | ||
| } | ||
|
|
||
| @keyframes logo-spin { | ||
| from { | ||
| transform: rotate(0deg); | ||
| } | ||
| to { | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
|
|
||
| @media (prefers-reduced-motion: no-preference) { | ||
| a .logo.react { | ||
| animation: logo-spin infinite 20s linear; | ||
| } | ||
| } | ||
|
|
||
| .card { | ||
| padding: 2em; | ||
| } | ||
|
|
||
| .read-the-docs { | ||
| color: #888; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { useState } from 'react'; | ||
| import reactLogo from './assets/react.svg'; | ||
| import viteLogo from '/vite.svg'; | ||
| import bazelLogo from './assets/bazel.svg'; | ||
| import './App.css'; | ||
|
|
||
| function App() { | ||
| const [count, setCount] = useState(0); | ||
|
|
||
| return ( | ||
| <> | ||
| <div> | ||
| <a href="https://bazel.build" target="_blank"> | ||
| <img src={bazelLogo} className="logo bazel" alt="Bazel logo" /> | ||
| </a> | ||
| <a href="https://vitejs.dev" target="_blank"> | ||
| <img src={viteLogo} className="logo vite" alt="Vite logo" /> | ||
| </a> | ||
| <a href="https://react.dev" target="_blank"> | ||
| <img src={reactLogo} className="logo react" alt="React logo" /> | ||
| </a> | ||
| </div> | ||
| <h1>Bazel + Vite + React</h1> | ||
| <div className="card"> | ||
| <button onClick={() => setCount((count) => count + 1)}>count is {count}</button> | ||
| <p> | ||
| Edit <code>src/App.tsx</code> and save to test HMR | ||
| </p> | ||
| </div> | ||
| <p className="read-the-docs">Click on the Bazel, Vite and React logos to learn more</p> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default App; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.