jthegedus / firebase-functions-next-example

Host a Next.js SSR React app on Cloud Functions for Firebase with Firebase Hosting

Ahoy hoy 👋

I like a smooth consistent workflow so contribute to many parts within my stack: dev tool management (asdf-vm), documentation site generator (docsify & docsify-select), google cloud (asdf-gcloud and meta-cloud-builders) and firebase (asdf-firebase).

📝 Weblog

📚 theory · 💻 examples · 💬 comments

• 💬 State of Firebase (late 2020) - Official Firebase & Community Updates!

More from me

• 💬 State of Firebase (mid 2020) - Official Firebase & Community Updates!
• 💬 GitHub & Medium with Embedly - Nicely rendered & synced repo files?
• 💬 State of Firebase (mid 2019) - Cloud Next & Google I/O 2019 updates
• 💻 GraphQL on Cloud Functions for Firebase - Hassle-free GraphQL on FaaS
• 💻 Express.js on Cloud Functions for Firebase - Auto-scaling APIs in seconds
• 💻 Berglas with Node.js on Cloud Run - Runtime Secret Decryption with Golang & Node.js
• 💬 The 3 best features of Google Cloud Run - King of Serverless Compute?
• 💬 The State of Cloud Functions (mid 19) - Google Next 19 in a Nutshell
• 💬 State of Firebase (late 2018) - 2018 Releases & Improvements
• 💬 Awesome Firebase - List of Firebase talks, tools, examples & articles
• 📚 Babel & preset-env - Compile to environments, not specifications
• 📚 Firebase Package Names and Bundle Sizes - Stop fanning the flames of that bundle size!
• 💻 Cron & Cloud Functions for Firebase - The Serverless Cron we wanted!

Cloud Functions for Firebase with Compiled Code

• 📚 Cloud Functions for Firebase with Compiled Code - ES6, ES7, Flow, TypeScript, Babel & ParcelJS
• 💻 Part 1: Cloud Functions for Firebase with Babel, Flow & TypeScript - Target your Node Runtimes!
• 💻 Part 2: Cloud Functions for Firebase with Flow, TypeScript & ReasonML via ParcelJS - Bundle your Cloud Function Code!

Hardware

• 💻 Ubuntu 20.04 on Lenovo ThinkPad E485 - It just works!
• 💻 PopOS 19.04 on Lenovo ThinkPad E485 - Same problems, same solution
• 💻 Ubuntu 19.04 on Lenovo ThinkPad E485 - Stop Ubuntu from hanging itself on boot
• 💻 Ubuntu 18.04 LTS on Lenovo ThinkPad E485 - Stop Ubuntu from hanging itself on boot
• 💻 Ubuntu 18.04 LTS on a Dell XPS 15 - Stop Ubuntu from hanging itself on login

Other posts

• 💬 Medium Featured Images & Gifs - Dimensions and ratios
• 💻 Ubuntu Terminal on Windows - Windows Subsystem for Linux (WSL) & VSCode

Deprecated or TBD

• Exploring Cloud Functions for Firebase - First time FaaS
• DEPRECATED ES6 in Cloud Functions for Firebase - Modern language features for modern microservices
• ES6+ in Cloud Functions for Firebase #2 - Babel Boogaloo!
• DEPRECATED Express.js on Cloud Functions for Firebase - Exactly what you would expect, almost…
• DEPRECATED GraphQL Server on Cloud Functions for Firebase - The smoothest GraphQL on FaaS DX to date!
• Next.js on Cloud Functions for Firebase with Firebase Hosting - SSR with Clean URLs

📚 Interesting reads:

• Why I moved from React to Svelte and why others will follow - I like Svelte and find these stories useful to share with sceptics.
• Fibonacci Goals
• Lessons From Building a Static Site Generator (Svelte w Elder.js)
• No Hello
• TCR (test && commit || revert) & examples
• Why your team doesn't need to use pull requests
• Examples of people quickly accomplishing ambitious things together
• Game Engine Architecture by Jason Gregory - my favourite programming book!
• How Oodle Kraken and Oodle Texture supercharge the IO system of the Sony PS5
• A clean start for the web
• The Return of the 90s Web
• Second-guessing the modern web
• Web browsers need to stop
• The truth about Svelte
• Write less code
• Virtual DOM is pure overhead
• The zen of Just Writing CSS
• Why is printf better than echo?
• Friends don’t let friends Curl | Bash
• The Let It Crash Philosophy Outside Erlang

📹 Interesting videos:

• Rust: A Language for the Next 40 Years - Carol Nichols - 2019
• 10 Things I Regret About Node.js - Ryan Dahl - JSConf EU 2018
• The Post JavaScript Apocalypse - Douglas Crockford
• Retrofitting parallelism into OCaml & Multicore OCaml -- what's coming in 2021
• HTTP headers for the responsible developer
• Firebase offline: What works, what doesn't, and what you need to know (Firebase Summit 2019)

😂 Anecdotes

• Money well spent??
• Feed the Beast – A Cautionary Tale

firebase-functions-next-example's Issues

Incorporating Firebase Auth

Hey James! Thank you so much for your articles and code. It helped me get started with my website knophy.com. I've still got a lot of learning to do, but you really helped.

To the point: In this example (https://github.com/zeit/next.js/tree/canary/examples/with-firebase-authentication), Firebase Auth is baked into the request from the server using express.

I tried to set this up [1] (naively and ignorantly) within the Firebase cloud function, but it isn't working. Can you help me figure out or offer a better solution for saving the user in the request object so we can access it server side?

[1] https://github.com/technoplato/knophy/commit/67109aebf6c45d763ac31ee4f026e6384683cc96

Thanks in advance!

not working on new versions of nextjs 4 and react 16

Ive updated the packages but stop working

Fix bugs before publishing

• create Next.js example for https://github.com/zeit/next.js/tree/v3-beta/examples - include renaming of existing "with-firebase" example to "with-firebase-auth" and have this one as "with-firebase-functions"

FIX

• Header component pathname
• Update readme - add instructions to tell user to update the .firebaserc proj name

@google-cloud/functions-emulator | Suggested Solution

Hello,
I'm sorry if I'm writing in the wrong place but I have a suggested solution for @google-cloud/functions-emulator error and it's working with node 8 >= and I don't know where to write it except here.

For me, the solution was uninstalled firebase-tools from the project and install it globally using npm
npm install -g firebase-tools

after that I changed the script in package.json to be:
"serve": "NODE_ENV=production firebase serve --only functions,hosting",
"deploy-app": "firebase deploy --only hosting,functions:app",
"deploy-functions": "firebase deploy --only functions:greetings",
"deploy-all": "firebase deploy",

As you can check I delete yarn firebase and make it firebase only and it's working great!

I hope you found this solution good for you and good luck!

Create a PR in next.js repo examples folder

vercel/next.js#2642

'NODE_ENV' is not recognized as an internal or external command

When i run "yarn serve" command in windows, it throws an error like below:

yarn run v1.2.0
$ yarn build-public && yarn build-funcs && yarn build-app && yarn copy-deps && yarn install-deps
Successfully compiled 4 files with Babel.
'NODE_ENV' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

yarn serve not work

hi,
when i run yarn serve and go in to the url http://localhost:5000 i receive this error:

info: User function triggered, starting execution
info: Execution took 2897 ms, finished with status: 'crash'
127.0.0.1 - - [07/Aug/2017:17:46:19 +0000] "GET / HTTP/1.1" 500 99 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36"
info: Execution took 65889 ms, finished with status: 'timeout'
Error: Can't set headers after they are sent.

Have you this error??

Image assets

Hello,

I tried adding images, but since this repo changes /static/ to /public/, it appears images break.

So,

1. I renamed src/public/ to src/static all told yarn functions to use /static/ inside package.json
2. I rebuilt
3. Ran yarn run dev -> but images don't work
4. Ran yarn run serve -> images do work, but you cannot have the /static/ path in them inside your image src in the page code. i.e.:

<img src="image.jpg" />
not
<img src="/static/image.jpg "/> from the next.js docs.

So, when I serve locally I can see the images. But this is only halfway working. It's hard to dev.

1. Are others seeing what I'm seeing?
2. Any way to have images working all the time?
3. Any issue with changing back to /static instead of /public?

style jsx doesn't work on firebase but does on local dev server

When I add this code to my component

<style jsx>{`
  
  .header {
    flex: 0 0 50px;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .header__conteainer {
    
  }

  .header__link {
    margin: 0 20px;
  }

`}</style>

it works fine on yarn dev but when I do yarn deploy-app it deploys successfully and when I load page (on firebase) I see 500 error. And in console 500 - Internal Server Error. undefined

ubuntu 18 (pop os)
also I use nvm and node v6.11.5
steps to reproduce:

1. clone the project
2. past that code right above closing </header> in Header.js
3. run yarn deploy-app

Unexpected identifier prepare() on function deploy

After trying to add my own functions and deploying them I get the following error:

Detailed stack trace: /user_code/node_modules/next/node_modules/next-server/dist/server/next-server.js:93
    async prepare() { }
          ^^^^^^^

SyntaxError: Unexpected identifier
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:549:28)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
    at Module.require (module.js:504:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/user_code/node_modules/next/node_modules/next-server/index.js:2:52)

This along with a typical "Unable to deploy functions error". I've made sure all dependencies are installed and I'm logged in and everything. Here's an excerpt from my yarn error log:

Arguments: 
  /usr/local/bin/node /usr/local/bin/yarn deploy-functions

PATH: 
  /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/go/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/usr/local/git/bin

Yarn version: 
  1.5.1

Node version: 
  10.15.0

Platform: 
  darwin x64

This is happening on both my mac and windows (linux subsystem) environments

you need to await the app.prepare

your app sometimes can throw error 429 on firebase functions, because export server was more faster than app.prepare.. you need wait promise for export after.. I guess...

create issue with next.js repo about `next` development not working when dist dir is in another folder

babel-runtime issues

Hey @jthegedus,

I tried to get fancy with some spread operators and firebase cloud functions was throwing Babel issues.

handleChange( event ) {
        this.setState({
            ...this.state,
            fields: {
                ...this.state.fields,
                [ event.target.name ]: event.target.value 
            }
        })
    }

Error thrown by Firebase functions:

{ Error: Cannot find module 'babel-runtime/helpers/defineProperty'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/user_code/next/dist/pages/donate/index.js:7:24)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3) code: 'MODULE_NOT_FOUND' }

I was able to fix by yarn add babel-runtime in src/app. I thought I got it working like with this command but no combination of adding babel runtime will allow me to compile locally and on firebase functions

Can not deploy when dev = false

I got the following error when I set dev = false
in src/functions/index.js

-var dev = process.env.NODE_ENV !== "production"
+var dev = false

and try to deploy with yarn deploy
=== Deploying to 'nextjs-demo'...

i deploying functions, hosting
i functions: ensuring necessary APIs are enabled...
i runtimeconfig: ensuring necessary APIs are enabled...
✔ runtimeconfig: all necessary APIs are enabled
✔ functions: all necessary APIs are enabled
i functions: preparing dist/functions directory for uploading...

Error: There was an unknown problem while trying to parse function triggers. Please ensure you are using Node.js v6 or greater.
error Command failed with exit code 2.

the code deployed just fine when dev == true

I'm using macOS with
nvm 0.33.2
node 6.11.1
yarn 1.3.1

Cannot find module 'babel-runtime/regenerator'

Hi,

First I would like to thank you for this great contribution!

I used your project as a base to integrate a template which uses next and react and I got an error Cannot find module 'babel-runtime/regenerator', when the project has been deployed on firebase.

Your base project works fine on firebase, but the problem seems to be related to next/react. Here is my deps part of package.json, could you take a look ?

"dependencies": {
"antd": "^3.0.3",
"antd-local-icon": "^0.1.3",
"auth0-lock": "^11.7.2",
"babel-plugin-inline-import": "^3.0.0",
"card-react": "^1.2.7",
"chart.js": "^2.7.2",
"clone": "^2.1.1",
"cookie-parser": "^1.4.3",
"coolors-to-hex": "^1.0.3",
"firebase-admin": "^5.12.1",
"firebase-functions": "^1.0.4",
"frappe-charts": "^1.1.0",
"google-maps-react": "^2.0.2",
"immutable": "^3.8.2",
"inline-import": "^1.0.0",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.0",
"js-info-bubble": "git+https://github.com/RedQ/js-info-bubble.git",
"js-rich-marker": "^1.1.2",
"jwt-decode": "^2.2.0",
"leaflet": "^1.3.1",
"leaflet-routing-machine": "^3.2.8",
"leaflet.markercluster": "^1.3.0",
"lru-cache": "^4.1.3",
"next": "^6.0.3",
"next-redux-saga": "^3.0.0-beta.1",
"next-redux-wrapper": "^2.0.0-beta.6",
"nprogress": "^0.2.0",
"prop-types": "^15.6.1",
"react": "^16.4.0",
"react-addons-shallow-compare": "^15.6.2",
"react-big-calendar": "^0.19.1",
"react-chartjs-2": "^2.7.2",
"react-cookie": "^2.2.0",
"react-custom-scrollbars": "^4.2.1",
"react-dates": "^16.7.0",
"react-dnd": "^4.0.5",
"react-dnd-html5-backend": "^4.0.5",
"react-dom": "^16.4.0",
"react-drawer": "^1.3.4",
"react-dropzone-component": "^3.2.0",
"react-flip-move": "^3.0.2",
"react-ga": "^2.5.3",
"react-google-charts": "^1.6.6",
"react-helmet": "^5.2.0",
"react-instantsearch": "^5.1.0",
"react-intl": "^2.4.0",
"react-motion-drawer": "^3.1.0",
"react-placeholder": "^3.0.1",
"react-quill": "^1.2.7",
"react-redux": "^5.0.7",
"react-smooth-scrollbar": "^8.0.6",
"react-speech-recognition": "^1.0.6",
"react-tag-box": "^1.6.0",
"react-throttle": "^0.3.0",
"react-trend": "^1.2.4",
"react-vis": "^1.9.4",
"react-window-size-listener": "^1.2.1",
"react-youtube": "^7.6.0",
"recharts": "^1.0.0-beta.10",
"redux": "^4.0.0",
"redux-saga": "^0.16.0",
"redux-thunk": "^2.3.0",
"reselect": "^3.0.1",
"rheostat": "^2.2.0",
"smooth-scrollbar": "^8.3.0",
"styled-components": "^3.3.2",
"styled-theme": "^0.3.3",
"styled-tools": "^0.5.0",
"uppy": "^0.25.5",
"uuid": "^3.2.1"
},
"devDependencies": {
"@babel/cli": "^7.0.0-beta.42",
"@babel/core": "^7.0.0-beta.42",
"@babel/preset-env": "^7.0.0-beta.42",
"@firebase/app-types": "^0.3.2",
"cpx": "^1.5.0",
"firebase-tools": "^3.18.6",
"prettier": "^1.13.5",
"rimraf": "^2.6.2",
"babel-plugin-import": "^1.4.0",
"babel-plugin-styled-components": "^1.1.7",
"babel-plugin-transform-define": "^1.3.0",
"cross-env": "^5.0.5",
"webpack-bundle-analyzer": "^2.9.2",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"node-sass": "^4.9.0",
"image-webpack-loader": "^4.3.1",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11"
}

Thank you

Pierre

Add SCSS/SASS import

Hi! Very love your solution!

Can you add example which can explain how to import SCSS/SASS to .js or compile them to file (.css).

Thank you!

inconsistent information

Hi!
impossible to enjoy by this example:

1. firebase serve command fire hosting only. Maybe need firebase serve --only functions,hosting ?
2. In Medium post says about necessity moving functions to src folder with appropriate firebase.json:

{
  "hosting": {
    "public": "src/public"
  },
  "functions": {
    "source": "src/functions"
  }
}

In your example functions/next folder created in dist folder:

{
  "hosting": {
    "public": "dist/public",
    "rewrites": [
      {
        "source": "**/**",
        "function": "next"
      }
    ]
  },
  "functions": {
    "source": "dist/functions"
  }
}

3. process.env.NODE_ENV in functions does not defined at all

in this state, the example (with serve --only functions, hosting) on http://localhost:5000 return error:

function info: Execution took 3644 ms, finished with status: 'crash'
in browser:
{"error":{"code":500,"status":"INTERNAL","message":"function crashed","errors":["socket hang up"]}}
what is for
"build-functions": "babel \"src/functions\" --out-dir \"dist/functions\" --copy-files" ?

also takes place favicon problem

exports.next = functions.https.onRequest((req, res) => {
    console.log('File: ' + req.originalUrl);
// File: /favicon.ico

please give the correct working version, so that we're can try, how it works,
thanks

Anyone had any luck with firebase functions on node 8 and next 6.1

I tried deploying to firebase functions using {engines: { node: 8 } } and after several struggles I'm stuck at

{ Error: Cannot find module 'next/document'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.21 (/srv/next/server/bundles/pages/_document.js:223:18)
    at __webpack_require__ (/srv/next/server/bundles/pages/_document.js:23:31)
    at Object.20 (/srv/next/server/bundles/pages/_document.js:107:72)
    at __webpack_require__ (/srv/next/server/bundles/pages/_document.js:23:31)
    at Object.19 (/srv/next/server/bundles/pages/_document.js:92:18)
    at __webpack_require__ (/srv/next/server/bundles/pages/_document.js:23:31) code: 'MODULE_NOT_FOUND' }

I also have Error: Cannot find module 'next/error' but I figure that's the same thing

Cloud functions logs throws error cannot find module

"Cannot find module next\dist\server\document.js"
"Cannot find module next\dist\lib\error.js"

and throws in error 500 ... and I did not forget the trailing slash

maybe has to do with the version of Next? I'm not sure what "beta" version refers to

Edit: it works in development locally, just not on cloud functions

Integrate firebase realtime database example

Hi @jthegedus . This is not an issue but a question. Are you interested if I create a PR for adding an example page doing a firebase realtime database example?

I ask this because I've been several days working on this until I've found the way to do it properly. I dig on the web, and of course I had a learning curve that cost me that amount of time.

But in the end I think that it'd be nice for people to have both sides of firebase in the same example: cloud functions for the backend tasks and frontend functions for the realtime database API.

Basically, I took the way that is done at https://github.com/now-examples/next-news with minor modifications.

Let me know and I'll do the PR between today and tomorrow.

Regards and nice work, man. It helped me a lot

Get a mate with a Windows machine to test this repo

Cache-Control

Hi there,

I'm trying to cache the next.js response in the edges of the firebase cdn. Regarding to their tutorials it's as easy as adding res.set("Cache-Control", "public, max-age=600, s-max-age=1200"); which I did.
Do you know if there are any drawbacks? Don't want to run into them later on..

Error: Cannot find module '/user_code/next/server/pages-manifest.json'

Currently getting this error in Firebase logs on my repo forked from here.

I couldn't solve it so cloned this repo fresh and did,

yarn install
yarn deploy-all

Which resulted in the same error. Any one else?

Why the projcet dont have a <Head> component?

Like that:

Is this not a problem, right?

Working with service worker offline

Have raised an issue at

Issue Link

firebase-functions-next-example is the starter I have used .

Can you please help . Just starting out with Next js and trying to make it offline using firebase functions .

Thanks

how to user a custom HTML template for render

my client is using a template HTML page where i need to insert my nextjs application

this template is changing in real time, so i need to implement a render version of nextjs application with this template

which is the best way to do that?

Native Windows support

Would like to help with this if possible. Dev is obviously running just fine, but serve, serve --debug, and deploy not so much. Have not attempted on Bash on Ubuntu on Windows. Changing package.json...
"serve": "NODE_ENV=production yarn firebase serve --only functions,hosting",
to "serve": "SET NODE_ENV=production yarn firebase serve --only functions,hosting",
and likewise in build runs just fine, but on serve doesn't seem to complete and on deploy returns a "can't communicate with function" error.