github pages deployment

fdoganis · Oct 16, 2024 · 70b6172 · 70b6172
1 parent 26696c4
commit 70b6172
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 15 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,56 @@
+name: Build and deploy to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main']
+
+  # 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 one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: './dist'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 Basic THREE.js template using [Vite](https://vitejs.dev).
 
 Allows testing and modifying [official THREE.js examples](https://threejs.org/examples/) locally, at lightning speed.
-After trying Parcel and Rollup, this is probably the most developer-friendly to start THREE.js development in 2023 : it's insanely fast, it supports live reload out of the box, while remaining simple to use and to extend.
+After trying Parcel and Rollup, this is probably the most developer-friendly to start THREE.js development in 2024 : it's insanely fast, it supports live reload out of the box, while remaining simple to use and to extend.
 
 ## Batteries included
 
@@ -12,6 +12,8 @@ Pre-configured to support :
 - ammo.js wasm physics library
 - VSCode launch scripts
 - THREE.js type definitions : for IntelliSense in VS Code
+- recommended VS Code extensions
+- deployment
 
 Have a look at vite.config.js and customize it to your needs (additional libraries, file formats etc.).
 
@@ -21,16 +23,17 @@ Install [Node.js](https://nodejs.org)
 
 - Clone or download repo
 - run `npm install` : fetches and install all dependencies
-- `npm run build` : packages all code and resources into the `dist` folder
 - `npm run dev` : launches a server and opens your browser in `https://localhost:5173` by default
-- Edit your code : your changes are reflected instantly!
+  - Edit your code : your changes are reflected instantly!
+- `npm run build` : packages all code and resources into the `dist` folder, ready for deployment.
+
 
 ## HTTPS
 
-HTTPS is required to use some features such as the WebXR API
+HTTPS is required to use the WebXR API
 
 
-### Using Cloudflare Tunnel for free without a domain (recommended)
+### Using Cloudflare Tunnel for free without an account or a domain (recommended)
 
   - Install [Homebrew](https://brew.sh)
 
@@ -86,3 +89,43 @@ Check these tunneling alternatives such as `ngrok` or `zrok` for simple personal
 In order to use `https`, copy your certificates to the `.cert` folder, and change the `serve` command to:
 
 `"serve": "http-server dist -S -C .cert/cert.pem -K .cert/key.pem`
+
+## Deploying the App with GitHub Pages
+
+(original: https://github.com/meta-quest/webxr-first-steps?tab=readme-ov-file#build-and-deploy)
+
+This repository includes a ready-to-use GitHub Actions workflow located at `.github/workflows/deploy.yml`, which automates both the build and deployment to GitHub Pages. Once enabled, every time you push changes to the `main` branch, a new build will automatically be deployed.
+
+#### Steps to Enable GitHub Pages Deployment:
+
+0. **IMPORTANT: Set the `base` variable** in `vite.config.js` (default name `/three_vite`) to the actual name of your repository. Your app will be deployed to https://[GITUSERNAME].github.io/[REPOSITORY_NAME] (for example https://fdoganis.github.io/three_vite)
+1. **Fork this repository** to your own GitHub account.
+2. Navigate to your forked repository’s **Settings**.
+3. Scroll down to the **Pages** section.
+4. Under **Build and Deployment**, change the **Source** to **GitHub Actions**.
+
+Once this is set, GitHub Actions will handle the build and deployment process automatically. Any time you push changes to the `main` branch, the app will be built and deployed to GitHub Pages without any additional manual steps.
+
+You can monitor the status of the deployment job or manually re-run it via the **Actions** tab in your GitHub repository.
+
+### Deploying to Your Own Hosting Solution
+
+If you prefer to host the app yourself, you’ll need to manually build the app and then deploy the generated files to your hosting provider.
+
+To generate the build, run the following command:
+
+```bash
+npm run build
+```
+
+This will create a `dist` folder containing the static files for the app. You can then upload these files to your hosting platform of choice.
+
+
+# Credits
+
+- Template code inspired by https://threejs.org/examples/webxr_ar_cones.html 
+
+- Some very interesting features (emulator, github pages deployment) have been borrowed from https://github.com/meta-quest/webxr-first-steps 
+
+  - Make sure to check this excellent tutorial out! Even if it is mostly focused on VR, it is a great introduction on how to combine WebXR with THREE.js.
+  - See [Deployment Instructions](https://github.com/meta-quest/webxr-first-steps?tab=readme-ov-file#build-and-deploy)
diff --git a/vite.config.js b/vite.config.js
@@ -3,25 +3,38 @@ import { viteStaticCopy } from 'vite-plugin-static-copy';
 import glsl from 'vite-plugin-glsl';
 
 export default defineConfig({
+    base: "/three_vite",
     clearScreen: false,
+    optimizeDeps: {
+        esbuildOptions: {
+            supported: {
+                'top-level-await': true
+            }
+        }
+    },
+    esbuild: {
+        supported: {
+            'top-level-await': true
+        }
+    },
     build: {
-        sourcemap: true
+        sourcemap: true,
     },
     server: {
         open: true
     },
     plugins: [
         viteStaticCopy({
-          targets: [
-              { src: 'node_modules/three/examples/jsm/libs/ammo.wasm.js', dest: 'jsm/libs/' },
-	      { src: 'node_modules/three/examples/jsm/libs/ammo.wasm.wasm', dest: 'jsm/libs/' },
-	      { src: 'node_modules/three/examples/jsm/libs/draco/gltf/draco_decoder.js', dest: 'jsm/libs/draco/gltf' },
-	      { src: 'node_modules/three/examples/jsm/libs/draco/gltf/draco_decoder.wasm', dest: 'jsm/libs/draco/gltf/' },
-	      { src: 'node_modules/three/examples/jsm/libs/draco/gltf/draco_encoder.js', dest: 'jsm/libs/draco/gltf/' },
-	      { src: 'node_modules/three/examples/jsm/libs/draco/gltf/draco_wasm_wrapper.js', dest: 'jsm/libs/draco/gltf/' }
-          ]
+            targets: [
+                { src: 'node_modules/three/examples/jsm/libs/ammo.wasm.js', dest: 'jsm/libs/' },
+                { src: 'node_modules/three/examples/jsm/libs/ammo.wasm.wasm', dest: 'jsm/libs/' },
+                { src: 'node_modules/three/examples/jsm/libs/draco/gltf/draco_decoder.js', dest: 'jsm/libs/draco/gltf' },
+                { src: 'node_modules/three/examples/jsm/libs/draco/gltf/draco_decoder.wasm', dest: 'jsm/libs/draco/gltf/' },
+                { src: 'node_modules/three/examples/jsm/libs/draco/gltf/draco_encoder.js', dest: 'jsm/libs/draco/gltf/' },
+                { src: 'node_modules/three/examples/jsm/libs/draco/gltf/draco_wasm_wrapper.js', dest: 'jsm/libs/draco/gltf/' }
+            ]
         }),
         glsl()
-      ]
+    ]
 })