How can I use 'firebase login:ci' on a build server - node.js

I am running a nodejs build using Github Workflows and I want to be able to build my project and then immediately deploy it to my firebase project. Using firebase deploy. But if I want to use the firebase-tools I have to login on the build server. But there isn't a way to get authenticated via email and password etc. Is there anyway to enable me to get what I want to accomplish done? firebase-tools Inside my build script is "react-scripts build && firebase deploy"
This is my workflow file, nodejs.yml:
name: Node CI
on: [push]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [8.x, 10.x, 12.x]
steps:
- uses: actions/checkout#v1
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node#v1
with:
node-version: ${{ matrix.node-version }}
- name: npm install, build, and test
run: |
npm i -g firebase-tools
firebase login
npm ci
npm run build --if-present
npm test
env:
CI: true

You don't have to use firebase login on the CI system. All you have to do is follow the instructions in the documentation to integrate with any CI system.
Use the CLI with CI systems
The Firebase CLI requires a browser to complete authentication, but
the CLI is fully compatible with CI and other headless environments.
On a machine with a browser, install the Firebase CLI.
Start the signin process by running the following command:
firebase login:ci
Visit the URL provided, then sign in using a Google account.
Print a new refresh token. The current CLI session will not be affected.
Store the output token in a secure but accessible way in your CI system.
Use this token when running firebase commands. You can use either of the following two options:
Store the token as the environment variable FIREBASE_TOKEN. Your system will automatically use the token.
Run all firebase commands with the --token flag in your CI system. The order of precedence for token loading is flag,
environment variable, desired Firebase project.

Related

Trying to deploy Vue App to Azure App Service, results in Error: Cannot find module '../package.json'

I've got a simple Vue SPA that builds and can be served without problem locally, but when I try and build and deploy via GitHub Actions to an Azure App Service, it just results in the ':( Application Error' page when launching.
Below is the pretty much default workflow .yml, the app service configuration, and the error log from trying to build the app.
I assume the files are built from the /dist folder at /home/site/wwwroot, where node_modules are installed and package.json is generated.. but it doesn't seem like it is (there are no files when checking wwwroot, so build failed?)
Any help would be appreciated, I've been stuck on this for a whole day and will happily provide more info. I've also deployed the NodeJS backend to an app service without too much hassle, so I'm familiar with the process -- just can't get this frontend up!
name: Build and deploy Node.js app to Azure Web App - shelf-library
on:
push:
branches:
- main
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Set up Node.js version
uses: actions/setup-node#v1
with:
node-version: '16.x'
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
- name: Upload artifact for deployment job
uses: actions/upload-artifact#v2
with:
name: node-app
path: dist/
deploy:
runs-on: ubuntu-latest
needs: build
environment:
name: 'Production'
url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
steps:
- name: Download artifact from build job
uses: actions/download-artifact#v2
with:
name: node-app
- name: 'Deploy to Azure Web App'
id: deploy-to-webapp
uses: azure/webapps-deploy#v2
with:
app-name: 'shelf-library'
slot-name: 'Production'
publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_11D7C84BF0CE47B68181C49B9ED47D19 }}
package: .
Check the below steps to create VueJS and deploy to Azure App Service using Git Hub Actions.
Thanks #Anthony Salemo for the clear steps.
In Command prompt, run the below command to create a Vue App.
vue create myvueapp
Navigate to the root directory of the application cd myvueapp and run
yarn serve
or
npm run serve
Run npm run build command for production build.dist folder will be created.
Push the application to GitHub Repository.
You can check the code available in my GitHub Repository.
My GitHub folder structure
Create an Azure App service
Navigate to your App Service =>Deployment Center and select the code repo from your GitHub.
Initially I got the below content page when I tried to access the App.
Add the Startup Command in Configuration => General Settings.
pm2 serve /home/site/wwwroot/dist --spa --no-daemon
Initially even I got the same Application Error.
In Git Hub I can see the build and deploy action is not yet completed.
Wait for the build to deploy successfully.
My deployed folder structure in KUDU Console
Now Iam able to access the Application without any issues.
I saw you are running your stages with different agents, so I suppose that your issue could be resulted from that the configuration in the build stage agent could not be inherited into the deploy stage agent.
So you could test to add the npm task to install the vue-cli-service module in your deploy agent again.
==========================================================
Updated on 12/22
I suppose that in deploy stage, you could add the npm and node installation with below.
- name: Set up Node.js version
uses: actions/setup-node#v1
with:
node-version: '16.x'
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
- name: npm install, build, and test
run: |
npm install -g #vue/cli#latest
npm i -g #vue/cli-service-global
echo '<template><h1>Hello!</h1></template>' > App.vue
vue serve

Serve node.js app via GitHub Actions runner

I have a repo which attempts to serve an index.html file using
the NPM serve module in a GitHub action.
Here's what the action looks like (.github/workflows/deploy.yml):
name: test-serve-deploy
on: [push]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Check out repository code
uses: actions/checkout#v3
- run: echo "Clone complete"
- name: install
run: |
npm install
- name: serve
run: |
npm run serve
- run: echo "Status ${{ job.status }}"
I understand that the content in my repo is just an index.html file and could be served statically with GitHub Pages, but this is just a test repo I'm using to understand how GitHub actions work.
When the action runs, it predictably hangs on the npm run serve:
However, this URL returns a 404: http://jonbri.github.io/test-serve:3000
I'm sure I'm missing something fundamental about how these actions/runners work.
My goal is to have the GitHub repo not only deploy but also serve a Node.js app.
What steps would I need to take to get this working?
Github runners are ephemeral. They just run the commands you provide and exit.
They cannot serve pages. If you want to serve content, you might want to use your github runner to deploy your content to a provider such as netlify or aws s3, lambda etc.

How can I configure GitHub Actions to build my Azure Static Web App with a dependency on a private repository?

I've built an Azure Static Web App with one API function which has one dependency. This dependency sits in a private repository on GitHub. On my local dev machine I'm able to build the Functions app by downloading the dependency using SSH authentication. When trying to deploy to Azure using GitHub Actions I get the error Host key verification failed.
My GitHub Actions workflow is similar to the default workflow generated by Azure Static Web App, with the addition of using webfactory/ssh-agent for facilitating the SSH authentication on GitHub to retrieve the private repository Y and a run step with git clone for testing purposes:
# ... Same as on https://learn.microsoft.com/en-us/azure/static-web-apps/github-actions-workflow
jobs:
build_and_deploy_job:
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout#v2
with:
submodules: true
persist-credentials: false
- uses: webfactory/ssh-agent#v0.5.1
with:
ssh-private-key: ${{ secrets.SSH_PRIVATE }}
- run: |
git clone ssh://git#github.com/X/Y.git Z
ls -la Z
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy#v0.0.1-preview
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: "upload"
app_location: "/"
api_location: "api"
output_location: "build"
# ... Same as on https://learn.microsoft.com/en-us/azure/static-web-apps/github-actions-workflow
In my private repository Y I've added the public key associated to private key secrets.SSH_PRIVATE as a deploy key.
After running the workflow it shows the git clone command is ran correctly as the ls -la command results in displaying the directories and files in my private repository. However, the build process of my API (yarn install --prefer-offline --production) results in the error Host key verification failed when yarn is fetching the packages. As a result, GitHub Actions cannot download the dependency in my private repository, and cannot build the API. This ends with a failed workflow.
After analyzing Azure/static-web-apps-deploy#v0.0.1-preview I noticed it uses Oryx to start a Docker container for the build process of the Azure Static Web App. This container is unaware of the ssh-agent that was initialized using webfactory/ssh-agent on the host VM. As a result the yarn install triggered in Azure/static-web-apps-deploy#v0.0.1-preview couldn't download the dependency that was in my private repository and failed the installation.
To circumvent this I've refactored my private dependency to use it as a git submodule instead, because submodules can be loaded prior to the build process using actions/checkout. This was achieved by adding only two extra lines to the workflow file that is generated by Azure Static Web Apps. I've highlighted these two lines with a trailing # ADDED in the following snippet of my workflow file:
jobs:
build_and_deploy_job:
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout#v2
with:
ssh-known-hosts: "github.com" # ADDED
ssh-key: ${{ secrets.SSH_PRIVATE }} # ADDED
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy#v0.0.1-preview
...

Firebase deploy works in the console but not in bitbucket pipeline

I'm trying to deploy my webapp to firebase hosting through a bitbucket pipeline, It's not deploying correctly in the pipeline but in the console it works no problem. This is what I do in the console:
npm run build
firebase login:ci
firebase deploy --project $PROJECT_NAME
In the pipeline I'm running this YAML script:
image: node:10.15.3
pipelines:
default:
- step:
name: Install and Build App
caches:
- node
script:
- npm install
- CI=false npm run build
artifacts:
- build/
- step:
name: Deploy App to Firebase
deployment: production
script:
- pipe: atlassian/firebase-deploy:0.6.0
variables:
KEY_FILE: $KEY_FILE
PROJECT_ID: $PROJECT_ID
I think it might have to do with the .firebaserc but I'm not sure. this is the .firebaserc:
firebase target:apply hosting $PROJECT_ID $DOMAIN
Maybe someone can shed some light on why this isn't working, I'm new to pipeline scripts and I don't really see the issue, it succeeds in deploying to firebase hosting but It's not working at all on the actual domain.
When you run the command firebase login:ci that should generate a TOKEN, you add that token in Bitbucket in your Repository Settings > Repository Variables. What ever name you choose should match your pipeline. In my example I use FIREBASE_TOKEN_CI. When I commit my changes to bitbucket, it runs the pipeline, builds and deploys.
You can always modify your script in your package.json so in your cli you can run npm run build:prod like you would run npm run start, etc and use the build:prod in the yml.
here is an example:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build:prod": "ng build --prod=true"
}
CODE BELOW is a pipeline.yml I use for Ionic/Angular
NOTE: Artifacts is the folder your build files are generated after running build. Angular is called dist, so you might use dist/. My example uses www/** that is Ionics build output. You have some CI=False in your example, I have not seen that nor use that and my project builds and deploys. My second script is for cloud functions
- cd functions
- npm install
- cd ..
you can omit that part if you don't have functions. I have recently had a error about OAuth and I had to generate a new token with login:ci and replace my token, and it was working again for deploy. Hope this helps anyone. I had problems at first also and found a working format that I can adapt to other frameworks.
image: node:10.15.3
pipelines:
default:
- step:
name: Install, Build
caches:
- node
deployment: test
script:
- npm install
- npm run build:prod
artifacts:
- www/**
- step:
name: Deploy to Firebase
deployment: production
script:
- cd functions
- npm install
- cd ..
- pipe: atlassian/firebase-deploy:0.3.4
variables:
FIREBASE_TOKEN: '$FIREBASE_TOKEN_CI'

Deploying to Firebase Hosting using CircleCI

I'm trying to figure out how to deploy to Firebase Hosting using CircleCI. As far as I know, there is no way to setup deployment with an SSH key, so I'm trying to find a way of logging into Firebase during deployment and push the code. What I have tried so far is the following in my circle.yml:
// circle.yml
deployment:
production:
branch: circle-deploy
commands:
- npm install -g firebase-tools
- firebase login | echo -e "${FIREBASE_EMAIL}\n${FIREBASE_PASSWORD}"
- firebase deploy
However, I keep getting the following error and I'm not sure how to remedy it.
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: write EPIPE
at errnoException (net.js:904:11)
at Object.afterWrite (net.js:720:19)
I just had to do this and there is a easier way
On your machine, you can get your access token by typing
firebase login:ci
Save that token as an environment variable in circleci, $FIREBASE_TOKEN
For your deploy step, you can skip the login:
deployment:
production:
branch: master
commands:
- firebase deploy --token=$FIREBASE_TOKEN --non-interactive
A small addition to the other answers above...
In order to avoid installing firebase-tools globally in circle ci on every build:
Modify your package.json file to include firebase-tools as a dev dependency like so:
npm install --save-dev firebase-tools
Then in your circle.yml file:
deployment:
production:
branch: master
commands:
- ./node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN --non-interactive
For anyone else who stumbles upon this question, these are the steps I had to take to get CircleCI (and presumably any other CI) working with Firebase Hosting.
Generate a CI token: firebase login:ci
Save that token as an ENV var (FIREBASE_TOKEN)
Use the token in your deploy script: firebase deploy --token=$FIREBASE_TOKEN --non-interactive
Firebase added the login:ci recently to prevent people from using personal deploy tokens for CI services.
This is my initial setup, deploy only master, skip tests
run npm install -g firebase-tools on your local machine
run firebase login:ci to get the token on your local machine
run firebase init. This will create firebase.json make sure it is committed
configure FIREBASE_TOKEN in Environment Variables in BUILD SETTINGS of the project on circileci
//circle.yml
general:
branches:
only:
- master
test:
override:
- echo "test"
deployment:
production:
branch: master
commands:
- npm install -g firebase-tools
- firebase deploy --token=$FIREBASE_TOKEN --non-interactive
Here is the process we followed to deploy to CircleCi.
Store your username and password as environment variables at the project level in CircleCi.
Edit your circle.yml
deployment:
production:
branch: your_branch
commands:
- npm install -g firebase-tools
- firebase login --email $FIREBASE_USERNAME --password $FIREBASE_PASSWORD
- firebase deploy
Push to your branch
Seems to work fine.

Resources