Issue: trying to get a next.js site deployed to firebase hosting when having 2 sites configured.

"hosting": [
    {
      "target": "web",
      "public": "apps/web/public",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    },
    {
      "target": "app",
      "source": "apps/app/.",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ],

Error received: Error: An unexpected error has occurred

I am using lerna for monorepo approach and the nextjs app is inside app package. This approach works when there is only one site to deploy but fails in multi-site hosting when we add the target attribute.

ref. https://firebase.google.com/docs/hosting/nextjs#:~:text=This%20can%20be%20accessed%20in%20getServerSideProps

The Express res.locals object will optionally contain an authenticated Firebase App instance (firebaseApp) and the currently signed-in user (currentUser). This can be accessed in getServerSideProps.

Could you tell me how to access to currentUser in getServerSideProps, Next.js? At first, I thought that I can used it like this.

export const getServerSideProps: GetServerSideProps = async (context) => {
  console.log(context.res.locals currentUser);
  return { props: { data: 'aaa' } };
};

However I couldn't do it because the res.locals is Express res.locals object. What is it? And How can I access to it?

Hi 👋,

Supporting frameworks like Next, Nuxt etc is really great. Is there support coming for Remix as well?

Currently, going through the latest release, is this something that we can do having a custom framework setup?

Thanks in advance.

I am trying to use a preview channel when deploying a Next.js application. Helpfully, the CLI warns me that preview channels will not work with the generated Cloud Function (yet? Support for this would be fantastic!):

Cannot preview changes to the backend, you will only see changes to the static content on this channel.

Despite the warning, and me continuing the deploy anyways, the static content is not updated in the created preview channel. Instead, the same content as deployed to the main channel is served under the preview channel's URL. This is despite the page in question (versions) being marked as static by the Next.js build log:

└ ○ /versions                              329 B          76.1 kB

...

○  (Static)  automatically rendered as static HTML (uses no initial props)

I am the author of the Svelte adapter for Firebase.

I am glad to see work on this type of integration with Firebase deploy.

I was investigating how to integrate the "custom" framework into the adapter, but not sure if it is wasted effort if there is to be an official support for SvelteKit.

Can you shed light on intentions around official support for SvelteKit if any?

In my next.js environment, after I created a page in pages/foo/bar.tsx, the page was only accessible through url /foo/bar.html. I was able to access it through /foo/bar after adding "cleanUrls": true to my firebase.json hosting config.

my next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig

my package.json:

{
 "engines": {
    "node": "16"
  },
  "scripts": {
    "dev": "firebase emulators:start",
    "postinstall": "firebase --open-sesame frameworkawareness"
  },
  "dependencies": {
    "firebase": "^9.8.1",
    "firebase-admin": "^10.0.2",
    "firebase-functions": "^3.21.2",
    "firebase-tools": "^10.9.2",
    "next": "12.1.6"
  },
  "devDependencies": {
    "@types/react": "18.0.9",
    "@types/react-dom": "18.0.4",
    "firebase-functions-test": "^0.2.0",
    "typescript": "4.6.4"
  }
}

Seems like the autogenerated function may be ignoring deps from the next config file.

Error:

Error: Cannot find module './next-i18next.config'
Require stack:
- MYSITE/.firebase/MYPROJECT/functions/next.config.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.mod._resolveFilename (MYSITE/.firebase/MYPROJECT/functions/node_modules/next/dist/build/webpack/require-hook.js:183:28)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (MYSITE/.firebase/MYPROJECT/functions/next.config.js:4:16)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)

next.config.js:

const path = require('path');
const {i18n} = require('./next-i18next.config');

const nextConfig = {
  distDir: 'build',
  i18n: i18n,
};
module.exports = nextConfig;

I'm trying to create a page that have static pages but should rebuild the page after some time (using the "revalidate" property). I was testing if is working hosting on Firebase, but that doesn't seems to work properly, because after the first generation, never rebuild again.

Here is the code I used to test:

export function getStaticProps() { let randomNumber = Math.random(); console.log("Random number generated: " + randomNumber);

return {
    revalidate: 10, // secs
    props: {
        number: randomNumber,
    }
}

}

export default function randomnum(props) { return (

Random number: {props.number}

) }

Are you planning to fix this? Maybe with a function similar to the ssr function, but for SSG (where it will check for revalidate properties).

I have successfully deployed the Next.js project by running firebase deploy locally. However, when I set up GitHub Actions using firebase hosting:github, created a PR, and merged it to main, the following error occurred.

• Must supply a "public" directory or at least one rewrite or redirect in each "hosting" config.

I guessed that this might be due to the fact that --open-sesame frameworkawareness was not applied to the Deploy process performed by FirebaseExtended/action-hosting-deploy@v0, so we changed the GitHub Actions as follows

- run: npm ci && npm run build 
+ - run: npm ci && npm run build && . /node_modules/.bin/firebase --open-sesame frameworkawareness

I then encountered the following error regarding GCP permissions

• Permission 'cloudfunctions.functions.list' denied
• Permission 'cloudfunctions.functions.update' denied
• Permission 'cloudfunctions.functions.generateUploadUrl' denied
• Permission 'iam.serviceaccounts.actAs' denied

To solve this error, the following Role was added to the GitHub Actions

• Cloud Functions Developer
• Service Account User
• FirebaseFrameworkTools(Custom Role)

FirebaseFrameworkTools is set to Custom Role and 'cloudfunctions.functions.generateUploadUrl' is added.

If there is another way to do this, or if you have plans to create an Action to replace action-hosting-deploy@v0, I would like to know.

Hi all, I originally requested and volunteered to help with the SvelteKit integration in https://github.com/FirebaseExtended/firebase-framework-tools/issues/17

Since raising that issue, SvelteKit has changed from a wrapper over top of Vite to a raw Vite plugin. Since learning this, I have also discovered the meta-frameworks for SolidJS (SolidStart) and Qwik (QwikCity) are also Vite plugins as opposed to their own thing.

So, once Vite is supported in (https://github.com/firebase/firebase-tools/pull/4868 ???) it should be relatively easy to support each of these Meta Frameworks.

Just wanted to share some info should it not be known.

Since there's currently no documentation is there a quick rundown for how to get Astro SSR working with Firebase? (There's already support for Vercel, Netlify, Node.js, Cloudflare, and Deno.)

I am using next Js with dynamic content. Here's my workflow file:

`# This file was auto-generated by the Firebase CLI

https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on PR 'on': pull_request jobs: build_and_preview: if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}' runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 #- run: npm ci && npm run build - uses: FirebaseExtended/action-hosting-deploy@v0 with: repoToken: '${{ secrets.GITHUB_TOKEN }}' firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MICROLIPA_F24FA }}' projectId: microlipa-f24fa`

End the Job exits with this error:

Error: Web frameworks with dynamic content do not yet support deploying to preview channels

The process '/usr/local/bin/npx' failed with exit code 1 Error: The process '/usr/local/bin/npx' failed with exit code 1

Hi all. Super excited about the different Web Frameworks integration. My ultimate goal is to get an Astro SSR application up and running. In the past, to get something running with Sapper, there were a bunch of steps so I'm happy to see this happening.

First, I tried with an Astro SSR Node (middleware / Express) project. After messing around, I was able to deploy successfully, but it seems like the files are "hosted" (I can go directly to them in the browser), but are not "served" (site just shows Firebase "Page Not Found").

Decided to take a step back and try a basic Express app (from Stackblitz).

Following the steps in the documentation and GitHub repo, it says that I should see Express.js / custom as an option when initializing hosting. I didn't for either projects.

Here's a screenshot:

Here's what I'm using: Firebase CLI version: 11.19.0 Chromebook with Debian GNU/Linux 11 (bullseye)

Further info, for the Astro project, I was able to get it to recognize it as an Express app, by making the hosting.source in firebase.json ".": { "hosting": { "source": "." } } like the GitHub repo says and not like: { "hosting": { "source": "./path-to-your-express-directory", } } that the documentation stated.

Any insight is greatly appreciated. Thanks.

When it try to run firebase deploy --only hosting. I get the follwing error: Error: Your project project-name must be on the Blaze (pay-as-you-go) plan to complete this command. Required API cloudbuild.googleapis.com can't be enabled until the upgrade is complete. To upgrade, visit the following URL:

The nextjs project has only _app.js and index.js in it without any dependency also no api directory.

The documentation indicates that if there is no server side logic the deployed would be hosting only: If your app includes dynamic server-side logic, the CLI deploys that logic to Cloud Functions for Firebase. and Apps with dynamic server-side logic must provide a billing instrument during Cloud Functions setup.

Is it possible to deploy only static without cloud functions and enabling the Blaze plan?

Hi,

I have a project running in express.js. in local mode (emulator), it generates __session cookie. On the other hand, in production mode, the cookie is not generated.

Moreover, whatever the mode, res.locals remains empty.

Can you help me ?

Hey guys,

thanks for the effort of supporting web frameworks so far!

I'm trying to integrate the web framework support into my SvelteKit adapter, but I'm hitting a dead end.

My project looks like this: package.json:

{
  "name": "test-app",
  "version": "0.0.1",
  "type": "module",
  "dependencies": {
    "@neoconfetti/svelte": "^1.0.0",
    "firebase": "^9.13.0",
    "firebase-admin": "^11.0.4"
  },
  "main": ".firebase/functions/render.js",
  "directories": {
    "serve": "."
  },
  "files": [
    "*",
    "**/*"
  ],
  "scripts": {
    "build": "echo \"No build needed\""
  }
}

.firebase/functions/render.js:

import { init } from './../function.js';

export const handle = init(...);

Where init(...) returns a express (req,res) => void handler function.

firebase.json which lies next to the dist folder pictured above:

{
  "hosting": {
    "source": "dist/apps/test-app",
    "cleanUrls": true
  }
}

I'm trying to preview the app with emulators:start but my function is not recognized i.e. not showing up in the console output.

I've debugged the firebase-tools/frameworks library a bit and it looks like the getBootstrapScript function in firebase-tools/frameworks/express/index.js is called with the project root (where my package.json lies) which can not be imported. I think it should probably try to import my render.js file, but I'm not sure how the framework support works internally.

Is there something wrong with my setup? Is the approach of prebuilding everything even feasible?

Thanks in advance