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
– Doug Stevenson, Commented Apr 26, 2019 at 6:02
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, Commented Apr 26, 2019 at 6:33

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

12

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.

answered Apr 26, 2019 at 6:39

Eric S

9799 silver badges19 bronze badges

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

1 Comment

Antoine Weber Over a year ago

so you need to do npm install or npm update every time you update the code in ./functions/shared? does npm copy this code package into the node_modules of the react app?

Aris · Accepted Answer · 2019-11-09 15:41:58Z

0

Another solution is to create a symlink. In terminal, under /ProjectDir, execute:

ln -s shared functions/shared
cd functions
npm i ./shared

edited Nov 9, 2019 at 15:41

answered Nov 9, 2019 at 9:48

Aris

771 silver badge6 bronze badges

1 Comment

AgainPsychoX Over a year ago

This solution might lack portability.

Collectives™ on Stack Overflow

Sharing code between Firebase Functions and React

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related