Add GitHub Actions workflows for GitHub Pages and Firebase Hosting deployment#16
Add GitHub Actions workflows for GitHub Pages and Firebase Hosting deployment#16
Conversation
…ployment Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com>
Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com>
|
@copilot i don't want your markdownf ile |
Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com>
|
@copilot use the gh-pages branch not master. |
…master Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR adds automated deployment workflows for GitHub Pages and Firebase Hosting, enabling continuous deployment on pushes to the master branch. The implementation sets up build pipelines that compile SCSS to CSS and JSX to JavaScript using gulp, then deploy the compiled assets.
Changes:
- Added GitHub Actions workflows for automated deployment to GitHub Pages and Firebase Hosting
- Configured Firebase hosting with ignore patterns for source files
- Updated .gitignore to exclude Firebase-specific files
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 11 comments.
| File | Description |
|---|---|
.github/workflows/deploy-github-pages.yml |
GitHub Pages deployment workflow with build and deploy jobs |
.github/workflows/deploy-firebase.yml |
Firebase Hosting deployment workflow with build and deploy steps |
firebase.json |
Firebase hosting configuration with public directory and ignore patterns |
.gitignore |
Excludes Firebase cache and config files |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| npm install -g bower | ||
| bower install --allow-root | ||
|
|
There was a problem hiding this comment.
The workflow installs bower globally using npm install -g, which may not be necessary and could lead to permissions issues. Since bower is being called with npx or the full path isn't needed, consider:
- Installing bower as a local devDependency in package.json
- Using npx bower install instead of installing globally
This approach is more consistent with modern npm practices and avoids potential permission issues.
| npm install -g bower | |
| bower install --allow-root | |
| npx bower install --allow-root |
| npx gulp react | ||
|
|
||
| - name: Deploy to Firebase | ||
| uses: FirebaseExtended/action-hosting-deploy@v0 |
There was a problem hiding this comment.
The Firebase deployment action uses version @v0 which is not a stable release tag. Using major version tags like @v0 can lead to unexpected breaking changes when the action is updated.
Consider pinning to a specific stable version or using @v0 with a commit SHA for better reproducibility and security. Check the action's releases at https://github.com/FirebaseExtended/action-hosting-deploy/releases for available stable versions.
| uses: FirebaseExtended/action-hosting-deploy@v0 | |
| uses: FirebaseExtended/action-hosting-deploy@v0.6.4 |
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: '18' | ||
| cache: 'npm' |
There was a problem hiding this comment.
The workflow configuration enables npm caching with 'cache: npm', but the repository doesn't appear to have a package-lock.json file. The npm cache feature requires a lock file to function properly.
Without a lock file:
- The cache won't be created or restored effectively
- Builds may use different dependency versions between runs
- Build reproducibility is not guaranteed
Consider either:
- Generating and committing a package-lock.json file (run npm install locally)
- Removing the cache configuration if not needed
- Using cache: 'npm' only after ensuring package-lock.json is present
This won't cause immediate failures but affects build performance and reproducibility.
| cache: 'npm' |
| @@ -0,0 +1,25 @@ | |||
| { | |||
| "hosting": { | |||
| "public": ".", | |||
There was a problem hiding this comment.
The Firebase configuration sets "public": "." which deploys the entire repository root. While the ignore patterns help filter out source files, this approach has issues:
- It's error-prone as you must remember to add new source file patterns to the ignore list
- The deployed site still includes all necessary runtime files mixed with the source repository structure
- It's inconsistent with Firebase Hosting best practices, which recommend a dedicated public/build directory
Consider changing this to a dedicated output directory (e.g., "public": "dist" or "public": "build") and updating the build process to copy necessary runtime files there. This provides better separation between source and deployment artifacts.
| "public": ".", | |
| "public": "dist", |
firebase.json
Outdated
| "package-lock.json", | ||
| "bower.json", | ||
| "config.rb", | ||
| ".imdone" |
There was a problem hiding this comment.
The ignore patterns in firebase.json are missing some common build tool and configuration files that should not be deployed:
- .github/ directory (contains workflow files)
- README.md (documentation file)
- LICENSE file
- config.rb (Compass/Sass configuration)
- cache.manifest
While the rewrite rule to /index.html will handle routing, these files could still be accessible if users know the exact paths. Consider adding these patterns to the ignore list for a cleaner deployment.
| ".imdone" | |
| ".imdone", | |
| "**/.github/**", | |
| "README.md", | |
| "LICENSE", | |
| "cache.manifest" |
| - name: Setup Node.js | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: '18' |
There was a problem hiding this comment.
The workflows specify Node.js version 18, but this project uses very old dependencies (gulp 3.8.7, gulp-sass 0.7.3, React 0.12.2, etc.) that may not be compatible with Node.js 18. These older gulp and gulp-sass versions were designed for Node.js 0.10-6.x era.
Consider either:
- Testing with Node.js 14 or 16 which have better compatibility with these legacy dependencies
- Updating the build tools and dependencies to modern versions if the project allows
This is a critical issue because the build will likely fail with Node.js 18, causing deployment failures.
| node-version: '18' | |
| node-version: '16' |
| - name: Setup Node.js | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: '18' |
There was a problem hiding this comment.
The workflow specifies Node.js version 18, but this project uses very old dependencies (gulp 3.8.7, gulp-sass 0.7.3, React 0.12.2, etc.) that may not be compatible with Node.js 18. These older gulp and gulp-sass versions were designed for Node.js 0.10-6.x era.
Consider either:
- Testing with Node.js 14 or 16 which have better compatibility with these legacy dependencies
- Updating the build tools and dependencies to modern versions if the project allows
This is a critical issue because the build will likely fail with Node.js 18, causing deployment failures.
| node-version: '18' | |
| node-version: '16' |
firebase.json
Outdated
| "firebase.json", | ||
| "**/.*", | ||
| "**/node_modules/**", | ||
| "**/bower_components/**", |
There was a problem hiding this comment.
The firebase.json configuration excludes "/bower_components/" but the application's index.html references files from bower_components directory (lines 7-12 of index.html). This will cause the deployed site to fail as critical JavaScript and CSS dependencies won't be available.
You need to either:
- Remove the bower_components exclusion from the ignore list
- Copy or bundle the required bower dependencies into the public directory during the build step
- Use a CDN for these dependencies and update index.html accordingly
This is a critical issue that will prevent the Firebase-hosted site from functioning.
| "**/bower_components/**", |
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: '18' | ||
| cache: 'npm' |
There was a problem hiding this comment.
The workflow configuration enables npm caching with 'cache: npm', but the repository doesn't appear to have a package-lock.json file. The npm cache feature requires a lock file to function properly.
Without a lock file:
- The cache won't be created or restored effectively
- Builds may use different dependency versions between runs
- Build reproducibility is not guaranteed
Consider either:
- Generating and committing a package-lock.json file (run npm install locally)
- Removing the cache configuration if not needed
- Using cache: 'npm' only after ensuring package-lock.json is present
This won't cause immediate failures but affects build performance and reproducibility.
| cache: 'npm' |
There was a problem hiding this comment.
@copilot please address this, perhaps yarn is a better value? if not applicable please use suggestion
There was a problem hiding this comment.
Removed the npm cache configuration from both workflows in 07a0031. Since there's no package-lock.json or yarn.lock file, caching isn't applicable. The workflows will still work correctly without it.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
- Change Node.js version from 18 to 16 for compatibility with legacy gulp dependencies - Use npx bower instead of global bower installation - Pin Firebase action to stable version v0.9.0 - Remove bower_components from Firebase ignore list (required by index.html) - Add additional ignore patterns (README, LICENSE, .github, cache.manifest) Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com>
GitHub Actions deployment workflows completed:
.github/workflowsdirectory structurefirebase.json).gitignoreto exclude Firebase cacheCreated Files:
.github/workflows/deploy-github-pages.yml- Workflow for GitHub Pages deployment.github/workflows/deploy-firebase.yml- Workflow for Firebase Hosting deploymentfirebase.json- Firebase Hosting configuration.gitignoreto exclude Firebase cache filesSecurity:
Compatibility:
Secrets Required:
FIREBASE_SERVICE_ACCOUNTandFIREBASE_PROJECT_IDBoth workflows trigger on push to gh-pages branch and can be manually triggered via workflow_dispatch.
Original prompt
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.