Next.js: with-firebase-hosting on cloud functions emulator crashed

[mizchi]

I tried firebase examples. https://github.com/zeit/next.js/tree/canary/examples/with-firebase-hosting

firebase deploy works correctly.

But local emulator is broken.

$ firebase serve --only functions,hosting

logs

$ firebase serve --only functions,hosting

=== Serving from '/Users/mz/sandbox/with-firebase-hosting'...

i  functions: Preparing to emulate functions.
i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://localhost:5000

✔  functions: next: http://localhost:5001/playground-e6572/us-central1/next
[hosting] Rewriting / to local function next
info: User function triggered, starting execution
File: /
info: Execution took 257 ms, finished with status: 'crash'
127.0.0.1 - - [24/Oct/2017:23:44:45 +0000] "GET / HTTP/1.1" 500 99 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.52 Safari/537.36"

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Run same with after firebase deploy

Current Behavior

Steps to Reproduce (for bugs)

npm i -g firebase-tools
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-firebase-hosting
cd with-firebase-hosting
npm install
npm run build-all
npm run firebase --only functions,hosting

then open localhost:5000

Context

I want to use next.js with firebase without deploy.

Your Environment

| Tech | Version |
|---------|---------|
| next | 4.1.3 |
| node | 6.11.4 |
| OS | OSX |
| browser | Chrome |
| etc | |

[timneutkens]

@jthegedus can you check this out?

[jthegedus]

@timneutkens Yes, yes I can.

@mizchi I'm not able to work on this for the next 24 hours.

Off the top of my head, I would recommend trying

firebase serve

instead of

firebase serve --only functions,hosting

I recall running each individually interrupted with the hosting rewrite (local only). I haven't tried hosting an app on a rewrite function with additional Cloud Functions that are not rewritten. I'll be exploring this soon.

[mizchi]

@jthegedus
firebase serve goes to deployed functions, not local function code. It's explicit option by me.
I have to deploy them before yarn next in local now.

[chanlito]

@mizchi Just clone the project, it's not working.

[jthegedus]

@BruceHem I'll have a more thorough look at this in ~5hours

[chanlito]

@jthegedus Yes, that'd be nice.

[jthegedus]

@mizchi Sorry I didn't get back to you sooner with these results.

Looking at the package.json you will see the script "next": "cd \"app\" && npm run dev",. This is what I use to develop the Next.js App. It's just the regular Webpack Dev Server with HMR experience that Next.js ships, nothing special.

The "serve": "firebase serve" script was simply used to test that this worked before deploying to production. I see the confusion comes in here as I missed that this used local Hosting with deployed Cloud Functions. I thought both were served locally (when getting this working I was deploying a lot, so completely missed it, sorry). I would still, however, not recommend running Next.js in development mode (npm next) on locally hosted Cloud Functions. I've not looked at the source for the Firebase emulator so haven't determined exactly why it crashes (maybe raise an issue with firebase-tools and tag me if you do), but I imagine serving locally like you wish would require the Cloud Functions to be hooked into Next.js's Webpack to know that the App changed and re-serve itself based on any changes. I can't imagine that setup being easy to maintain.

So, unfortunately, you will still need to deploy to update your Cloud Functions which is tedious. I'm in the middle of updating the example to account for this serve issue amongst other things.

To test this without deploying to production I would recommend looking into Firebase aliasing. Essentially a separate Firebase project for each stage you define.

Because this is a simple example of a single Cloud Function Hosting rewrite with SSR I would recommend the following development process:

1. Develop your Next.js App as normal with npm next without any reliance on Firebase.
2. Deploy to a staging environment through Firebase aliases and test it on the Firebase platform.
3. Once you're happy with staging working fine, deploy to production.

A more complex development setup would be required to develop an app that had additional, non-hosting rewrite Cloud Functions (which could be hosted locally). I've been fleshing this out myself and will share once I have determined a sane method with local testing for the non-hosting rewrite Cloud Functions.

Now, in the future, there may be a way to achieve this without the deployment, but I imagine that would involve using the Firebase Cloud Functions shell which is still experimental, not to mention it does not mention support for Hosting re-writes, so it may not work after all.

I know this is not ideal, but the best I can do atm. I will link the updated PR here when complete.

[sonaye]

Running NODE_ENV=production firebase serve --only functions,hosting does the trick (https://github.com/zeit/next.js/pull/3989).

A more complex development setup would be required to develop an app that had additional, non-hosting rewrite Cloud Functions (which could be hosted locally).

@jthegedus This can be done, one condition though: the name of the function must not match an existing route in your app.

"rewrites": [
  { "source": "/func", "function": "func" },
  { "source": "**/**", "function": "ssr" }
]

The **/** source should come last.

const functions = require('firebase-functions');
const next = require('next');

exports.ssr = functions.https.onRequest((req, res) => {
  const app = next({ conf: { distDir: 'build' } });

  return app
    .prepare()
    .then(() => app.getRequestHandler()(req, res))
    .catch(err => console.error(err.message));
});

exports.func = functions.https.onRequest((req, res) =>
  res.status(200).json({ foo: 'bar' })
);