I'm trying to create a GitHub-Action that first uses Webpack to create a bundle.js file and then deploy my index.html and newly created bundle.js to Firebase hosting.
First I just pushed my bundle.js in my GitHub repository, but I since removed it via "git rm --cache public/bundle.js" (not sure if this is the exact command) and added bundle.js to my .gitignore.
The action does work (no error or crash) but it seems that Firebase does not use the newly packaged bundle.js, but instead uses an old version that might be cached somewhere?
firebase-hosting-pull-request.yml:
name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
build_and_preview:
if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- run: npm ci && npm run build
- uses: FirebaseExtended/action-hosting-deploy#v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_PROJECTLIBRARIAN }}'
projectId: projectlibrarian
npm run build in this case executes webpack --mode=production
My index.js (which is webpack'd into bundle.js) only contains a single log statement which I changed to test the GitHub-Action.
Link to the Repo if it helps someone
I'm wondering if I need to clear some kind of GitHub actions cache? or maybe the Firebase deploy action script I'm using isn't doing what I think it should be doing? What confusing me the most is where does Firebase get the old version of bundle.js!
Ok I have found two changes that fixed the problem.
Add channelId: live in my workflow yaml
Reload the site with the "Empty chache and Hard reload" developer option.
Related
I'm wondering how I would go about building my project in a sibling directory to the existing repo. The reason for this is that I will occasionally get errors when builds fail and leave something messed up in the build directory. It seems like it would be far more ideal to build in a separate directory, then if the build succeeds, move all files to the actual running directory and restart PM2. I know I can use working-directory in the .yml, but I'm not sure how exactly to write this to ensure that there won't be any downtime. If this isn't a good solution and anyone has any other ideas, I am open to them. Here's my current deploy file:
name: Staging Deploy
on:
push:
branches: [ "main" ]
jobs:
build:
runs-on: Staging
environment: Staging
strategy:
matrix:
node-version: [16.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- uses: actions/checkout#v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node#v3
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- run: npm install
- name: Create env file
run: |
touch .env
...create env file with repo secrets
- run: npm run build --if-present
- name: Restart PM2
id: restart_pm2
run: pm2 reload reponame
continue-on-error: true
- name: Start PM2
if: steps.restart_pm2.outcome != 'success'
run: pm2 start pm2.config.js```
Modify the pm2 reload step to reload the app from the running directory. You can do this by specifying the path to the running directory as the working directory for the reload step. For example:
name: Restart PM2
id: restart_pm2
run: pm2 reload reponame
working-directory: .
continue-on-error: true
By following these steps, you should be able to build your project in a separate directory and move the built files to the running directory without any downtime. It's a good idea to test this process on a staging environment before deploying to production to ensure that everything is working as expected.
When I try to deploy nextjs project on firebase with GitHub action, I got an error message
Error: Cannot deploy a web framework to hosting because the experiment webframeworks is not enabled. To enable webframeworks run firebase experiments:enable webframeworks
I tried
firebase experiments:enable webframeworks
from my computer but it still did not work.
Here is the yaml file for the GitHub action.
name: Deploy to Firebase Hosting on merge
'on':
push:
branches:
- main
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- run: npm ci && npm run build
- uses: FirebaseExtended/action-hosting-deploy#v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
channelId: live
projectId: my-project
Could you help me to enable webframeworks with GitHub actions?
Thanks!
You can enable webframeworks by updating the yaml like so:
- uses: FirebaseExtended/action-hosting-deploy#v0
with:
# ...
env:
FIREBASE_CLI_EXPERIMENTS: webframeworks
The pull request that implemented the feature is: firebase-tools#5069
This feature was introduced at version v11.14.2.
I'm on the third module of this AWS tutorial to build a React app with AWS, Amplify and GraphQL but the build keeps breaking. When I ran amplify push --y the CLI generated ./src/aws-exports.js and added the same file to the .gitignore. So I'm not surprised the build is failing, since that file isn't included when I push my changes.
So I'm not sure what to do here. Considering it's automatically added to the .gitignore I'm hesitant to remove it.
Any suggestions?
I'm assuming you are trying to build your app in a CI/CD environment?
If that's the case then you need to build the backend part of your amplify app before you can build the frontend component.
For example, my app is building from the AWS amplify console and in my build settings I have
version: 0.1
backend:
phases:
build:
commands:
- '# Execute Amplify CLI with the helper script'
- amplifyPush --simple
frontend:
phases:
preBuild:
commands:
- yarn install --frozen-lockfile
build:
commands:
- yarn build
artifacts:
baseDirectory: build
files:
- "**/*"
cache:
paths:
- node_modules/**/*
Note that the backend is building first with the amplifyPush --simple command. This is what generates the aws-exports.js file.
The 'aws-exports.js' file gets created automatically when AWS Amplify runs the CI/CD deployment build process and gets configured with the appropriate settings for the environment you are deploying to.
And for this reason it is included in the .gitignore. You don't want your local test configuration to be used in your production deployment for example.
As per Matthe's answer above the should be generated when the build script runs the 'amplifyPush' command. For some reason this is not working for me at the moment though!
AWS added support to automatically generate the aws-exports.js at build time to avoid getting the error: https://docs.aws.amazon.com/amplify/latest/userguide/amplify-config-autogeneration.html
I recently moved into GitHub actions, so what I'm trying to do is host my react project in firebase when a push is done. And I used GitHub actions to this CI/CD process. And this is the main.yml that I have right now.
name: Build and Deploy
on:
push:
branches:
- master
jobs:
build:
name: Build
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout#master
- name: Install Dependencies
working-directory: ./my-app
run: npm install
- name: Build
working-directory: ./my-app
run: npm run build
deploy:
name: Deploy
needs: build
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout#master
- name: Deploy to Firebase
uses: w9jds/firebase-action#master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
And I somehow manage to set the working directory when npm installation and project building. But in deployment I'm keep getting this error,
So what I have understood is, this error occurs due to the working directory problem. So my current project structure looks like this.
. (root of my GitHub repository)
└── my-app
├── firebase.json <-- Git Hub action must point to this sub-dir
└── my-app-mobile
├── packages.json
So how should I do this within my firebase deployment process? If I'm wrong with the problem, What would be the problem and the answer? It seems I can't use working-directory: ./my-app with uses:
I looked at the documentation for the firebase CLI and didn't see any way to set the path to your firebase.json via a CLI parameter. There is, however, an environment variable that stores the root directory. It's in the context of predeploy and postdeploy hooks though, so I'm not sure if the CLI will respect it.
$PROJECT_DIR — The root directory containing firebase.json
https://firebase.google.com/docs/cli#environment_variables
The w9jds/firebase-action you are using is just a wrapper around the CLI. I'm not sure if this will work but you could try setting the project directory as follows. The reason the variable is set in a separate step is because you cannot evaluate expressions in env sections. See this answer for more detail. Container actions like w9jds/firebase-action will have access to the variable without passing it directly via env.
- name: Set project dir environment var
run: echo ::set-env name=PROJECT_DIR::"$GITHUB_WORKSPACE/my-app"
- name: Deploy to Firebase
uses: w9jds/firebase-action#master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
If that doesn't work, an alternative is to fork w9jds/firebase-action and add a PROJECT_PATH parameter to the entrypoint.sh script here:
https://github.com/w9jds/firebase-action/blob/master/entrypoint.sh
Update: I raised a PR to add a PROJECT_PATH parameter to w9jds/firebase-action. You can now use the action as follows.
- name: Deploy to Firebase
uses: w9jds/firebase-action#master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
PROJECT_PATH: ./my-app
I try to deploy my angular application on firebase using gitlab pipeline.
I followed this guide and I write a gitlab-ci file more simplified for starting.
image: node:latest
cache:
paths:
- node-modules/
stages:
- deploy
deploy:
stage: deploy
environment:
name: development
script:
- npm install -g firebase-tools
- npm install
- npm run builddev
- npm run deploy
only:
- master
Everything work until last command when I have this error
but if from terminal I run
firebase deploy --project test-1c121
everything work fine
Check your package.json file in scripts section. You probably have a typo in deploy because npm runs into problem with running firebse command and you want to run firebase.