Initial commit

Author: sethfowler-datadog

.github/dependabot.yml

@@ -0,0 +1,8 @@
+# Enable automatic PRs for version updates:
+# https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+version: 2
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"

.github/workflows/publish.yaml

@@ -0,0 +1,50 @@
+# Based on: https://vitejs.dev/guide/static-deploy.html
+name: Publish to GitHub Pages
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch: # Allow manual invocations of this workflow
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+      - name: Setup NodeJS
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: npm
+      - run: npm install
+      - name: Build app with GitHub Pages base
+        run: npm run build -- --base /${{ github.event.repository.name }}
+      - name: Configure Pages (if this fails, set Pages source to GitHub Actions in repo settings)
+        uses: actions/configure-pages@v5
+      - name: Upload pages artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist
+  deploy:
+    needs: build
+
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+    permissions:
+      pages: write # To deploy to Pages
+      id-token: write # To verify the deployment originates from an appropriate source
+
+    # Deploy to the GitHub pages environment
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    # Allow one concurrent deployment
+    concurrency:
+      group: ${{ github.workflow }}-deploy
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy pages artifact
+        uses: actions/deploy-pages@v4
+        id: deployment

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Alex Palmer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,54 @@
+# Vite GitHub Pages deployment template
+
+A simple but robust deployment of a Vite app to GitHub Pages. This project uses React + TypeScript as an example, but [you can easily switch to a different stack by following the instructions below](#switching-away-from-react--typescript).
+
+[The Actions workflow](./.github/workflows/publish.yaml) is built from a combination of the [Vite documentation on static sites][vite-static], the documentation from the various GitHub Actions in use and my own wisdom.
+
+[vite-static]: https://vitejs.dev/guide/static-deploy.html
+
+## Create a new repo from this template
+
+Press the _Use this template_ button (or equivalent for your language) near where the _Code_ button usually is.
+[See GitHub's docs on creating a repository from a template][template-docs] for more details.
+
+Once created, the repo's Pages configuration needs to be switched to GitHub Actions mode.
+Go to the repo > _Settings_ > _Pages_ > and change _Source_ to **GitHub Actions**.
+[See _Publishing with a custom GitHub Actions workflow_ in GitHub's documentation][pages-actions-publishing].
+
+[template-docs]: https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template#creating-a-repository-from-a-template
+[pages-actions-publishing]: https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow
+
+## Switching away from React + TypeScript
+
+1. Create a new project using the desired create-vite template by [following the Vite getting started guide][vite-get-started].
+2. Copy the contents of the `.github` directory from this repo to your new project -- it'll work with any project generated from Vite's templates.
+
+[vite-get-started]: https://vitejs.dev/guide/
+
+## Fixing the broken Vite logo (fix now merged upstream!)
+
+When production building the app for GitHub Pages, you'll notice the that the Vite logo ends up broken.
+
+[I'm not the only one to have noticed](https://github.com/vitejs/vite/issues/10601). [A fix was suggested here](https://github.com/vitejs/vite/issues/7358), which I've implemented in this project.
+
+This occurs because the `img` `src` directly refers to the build-generated `/vite.svg` and React does not preprocess `src` attributes to add the configured `base`.
+The fix is to import `/vite.svg` just like any other resource in React:
+
+```ts
+import viteLogo from '/vite.svg'
+// ...
+<img src={viteLogo} className="logo" alt="Vite logo" />
+```
+
+To make things a bit more tricky, this issues does not show up when running `npm run dev` -- only when running `npm run build` (followed by `npm run preview` for testing locally):
+
+```shell
+# This will replicate the issue
+npm run build -- --base /test
+npm run preview -- --base /test
+
+# This will NOT replicate the issue
+npm run dev -- --base /test
+```
+
+[I've raised an MR to fix this](https://github.com/vitejs/vite/pull/12374) for anyone generating projects in the future. **Update 2023-03-11: Now merged!**

index.html

@@ -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>