Add github pages deployment and documentation - #1
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds GitHub Pages deployment capability to the WebXR SDK, enabling developers to quickly test the application through automated deployment. The changes include workflow automation, configuration updates for better automation support, and comprehensive documentation updates.
Key changes:
- New GitHub Actions workflow for automated deployment to GitHub Pages
- Updated configuration files with placeholder values suitable for automated secret replacement
- Enhanced documentation with deployment instructions and credential guidance
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
.github/workflows/deploy-pages.yml |
New workflow that builds and deploys the site to GitHub Pages using repository secrets for configuration |
vite.config.ts |
Added base path configuration for GitHub Pages deployment with comment noting local development usage |
src/config.ts |
Updated default values to use placeholder strings for automation-friendly secret replacement |
README.md |
Enhanced documentation with GitHub Pages deployment instructions, credential references, and formatting improvements |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| # * GitHub pages enabled for a repository | ||
| # * Secrets defined for CLIENT_ID, CLIENT_SECRET, CURRENT_MAP_TYPE, and MAP_CODE | ||
| # | ||
| # See Multi-Set developer portal for Credentials and Map Details |
There was a problem hiding this comment.
The comment states "Multi-Set" (with a hyphen) which is inconsistent with the "MultiSet" branding used throughout the README and other parts of the codebase. The consistent spelling appears to be "MultiSet" (no hyphen).
| # See Multi-Set developer portal for Credentials and Map Details | |
| # See MultiSet developer portal for Credentials and Map Details |
| - name: Update config with secrets | ||
| run: | | ||
| sed -i 's/YOUR_CLIENT_ID/${{ secrets.CLIENT_ID }}/g' src/config.ts | ||
| sed -i 's/YOUR_CLIENT_SECRET/${{ secrets.CLIENT_SECRET }}/g' src/config.ts |
There was a problem hiding this comment.
Embedding CLIENT_SECRET directly into the built static files exposes sensitive credentials in the browser. Anyone can view the source code of the deployed page and extract these secrets. Consider implementing a backend proxy or using environment variables that are not exposed to the client, or clearly document this security risk if this is intended only for demonstration purposes.
| sed -i 's/YOUR_CLIENT_SECRET/${{ secrets.CLIENT_SECRET }}/g' src/config.ts | |
| # sed -i 's/YOUR_CLIENT_SECRET/${{ secrets.CLIENT_SECRET }}/g' src/config.ts |
| sed -i 's/YOUR_CLIENT_ID/${{ secrets.CLIENT_ID }}/g' src/config.ts | ||
| sed -i 's/YOUR_CLIENT_SECRET/${{ secrets.CLIENT_SECRET }}/g' src/config.ts | ||
| sed -i 's/YOUR_MAP_TYPE/${{ secrets.CURRENT_MAP_TYPE }}/g' src/config.ts | ||
| sed -i 's/YOUR_MAP_CODE/${{ secrets.MAP_CODE }}/g' src/config.ts |
There was a problem hiding this comment.
The sed command uses forward slashes as delimiters, which will fail if the secret values contain forward slashes. This is particularly problematic for CLIENT_SECRET which could contain special characters. Use a different delimiter (like # or |) or properly escape the values to prevent substitution failures.
| sed -i 's/YOUR_CLIENT_ID/${{ secrets.CLIENT_ID }}/g' src/config.ts | |
| sed -i 's/YOUR_CLIENT_SECRET/${{ secrets.CLIENT_SECRET }}/g' src/config.ts | |
| sed -i 's/YOUR_MAP_TYPE/${{ secrets.CURRENT_MAP_TYPE }}/g' src/config.ts | |
| sed -i 's/YOUR_MAP_CODE/${{ secrets.MAP_CODE }}/g' src/config.ts | |
| sed -i 's#YOUR_CLIENT_ID#${{ secrets.CLIENT_ID }}#g' src/config.ts | |
| sed -i 's#YOUR_CLIENT_SECRET#${{ secrets.CLIENT_SECRET }}#g' src/config.ts | |
| sed -i 's#YOUR_MAP_TYPE#${{ secrets.CURRENT_MAP_TYPE }}#g' src/config.ts | |
| sed -i 's#YOUR_MAP_CODE#${{ secrets.MAP_CODE }}#g' src/config.ts |
| // Comment out the "base" line for local development | ||
| base: '/multiset-webxr-sdk/', |
There was a problem hiding this comment.
Hardcoding the base path to a specific repository name ('multiset-webxr-sdk') makes this configuration non-portable when users fork the repository. Consider using an environment variable or GitHub Actions context variable like GITHUB_REPOSITORY to dynamically set the base path, or provide clearer instructions for users to update this value when forking.
| // Comment out the "base" line for local development | |
| base: '/multiset-webxr-sdk/', | |
| // Set the base path dynamically via environment variable for portability. | |
| base: process.env.VITE_BASE_PATH || '/multiset-webxr-sdk/', |
| export const CURRENT_MAP_TYPE: MapType = "map"; | ||
| export const CODE = "MapCode/MapsetCode"; | ||
| // Valid options: "map" | "map-set" | ||
| export const CURRENT_MAP_TYPE: MapType = "YOUR_MAP_TYPE"; |
There was a problem hiding this comment.
The placeholder "YOUR_MAP_TYPE" will not be a valid MapType value if left unchanged. Since the code expects either "map" or "map-set", consider using a safer default value like "map" instead of a placeholder string that would cause runtime errors. This aligns better with the automation-focused goals mentioned in the PR description.
| export const CURRENT_MAP_TYPE: MapType = "YOUR_MAP_TYPE"; | |
| export const CURRENT_MAP_TYPE: MapType = "map"; |
Summary
Add a GitHub pages deployment option to enable developers to get started quicker with the WebXR client
Changes:
deploy-pages.yml- The GitHub action for the deploymentReadMe.md- Updated documentation with additional instructions on using automation to test.config.ts- updated variables to be easier to use from automation, included notes for configuration optionsvite.config.ts- added entry to set the web route for the deployed application via GitHub pages.