Firebase server side rending example for nuxt.js - firebase

I have created small nuxtjs app using firebase. I'm having hard time setting up nuxtjs build with firebase cloud function. I found this video but it is outdated (https://www.youtube.com/watch?v=ZYUWsjUxxUQ&list=PLl-K7zZEsYLkbvTj8AUUCfBO7DoEHJ-ME&index=9).
Any help or guidance or documentation would be helpful.
Here is link for the repo which. Also I mentioned steps which I tried to follow.
https://github.com/bhargavkonkathi/nuxt-ssr
Here are the things that I've tried with this repo:
1. Install dependencies inside src using yarn install
2. Install dependencies in functions folder
3. Run yarn build inside src it will create nuxt folder inside folder.
4. Copy and move all contents from functions/nuxt/dist/client folder to public/client folder.
5. Now run functions serve --only functions,hosting -p 5004
6. You should see build firebase hosting running and build running.
7. Deploy firebase deploy --only functions,hosting.
This is the link which I able to deploy after it is running. As you can see vuetify is not working properly. I'm getting few issues.
Deployed link
https://ssr-bumps-testing.web.app/

Related

"firebase use" - projects out of sync between command line and when invoked from npm

I have been doing firebase functions development for a while now and was used to be able to switch the target project from the command line via firebase use test, firebase use staging etc.
In my npm package scripts in the project I also invoke the firebase tools to do things like generating a .runtimeconfig.json via:
"scripts": {
"genruntime" : "firebase functions:config:get > .runtimeconfig.json",
}
In general, this worked fine - I'd change the target project from the command line, and the same target project would be used when I ran firebase commands by npm scripts.
Over the last few days though, I've found that sometimes the target projects weren't synced as I'd set the target environment to test but the find that the npm command was getting functions from the staging environment.
My firebase tools are the same version (global via project) and it's almost as if the target project is not being shared between the global firebase tools and the the npm ones.
Has anyone else seen this issue?
I can change my npm scripts to be explicit about the project being used but this has worked in the past and I'm curious about what might have happened.

Firebase Next.js Hosting: Unable to find 'esbuild'

I'm trying to use Firebase's new Next.js support for Hosting (see https://firebase.google.com/docs/hosting/nextjs) but I'm getting a weird error when I try to deploy. (Everything runs correctly in the local emulator suite, btw)
Screenshot of Console output with error
When I try to run firebase deploy --only hosting,functions -m "testing out next.js support" I'm getting the error Unable to find 'esbuild'. Install it into your local dev dependencies with 'npm i --save-dev esbuild''. I've already added esbuild to my dev dependencies, and it seems to be installed correctly. My project uses yarn, not npm, but for the sake of testing I tried install it with npm like the error suggested, but that didn't work either.
Has anyone used Firebase Next.js hosting or figured it out since they've released it? The documentation on that page I linked above is... not great.
Make sure that you are using the latest Firebase Tools as per the documentation: "Firebase CLI version 11.14.2 or later".
Run npm install -g firebase-tools to update your version.

Deploy a SSR Nuxt 2 application on firebase

I have some troubles deploying a Nuxt 2.4 application on Firebase.
I tried these 2 tutorials but they seem outdated:
https://www.youtube.com/watch?v=ZYUWsjUxxUQ
https://github.com/davidroyer/nuxt2-ssr-firebase
With the first tutorial, I could make my app working on local (after few hours and with a lot of modifications for babel integration) but I never could serve or deploy it. I thought the tutorial was old and manipulations can't be exactly done like the guy did.
With the second tutorial, I cloned the repository to try to deploy the example. I had to change 2 things : install Node 8 instead of Node 10 and upgrading firebase-admin to the last version in prod/server dir. Here is what I got:
npm run setup is ok
npm run dev is ok and the project works fine
npm run build is ok
npm run serve fails.
First I got this error :
The Cloud Functions emulator requires the module "firebase-admin" to be version >7.0.0 so your version is too old. You can probably fix this by running "npm install firebase-admin#latest" in your functions directory.
Indeed, the version configured in package.json is the 5.13. I did the update from the prod/server dir, and I get the 8.0.0.
And then I got a different error about gRPC :
Error: Failed to load gRPC binary module because it was not installed for the current system
Expected directory: node-v57-darwin-x64-unknown
Found: [node-v64-darwin-x64-unknown]
This problem can often be fixed by running "npm rebuild" on the current system
I tried npm rebuild as mentionned, without success.
npm run deploy fails.
I get this trace:
i deploying functions, hosting
i functions: ensuring necessary APIs are enabled...
✔ functions: all necessary APIs are enabled
i functions: preparing prod/server directory for uploading...
Error: Error parsing triggers: Cannot find module 'acorn'
Try running "npm install" in your functions directory before deploying.
Of course, I tried the npm install from prod/server dir, but nothing changed.
Is there somewhere i can find a tutorial that can help me deploy my SSR app to firebase ? Thanks in avdance !
EDIT 1 :
After a few modifications on my package.json
upgrading firebase-functions and express to the latest versions
downgrading firebase-admin to the 7.0.0 version
adding acorn
I can serve and deploy but I get a "504 gateway time-out" webpage when I call the URL....
Have you tried to run npm install grpc inside functions folder?

Firebase and Gitlab continuous integration pipeline failing

I am trying to hook up a simple static website to firebase hosting from Gitlab using their continuous integration tab. After downloading and installing firebase command line tools I am here:
stages:
- deploy
deploy-prod:
stage: deploy
only:
- master
script:
- firebase use <project-name> --token $FIREBASE_TOKEN
- firebase deploy --only hosting -m "Pipe $CI_PIPELINE_ID Build $CI_BUILD_ID" --token $FIREBASE_TOKEN
After that in firebase I deploy the site. However, gitlab then reports that the job is not deployed because
Error: firebase use must be run from a Firebase project directory.
Run firebase init to start a project directory in the current folder.
I dont understand the error, as I have in fact run firebase in the project director. Or is the error referring to the image thats in the yml file?
Either way, could someone please help me out? I've found a number of blog posts using CI in gitlab with firebase but I am stuck.
I got same issue and solved it by check folder structure
in my case:
/root/xx_project
firebase.json is in xx_project
so I need to cd xx_project

`firebase deploy` just hangs

I'm trying to deploy a site to firebase.
firebase init worked fine. I then ran firebase bootstrap and chose the tetris template. So far so good. But when I run firebase deploy I get Preparing to deploy Public Directory... and then it just hangs forever.
How can I figure out what's going wrong?
Random info in case it helps:
My firebase-tools is version 1.0.1; node is version 0.8.20; npm is version 1.4.23. I ran sudo npm install -g firebase-tools to get the CLI. I'm running on a debian chroot on Android 4.4.3 device. My wifi works fine. On a lark I even tried running sudo firebase deploy in case it depends on ICMP packets or something, but there was no difference.
Firstly, the main reason it's not working is that Node.js version 0.10 or greater is required.
However, even once you've upgraded Node (and I'd recommend getting the latest of firebase-tools too) you're likely to be attempting to deploy the directory that you ran the initial firebase init command from, or at least the folder you specified in the setup (which defaults to the folder you ran the command from).
You should change directory and run the firebase deploy command from the folder that was created by the bootstrap command - which would have been named after the name of the Firebase it was created with, and you can delete the firebase.json file created in the parent directory.
The reason is that firebase init and firebase bootstrap are two different ways of doing the same thing - getting a folder in a deployable state. firebase init is for existing projects with files that will eventually be deployed, and firebase bootstrap is for creating a project from one of the existing templates. By running both, the initial firebase init would have created a firebase.json file containing the settings specified by the prompts, and then the firebase bootstrap command would have created a whole new sub-folder with its own firebase.json for the different settings.

Resources