update Next.js example

[jthegedus]

• [x] add code to repo
  • [x] update deps because of #68
• [ ] write blog post
• [ ] publish blog post
• [x] add code to the example's README.md
• [ ] add post to the example's README.md
• [ ] add post to the repo index table
• [ ] add post to the Medium ToC post
• [x] deprecate old example

[mattgabor]

hey @jthegedus, I am finding your post & repo in 2020 and I really appreciate the great work you've done here! I was wondering if you'd suggest following the method you described in 2017 that's represented here or using the code in this repo?

This newer implementation looks a lot cleaner, but I wanted to make sure before proceeding since I see (not working) in some of the commits

[jthegedus]

Hi @mattgabor ,

I would recommend the example in this repo over other two examples (firebase/functions-samples or nextjs/examples/with-firebase-hosting). I am updating this example again this weekend after the latest 9.3 next.js release so stay tuned for that one.

[mattgabor]

awesome, I will check this weekend, thanks for the quick reply :)

[jthegedus]

The one in this repo should be good to go, except for changes like this https://cloud.google.com/functions/docs/securing/managing-access-iam#allowing_unauthenticated_function_invocation

[jthegedus]

@mattgabor Here is an example using the new Next.js Static Site Generation feature with Firestore. Blog post to come. https://github.com/jthegedus/firebase-gcp-examples/tree/master/hosting-nextjs-ssg

This is not the updated SSR example I promised. Hopefully I can get that figured out this week.

[jthegedus]

@mattgabor Please see the new example here https://github.com/jthegedus/firebase-gcp-examples/tree/master/functions-nextjs

[mattgabor]

Thanks @jthegedus this looks a lot simpler! I’m looking forward to your updates around auth and interacting with the database, that hasn’t been super straightforward using next

[joshleong]

Hi @jthegedus, i've given the new sample a test run.

I'm not sure what my web-app values are for TODO_YOUR_WEB_APP_DEPLOY_TARGET_HERE . I can't find anything about the site value in Firebase Hosting documents.

I wasn't able to run the scripts on my windows machine, but everything seems to have gone smoothly on the Ubuntu machine that I have in Windows when I remove the site value.

The result however is that Firebase Hosting is just serving the standard index.html page, and I'm only able to access the nextjs-server from the Cloud Function URL, in this environment things like next/link are being blocked by permissions again, even though I believe my nextjs-function still has the permissive IAM properties on them.

I'm also not particularly sure what Firebase Datastore to use to get the sample up and running it seems to be that Firebase now has DataStore and Firestore the old real-time database, I don't seem to be able to access the Datastore API from the URL that gets passed too SWR.

[jthegedus]

Hi @joshleong I will try my best to explain everything:

TODO_YOUR_WEB_APP_DEPLOY_TARGET_HERE: You can create multiple apps in a single Firebase project, this is how you can have an Android, iOS and Web App apps running of the same backend infrastructure. Part of this feature is having multiple Web Apps in a single project. The site value is used to identify which WebApp your specific Hosting configuration is pointing at.

See the Add another site button on the right. The setup process will give you the site: "..." config you need.

This is referenced in the Need to know section of the example's readme. The Official docs call these deploy targets, as it applies to multiple resources (multiple databases, apps etc per project).

Firebase Deploy Targets are used to isolate the Next.js app from the rest of your Firebase project. Since Firebase allows multiple websites, databases etc per project, we want to be explicit about which app we're deploying in our project.

This was added as a way to separate your Next.js application from other sites in your existing project.

---

Which scripts failed on your Windows machine? I didn't test cross-OS, but expected it to work without much change.

---

The result however is that Firebase Hosting is just serving the standard index.html page, and I'm only able to access the nextjs-server from the Cloud Function URL, in this environment things like next/link are being blocked by permissions again, even though I believe my nextjs-function still has the permissive IAM properties on them.

I have not 1 time run into this issue. I even created a new Firebase project to test this end to end just in case I hit the Cloud Function issues people seem to be having. The only thing that comes to mind is perhaps your firebase-tools is out of date. You need version 8.x.x or more to use Cloud Functions with Firebase today because of the IAM changes.

From https://firebase.google.com/docs/functions/http-events#invoke_an_http_function

Caution: New HTTP and HTTP callable functions deployed with any Firebase CLI lower than version 7.7.0 are private by default and throw HTTP 403 errors when invoked. Either explicitly make these functions public, or update your Firebase CLI before you deploy any new functions.

---

• Firestore is the new database with realtime support.
• RealtimeDB is the old database with realtime support.
• Datastore is the underlying GCP database of Firestore.

You want to use Firestore. It looks like this:

---

I don't seem to be able to access the Datastore API from the URL that gets passed too SWR

This should be fixed when you run npm run deploy script as the firebase deploy will deploy the firestore.rules file which sets read permissions of the database to allow all reads.

You can check the deploy security rules of the Database in the UI under the rules tab as can be seen in the above image.

---

I hope this clarifies everything. I will be writing a new guide on Medium soon to replace my older article. This feedback helps me know where to focus.

Let me know if you have further issues.

[joshleong]

This is the error on windows.

1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'deploy' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predeploy', 'deploy', 'postdeploy' ]
5 info lifecycle [email protected]~predeploy: [email protected]
6 verbose lifecycle [email protected]~predeploy: unsafe-perm in lifecycle true
7 verbose lifecycle [email protected]~predeploy: PATH: C:\Users\joshl\AppData\Roaming\nvm\v10.13.0\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Development\dynastories-server\node_modules\.bin;C:\Python38\Scripts\;C:\Python38\;C:\Python27\;C:\Python27\Scripts;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\ProgramData\chocolatey\bin;C:\Program Files\dotnet\;C:\Program Files\Git\cmd;C:\Program Files (x86)\Yarn\bin\;C:\Users\joshl\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Users\joshl\AppData\Local\Microsoft\WindowsApps;C:\Users\joshl\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\joshl\AppData\Local\GitHubDesktop\bin;C:\Users\joshl\AppData\Local\Yarn\bin;C:\Users\joshl\AppData\Roaming\npm;C:\Users\joshl\AppData\Roaming\nvm;C:\Program Files\nodejs
8 verbose lifecycle [email protected]~predeploy: CWD: C:\Development\dynastories-server
9 silly lifecycle [email protected]~predeploy: Args: [ '-c',
9 silly lifecycle   'npm run clean && next build && node ./scripts/export.js' ]
10 info lifecycle [email protected]~predeploy: Failed to exec predeploy script
11 silly lifecycle [email protected]~predeploy: Returned: code: -4058  signal: null
12 info lifecycle [email protected]~predeploy: Failed to exec predeploy script
13 verbose stack Error: [email protected] predeploy: `npm run clean && next build && node ./scripts/export.js`
13 verbose stack spawn = ENOENT
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:232:19)
13 verbose stack     at onErrorNT (internal/child_process.js:407:16)
13 verbose stack     at process._tickCallback (internal/process/next_tick.js:63:19)
14 verbose pkgid [email protected]
15 verbose cwd C:\Development\dynastories-server
16 verbose Windows_NT 10.0.18363
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "deploy"
18 verbose node v10.13.0
19 verbose npm  v6.4.1
20 error file =
21 error path =
22 error code ELIFECYCLE
23 error errno ENOENT
24 error syscall spawn =
25 error [email protected] predeploy: `npm run clean && next build && node ./scripts/export.js`
25 error spawn = ENOENT
26 error Failed at the [email protected] predeploy script.
26 error This is probably not a problem with npm. There is likely additional logging output above.
27 verbose exit [ 1, true ]```

[jthegedus]

Well, I've no idea from that error output 🤷

Perhaps try running each of those commands individually:

npm run clean
next build
node ./scripts/export.js

[joshleong]

Yeah I'm not too sure about windows, there might be something going on with my local environment.

I went ahead and successfully deployed your last sample in Ubuntu, so I'm going to stick with Linux for awhile.

Here I think I've got most of it to work in a new project, the latest firebase tools which I think i had before but i reinstalled just to make sure, deployed it with a site value, and double checked everything in firebase.

It deployed the function the first time I did this and gave me this link.

https://us-central1-dyna-stories-server.cloudfunctions.net/nextjs-server I think you can see the behavior I described earlier here.

everytime I deploy it subsequently it give me just the hosting URL https://dyna-stories-server.web.app/

[jthegedus]

You need to fix your hosting configuration:

  "hosting": {
    "site": "TODO_YOUR_WEB_APP_DEPLOY_TARGET_HERE",
    "public": "out/",
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "**",
        "function": "nextjs-server"
      }
    ]
  }

The out/ dir is what you want to deploy to Firebase. The public/ dir is used by next.js and we compile the app and then move all static assets to the out/ dir.

Also, you're missing your rewrites and cleanUrls

[joshleong]

🤦‍♂️🤦‍♂️🤦‍♂️

Thanks James, it totally works! With Firestore as well now! This is amazing!

[jthegedus]

Sweet, I am glad it works! Checkout the rest of the readme, especially the future section for my recommendations going forward for React & Firebase etc

[joshleong]

Hey James, are you having any issues with hot-reloading? I'm currently trying to use nodemon, but it also doesn't seem to be working.

[jthegedus]

I have not had any issues with hot-reloading with next dev. The server.js is intended to be the small glue between Next.js and Cloud Functions. I haven't tested any hot-reloading with the server.

PS: thanks for the sponsorship :smile:

[joshleong]

Haha no prob happy to have the opportunity to support.

Hmm yeah weird, hot reloading isn't working for me right now, oh well I'll just bite the bullet for now, everything else seems good.

[jthegedus]

@joshleong Hey mate, I found a bug in the scripts/export.js script, so you might want to resync that file with what's in master now.

Also, have you tried the firebase emulators:start method, I believe the firebase emulator has hot reloading for the Firebase Functions code (in this case server.js), though I didn't investigate this in depth, it seemed to be very buggy.

[eduncan911]

EDIT

Nevermind from my previous message. I see people are using npx next out here to merge the two folders.

Yes, that will absolutely work!