CODEWITHSUNDEEP
javascriptnode.jsfirebasenpmvue.js
Alex Pilugin
Alex Pilugin

Reputation: 703

vue-cli v3 with node.js firebase functions, firebase hosting (Error: No npm package found in functions source directory)

I'd like to use Vue.js for Frontend and Firebase Functions (Express.js) + Firestore on Backend.

0-step: I created a new project on Google Firebase, I created a new Service Account with Owner's permissions (for use it with Admin SDK later)

1st step: I installed vue-cli v3 and created project: 

$ vue create my-project
$ npm run serve //localhost:8080 OK

2nd step:

$npm install firebase firebase-admin firebase-functions --save

Folder structure:

my-project
  .firebaserc //created (edited) manually
  babel.config.js
  firebase.json //created (edited) manually
  package.json
  dist
  node_modules
  public
  src
    assets
    components
    firebase
      functions
        index.js //here are my functions
      service-accounts
    views

firebase.json: (copied from other project and edited manually)

{
  "functions:": {
    "source": "src/firebase/functions"
  },
  "hosting": {
    "public": "public",
    "ignore": [...]
  }
}

src/functions/index.js:

import functions from 'firebase-functions';
import admin from 'firebase-admin';

const serviceAccount = require('../service-accounts/owner-key.json');
admin.initializeApp({
  credentials: admin.credencial.cert(serviceAccount),
  databaseURL: 'my-project.firebaseio.com'
})
const db = admin.firestore();
...

In the package.json file I have added extra scripts:

"deploy": "vue-cli-service build && firebase deploy --only hosting,functions"

but when I run "npm run deploy" command I receive an error:

No npm package found in functions source directory. Please run 'npm init' inside src/firebase/functions

My question is next: why does it need to install firebase functions packages only inside the functions source directory and can I use firebase-functions which I installed in the top-level node_modules folder?

Upvotes: 1

Views: 1299

Answers (2)

Alex Pilugin
Alex Pilugin

Reputation: 703

I found an explanation of such an error: Github: firebase.json option "functions.source"...

firebase-tools only looks at the functions folder when doing functions emulation or deployment. This is a deliberate design choice to have isolation between the deployment targets (functions, hosting, etc.) When functions is being deployed, the entire functions folder is zipped up (ignoring node_modules) and deployed. Once deployed, the server "builds" the project by looking at what's inside package.json and pulling the dependencies from npm. The project root is not deployed. Therefore the emulator mimics deployment behavior by only looking at the functions folder.

firebase.json file in the root project folder:

{
  "functions:": {
    "source": "src/functions"
  },
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

And in the main package.json in the root project folder I have added one line:

"scripts": {
  "postinstall": "cd src/functions && npm install"
},

After all I moved into the /src/functions folder and installed Express.js:

cd src/functions && npm install express --save

Upvotes: 0

Renaud Tarnec
Renaud Tarnec

Reputation: 83058

I would suggest that you separate the two projects, and in particular don't put the Firebase Cloud Functions directory within the vue.js project folders.

In other words:

1/ Create your vue.js project as a "stand alone" vue.js front-end project, using the vue.js CLI

2/ Create your Firebase project as usual, through the Firebase CLI, in a totally different location.

3/ When your want to deploy your vue.js front-end app, build your vue.js app and copy the content of the dist folder in the public folder of the Firebase project

4/ Deploy the Firebase project with firebase deploy --only hosting,functions (or firebase deploy --only functions or firebase deploy --only hosting...)

You could automate the copy in step3.

Upvotes: 1

Related Questions