1

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?

Improve this question

2 Answers 2

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Sorry, later this project will be uploaded on our bitbucket and others will use it for development of their own version (with other functionality), and it will be great to use only $ npm install command... also, next idea - to create our own API which I want to use to download vue single-file components asynchronously (as a static files)
I understand. Interested to know how you would ‘mix’ the two CLIs and to see if someone has a solution.
@RenaudTarnec i'm facing similar issue like above. can you check out this. stackoverflow.com/questions/56516147/…
@PvDev what is your exact problem? It is not clear. You might create a new question with all the details.
actually i have client and server two part. client is done with vuejs and server is done with nodejs. i have hosted in firebase hosting.In server-> app.js i have been using payment api url for payment , if payment success it sends response status code to front-end[client side]. My issue,when move everything to production server side api is not working, but everything works in localhost. dont know where i done mistakes in firebase.json or server-> package.json or base url.Initially in client side -> service->api.js,i have setted base url: localhost now i have updated to dev.xx.firebaseapp.com.
|
0

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
Improve this answer

1 Comment

i'm facing similar issue. can you check out this stackoverflow.com/questions/56523054/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.