How do i set up a cloud function for clouldbuild in vue?

Question

I have set up a Vue project and initialized firebase functions (using Firebase CLI). Created a function that works fine when deployed from my local machine to the cloud (both with "firebase Deploy" and "firebase deploy --only functions"). The issue arises during cloud build (during CI/CD pipeline). I get a "sh: 1: eslint: not found" error in the build log. The Vue project structure looks like this;

The build is triggered by commits to the master... the build config is as follows;

steps:
# Install
- name: 'gcr.io/cloud-builders/npm'
  args: ['install']
# Build
- name: 'gcr.io/cloud-builders/npm'
  args: ['run', 'build', '--prod']
# Deploy
- name: 'gcr.io/$PROJECT_ID/firebase'
  args: ['deploy']

The error occurs at the deploy step... the full build log is as follows;

Finished Step #1
Starting Step #2
Step #2: Pulling image: gcr.io/covid-info-bw/firebase
Step #2: Using default tag: latest
Step #2: latest: Pulling from covid-info-bw/firebase
Step #2: c0c53f743a40: Already exists
Step #2: 66997431d390: Already exists 
Step #2: 0ea865e2909f: Already exists 
Step #2: 584bf23912b7: Already exists
Step #2: 3c4c73959f29: Already exists
Step #2: 63e05266fc4b: Already exists
Step #2: 7b37ba8cd979: Already exists
Step #2: 3a18f94fe18a: Already exists
Step #2: a000f3263f8b: Already exists
Step #2: 3a5d0859c8ef: Pulling fs layer
Step #2: 575701571da4: Pulling fs layer
Step #2: 8e3be3979b6a: Pulling fs layer
Step #2: 8e3be3979b6a: Verifying Checksum
Step #2: 8e3be3979b6a: Download complete
Step #2: 575701571da4: Verifying Checksum
Step #2: 575701571da4: Download complete
Step #2: 3a5d0859c8ef: Verifying Checksum
Step #2: 3a5d0859c8ef: Download complete
Step #2: 3a5d0859c8ef: Pull complete
Step #2: 575701571da4: Pull complete
Step #2: 8e3be3979b6a: Pull complete
Step #2: Digest: sha256:35d71d1c92b972de31f223e63fd25f1be6c419f28b24c106187139c9aa3e6cfa
Step #2: Status: Downloaded newer image for gcr.io/covid-info-bw/firebase:latest
Step #2: gcr.io/covid-info-bw/firebase:latest
Step #2: 
Step #2: [1m[37m===[39m Deploying to 'covid-info-bw'...[22m
Step #2: 
Step #2: [1m[36mi [39m[22m deploying [1mfunctions, hosting[22m
Step #2: Running command: npm --prefix ./functions run lint
Step #2: 
Step #2: > functions@ lint /workspace/functions
Step #2: > eslint .
Step #2: 
Step #2: sh: 1: eslint: not found
Step #2: npm ERR! code ELIFECYCLE
Step #2: npm ERR! syscall spawn
Step #2: npm ERR! file sh
Step #2: npm ERR! errno ENOENT 
Step #2: npm ERR! functions@ lint: `eslint .`
Step #2: npm ERR! spawn ENOENT
Step #2: npm ERR! 
Step #2: npm ERR! Failed at the functions@ lint script.
Step #2: npm ERR! This is probably not a problem with npm. There is likely additional logging output 
above.
Step #2: npm WARN Local package.json exists, but node_modules missing, did you mean to install? 
Step #2: 
Step #2: npm ERR! A complete log of this run can be found in:
Step #2: npm ERR!     /builder/home/.npm/_logs/2020-04-16T23_28_19_649Z-debug.log
Step #2: 
Step #2: [1m[31mError:[39m[22m functions predeploy error: Command terminated with non-zero exit 
code1
Finished Step #2
ERROR
ERROR: build step 2 "gcr.io/covid-info-bw/firebase" failed: step exited with non-zero status: 1

Firebase.json snippet is as follows;

 ...
 "functions": {
  "predeploy": [
    "npm --prefix ./functions run lint"
   ]
 }
 ...

This is a link to my Repo just for reference

By the error message `functions@ lint /workspace/functions sh: 1: eslint: not found`, I can see that the script that you are trying to run is not found after running the command `npm --prefix ./functions run lint`. Please make sure that you Cloud Build is pointing to the correct subdirectory where your script lives. Looking at your `cloudbuild.yaml` would be helpful in this case. — sllopis, Apr 21 '20 at 10:28
@sllopis the contents on my clouldBuild.yaml are in the question above followed by "The build is triggered by commits..." — Abel Moremi, Apr 21 '20 at 18:38
That's true. I also noticed that. Have you tried changing your firebase.json to `npm --prefix functions run lint`? I think that may be work given your current directory structure `/workspace/functions`. — sllopis, Apr 22 '20 at 08:11
Can you please check the current working directory where your `eslint` script is located? The issue that I am seeing here is that your build failed because it was not able to find `eslint` in directory `/workspace/functions`. Also, this error message `ARN Local package.json exists, but node_modules missing, did you mean to install? ` confirms that the `node_modules` folder was not found either, which means that you may not even be in the `././functions` directory. — sllopis, Apr 23 '20 at 12:32
Not entirely sure what you mean exactly by checking the script (yes it does appear in my package.json). I do appreciate your help. If I may here is a link to the branch that have the changes I am trying to merge... https://github.com/Abel-Moremi/covid-info-bw/tree/62f1954db5fc05aede45a863dd0519be780d6bd7 I hope this clarifies my issue — Abel Moremi, Apr 23 '20 at 19:14
No worries. What I mean is where is your `eslint` located? How are you installing it? You are using `npm install`, wouldn't this install all the dependencies into the `node_modules/` directory, for the node project you're working on? How come you are receiving an error message `Local package.json exists, but node_modules missing` Did you not install it? I would try to check those things firstly. — sllopis, Apr 24 '20 at 13:49
Well enlist is there in my node Modules and I `npm installed` it... I honestly don't know why i would be getting that error(missing modules)...I think its probably a trickle down effect from the main error causing this maybe... My suspicion is that `NPM Install` in my cloudbuild only installs the dependencies in my Vue package.. thus (I might be wrong, but anyways I attempted to add an extra build step to step into the functions directory and install the dependencies but I failed to do that). — Abel Moremi, Apr 25 '20 at 15:49
This [documentation](https://cloud.google.com/cloud-build/docs/building/build-nodejs) has information about building Node.js application using Cloud Build. [Here](https://github.com/GoogleCloudBuild/code-examples/tree/master/node-example-npm)'s a code example about this. Hope that helps. — sllopis, Apr 27 '20 at 12:56
Thank you... but I went through these a while back... not very helpful... — Abel Moremi, Apr 27 '20 at 13:04
Please update your answer with the things you have tried thus far and/or attach any error messages that you may be receiving, so we can continue helping you. I found this other [SO question](https://stackoverflow.com/questions/48602833/eslint-error-while-trying-to-deploy-firebase-functions) that can help you. — sllopis, Apr 27 '20 at 13:36
Thank you.. saying I should state things I have tried... reminded me of an article I read few weeks back and it had the answer. — Abel Moremi, Apr 27 '20 at 22:42

Abel Moremi · Accepted Answer · 2020-04-28T08:07:57.013

The error was caused by missing scripts because the cloud function dependencies were not being installed in cloud build. Basically, the cloud build's step to install cloud function dependencies were missing. Below is a corrected CloudBuild.yaml (take note of step 2)

steps:
# Install the vue-app dependencies
- name: 'gcr.io/cloud-builders/npm'
  args: ['install']
# Install the function dependencies
- name: 'gcr.io/cloud-builders/npm'
  dir: 'functions'
  args: ['install']
# Build
- name: 'gcr.io/cloud-builders/npm'
  args: ['run', 'build', '--prod']
# Deploy
- name: 'gcr.io/$PROJECT_ID/firebase'
  args: ['deploy']

The second (Install the function dependencies) step is the one that's been added, dir: 'functions' is how you access functions directory to install the dependencies. This article shows how to set up a CI/CD pipeline using Google Cloud Build. It helped me realize my mistake in not placing that step. The article is accompanied by this repo.

How do i set up a cloud function for clouldbuild in vue?

1 Answers1