Sharing code between Firebase Functions and React

Question

I'm using Firebase functions with a React application. I have some non-trivial code that I don't want to duplicate, so I want to share it between the deployed functions and my React client. I've got this working locally in my React client (though I haven't tried deploying) - but I can't deploy my functions.

The first thing I tried was npm link. This worked locally, but the functions won't deploy (which makes sense, since this leaves no dependency in your package.json). Then I tried npm install ../shared/ - this looked promising because it did leave a dependency in package.json with a file: prefix - but Firebase still won't deploy with this (error below).

My project directory structure looks like this:

/ProjectDir
  firebase.json
  package.json (for the react app)
  /src
    * (react source files)
  /functions
    package.json (for firebase functions)
    index.js
  /shared
    package.json (for the shared module)
    index.js

My shared module package.json (extraneous details omitted):

{
  "name": "myshared",
  "scripts": {
  },
  "dependencies": {
  },
  "devDependencies": {
  },
  "engines": {
    "node": "8"
  },
  "private": true,
  "version": "0.0.1"
}

My firebase functions package.json (extraneous details omitted):

{
  "name": "functions",
  "scripts": {
  },
  "dependencies": {
    "myshared": "file:../shared",
  },
  "devDependencies": {
  },
  "engines": {
    "node": "8"
  },
  "private": true
}

When I try to deploy with:

firebase deploy --only functions

It's telling me it can't load the module:

Function failed on loading user code. Error message: Code in file index.js can't be loaded.
Did you list all required modules in the package.json dependencies?

And I don't think the issue is how I export/imported my code- but just in case: The export:

exports.myFunc = () => { some code };

The import (functions/index.js)

const myFunc = require('myshared');

And in my react code:

import { myFunc } from 'myshared';

So far the searching I've done hasn't yielded anything that works. Someone did mention entering the shared module path in firebase.json, but I couldn't find any details (including in the firebase docs) that show what that would look like. Thanks for any tips to get this going.

Just an FYI - you can't refer to anything outside of functions when you deploy to Cloud Functions. That entire folder is going to get packaged up on deployment, except for node_modules. So, whatever you provide will need to live in there to be accessible when npm install rebuilds your backend. — Doug Stevenson
Yeah I discovered that =) Actually I found a way to make this work. Not sure if its the best way, but I'll post below. Thanks! — Eric S

Eric S Eric S · Accepted Answer · 2019-04-26T06:39:43

I found a solution. I'm not sure if it's the only or even the best solution, but it seems to work for this scenario, and is easy. As Doug noted above, Firebase doesn't want to upload anything not in the functions directory. The solution was to simply make my shared module a subdirectory under functions (ie ./functions/shared/index.js). I can then import into my functions like a normal js file. However, my shared folder also has a package.json, for use as a dependency to the react app. I install it using:

npm install ./functions/shared

This creates a dependency in my react app, which seems to resolve correctly. I've created a production build without errors. I haven't deployed the react app yet, but I don't think this would be an issue.

Sharing code between Firebase Functions and React

2 Answers