jthegedus / firebase-gcp-examples Goto Github PK

Which Package & Your Environment

After I cloned the repo as written in the readme and follow the instructions (change project-id, yarn, yarn serve), the following error occurs:

[warn] ⚠  functions: Failed to load functions source code. Ensure that you have the latest SDK by running npm i --save firebase-functions inside the functions directory.
[debug] [2018-04-04T11:28:04.306Z] Error during trigger parsing:  Error parsing triggers: Cannot find module '/Users/xxx/Development/xxx/firebase-functions-es6-babel/dist/functions'

Try running "npm install" in your functions directory before deploying.
[warn] ⚠  functions: Error from emulator. Error parsing triggers: Cannot find module '/Users/xxx/Development/xxx/firebase-functions-es6-babel/dist/functions'

Try running "npm install" in your functions directory before deploying.

Expected Behaviour

Serve works without further configurations.

Actual Behaviour

Serve does not run.

Possible Solution

Can't find a solution yet.

Context

Clean repo clone.

Which Package & Your Environment

• Package in this repo: firebase-nextjs
• OS: windows 10
• Node Version: v10.15.3
• Pkg Manager: npm
• Shell:
• Browser & version: chrome(latest)
• Language: javascript (nodejs)

Expected Behaviour

When the development server is started with yarn watch, static files like images in the public/static directory should be rendered in the application.

Actual Behaviour

when dev server is started with yarn watch, all images in public/static are not rendered and in the browser console it returns errors for all images and files in the public folder in this format http://localhost:3000/static/img/{imageName}.svg 404 (Not Found). But when the application is deployed with yarn deploy, all the images are rendered fine with no error

Public folder structure

- public
      - static
           - img
                - image.svg

all other configurations and file structure are exactly the same according to the repo

Possible Solution

Make a copy of the static folder and paste it in src/client, this solves the issue on local development server and all static files work now but there should be a better way of solving this. So now the static files for development server are in src/client/static and those for firebase are in public/static

Context

This issue has made development impossible as some static files are crucial for the application to work. If the static files don't work locally, then there's no way to develop on dev server

Which Package & Your Environment

• Package in this repo: nextjs
• OS: n/a
• Node Version: 10
• Pkg Manager: npm
• Shell: zsh

Expected Behaviour

Using react-modal in a custom _app.js should work the same on Firebase server as it does with local dev

Actual Behaviour

Using react-modal in custom _app.js results in a Error: Cannot find module 'react-modal'"

I've posted this already here, but after some digging, I think that the issue is with the setup here because the production Next code generated by next build && next serve works fine (in addition to next dev working fine) – it only fails when deploying to the cloud function.

Here's the original issue I posted on NextJS:

I'm using a custom _app.js because I want to have a <AuthContextProvider /> available to all my components. This both provides a user to every component that uses that context, but also a doLogin method that opens a react-modal to handle a user login with my auth provider.

import { AuthContextProvider } from "../components/context/AuthContext";

const App = ({ Component, pageProps }) => {
  return (
    <AuthContextProvider>
      <Component {...pageProps} />
    </AuthContextProvider>
  );
};

Nothing too controversial.

The provider looks something like this (redacted a bit for brevity):

import Modal from "react-modal";
export const AuthContextProvider = ({ children }) => {
 ...
  return (
    <AuthContext.Provider
      value={{
        user,
        doLogin,
      }}
    >
      <Modal
        isOpen={loginModalIsOpen && !isFullUser}
        onRequestClose={() => setLoginModalIsOpen(false)}
        contentLabel="Log in"
      >
        <h1>Log in</h1>
        <Login />
      </Modal>
      {user ? children : <Loading />}
    </AuthContext.Provider>
  );
};

This all works fine in local dev (Mac), but on the server (Firebase cloud function – presumably in production mode), any time I import react-modal in a file included in the custom _app.js, I get Error: Cannot find module 'react-modal'".

This doesn't happen if I include react-modal in one of my Next page components – only if I include it in _app.js, so I'm assuming that it's not an environment-related problem.

Context

This is an issue because I want to be able to use react-modal in context and custom hooks

Hi

Just curious if the "not working" note on some of the folders/files is still valid?

Thanks!

• add contributors from archived repos to this repo with all-contributors bot

I trying to use "functions-nextjs".
just on each request that I send to localhost:5000, it starts rebuilding, and files from the dist folder disappear that creates an error. I start in the emulator, maybe it's cause?

This is more of a question so would be better suited to Github discussions..

Which Package & Your Environment

• Package in this repo: functions-nextjs
• OS: Mac
• Node Version: v14.13.1
• Pkg Manager: yarn
• Shell: fish
• Browser & version: Vivaldi latest
• Language: English

Questions

1. Can you explain the usage of sprFlushToDisk in this example? Why is it needed? After a little digging, it is disabling serverless pre rendering, is that correct? but why?
2. How are you managing environment variables that are used both in the Next app and by a Cloud function (like Next's API routes)? I am using next-firebase-auth which uses env vars heavily, see this example file. I do not see how they can be shared, but that might be a misunderstanding on my part.
3. In the readme, you recommend not using SSR for firebase authentication. Can you elaborate? As I mentioned above, I am using next-firebase-auth to handle my auth. I am wondering if it was a mistake.
4. I am having issues deploying my app to Firebase. It does not deploy the latest code up. I think it must be a configuration issue, but I'm wondering if you have experienced that before.

My config is:

{
  "hosting": [
    {
      "public": "nextjs",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "cleanUrls": true,
      "rewrites": [
        {
          "source": "**",
          "function": "nextServer"
        }
      ],
      "target": "staging",
      "predeploy": "yarn build"
    },
    {
      "public": "storybook-static",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "cleanUrls": true,
      "target": "storybook",
      "predeploy": "yarn storybook:build"
    }
  ],
  "functions": {
    "source": ".",
    "runtime": "nodejs12",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**",
      "firebase-debug.log",
      "src/components/**",
      "src/hooks/**",
      "src/pages/**",
      "src/theme/**",
      "src/types/**",
      "src/utils/**",
      "public/**",
      "firestore.rules",
      "readme.md"
    ],
    "predeploy": "yarn build"
  }
}

I added predeploy steps today because that seemed to fix my deployment issues temporarily, but they are back now for some reason.

Also, I set public to nextjs instead of what you have in your example (public/). It doesn't seem to make a difference, can you confirm why?

Thanks in advance. I am well aware that you are not customer support, but your example is the most thorough that I have found.

Which Package & Your Environment

• Package in this repo: https://github.com/jthegedus/firebase-gcp-examples/tree/master/functions-nextjs
• OS: macOS Catalina
• Node Version: 10
• Pkg Manager: yarn
• Shell: bash
• Browser & version: Chrome Version 81.0.*
• Language: Javascript

Expected Behaviour

I am expecting to have the same behavior in the browser as mentioned in code. immutable
https://github.com/jthegedus/firebase-gcp-examples/blob/master/functions-nextjs/pages/blog/%5Bpid%5D.js

Actual Behaviour

But, getting this header in response stale-while-revalidate
Due to which firebase CDN is not always caching this page. ([pid].js) and some times I am getting cache MISS.

initially (just after deployment) not even getting cache headers.

Possible Solution

Probably a correct response header through server.js file.

Context

I have a requirement where my app will have 40k pages and all of them gonna change on the next build. I want to cache all my pages at the CDN level until the next build.

I tried setting a response header in getServerSideProps. it works fine for me. But, my question is can I achieve this with getStaticProps.

After my setup I am getting the following errors when I run
yarn deploy

error An unexpected error occurred: "Command failed. Exit code: 1 Command: sh Arguments: -c cpx *{package.json,yarn.lock} dist/functions Directory: /Users/user/Documents/hobby/firebase-functions-es6-babel Output: ".

Error: functions predeploy error: Command terminated with non-zero exit code1 error An unexpected error occurred: "Command failed. Exit code: 1 Command: sh Arguments: -c /Users/user/Documents/hobby/firebase-functions-es6-babel/node_modules/.bin/firebase deploy --only functions Directory: /Users/user/Documents/hobby/firebase-functions-es6-babel Output: ".

error An unexpected error occurred: "Command failed. Exit code: 1 Command: sh Arguments: -c yarn firebase deploy --only functions Directory: /Users/user/Documents/hobby/firebase-functions-es6-babel Output: ".
Tried the same with different node versions(6.11.5, 7.6.0, 8.0.0) its still the same.

In the setup process, the following command didn't work for me

curl https://codeload.github.com/jthegedus/blog-examples/tar.gz/master | tar -xz --strip=1 blog-examples-master/firebase-functions-es6-babel

Here is how I set it up

• downloaded the zip
• extracted
• cd firebase-functions-es6-babel
• yarn
• changed firebase project id
• yarn fblogin
• yarn deploy

However yarn serve is working. Please help! Let me know if you need anything more.

Which Package & Your Environment

Next.js SSG|SSR on Firebase with Firebase Hosting & Cloud Functions

https://github.com/jthegedus/firebase-gcp-examples/tree/master/functions-nextjs

I copied the example and deployed my nextJS site to Firebase.

Expected Behaviour

I'm expecting a server side render on every request when preview mode is turned on. See the docs at https://nextjs.org/docs/advanced-features/preview-mode .

It works for me locally and I verified the cookies are being set after deployment.

Actual Behaviour

The same page content is returned. It does not show updates to the data.

Context

The original zeit PR for preview mode is here: https://github.com/vercel/next.js/pull/10459/files .

Which Package & Your Environment

• Package in this repo:
• OS: 10.13.4
• Node Version: 9.4.0

Expected Behaviour

Dependencies are copied from src to dist.

Actual Behaviour

yarn clean && yarn build:funcs && yarn deps:copy && yarn deps:install                                                                                                                            ✘ 127
yarn run v1.3.2
$ rimraf 'dist/functions'
✨  Done in 0.17s.
yarn run v1.3.2
$ babel 'src/functions' --out-dir 'dist/functions'
🎉  Successfully compiled 1 file with Babel.
✨  Done in 0.86s.
yarn run v1.3.2
$ cpx *{package.json,yarn.lock} 'dist/functions'

Usage: cpx <source> <dest> [options]

    Copy files, watching for changes.

        <source>  The glob of target files.
        <dest>    The path of a destination directory.

Options:

    -c, --command <command>   A command text to transform each file.
    -C, --clean               Clean files that matches <source> like pattern in
                              <dest> directory before the first copying.
    -L, --dereference         Follow symbolic links when copying from them.
    -h, --help                Print usage information.
    --include-empty-dirs      The flag to copy empty directories which is
                              matched with the glob.
    --no-initial              The flag to not copy at the initial time of watch.
                              Use together '--watch' option.
    -p, --preserve            The flag to copy attributes of files.
                              This attributes are uid, gid, atime, and mtime.
    -t, --transform <name>    A module name to transform each file. cpx lookups
                                the specified name via "require()".
    -u, --update              The flag to not overwrite files on destination if
                              the source file is older.
    -v, --verbose             Print copied/removed files.
    -V, --version             Print the version number.
    -w, --watch               Watch for files that matches <source>, and copy
                              the file to <dest> every changing.

Examples:

    cpx "src/**/*.{html,png,jpg}" app
    cpx "src/**/*.css" app --watch --verbose

See Also:
    https://github.com/mysticatea/cpx

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Possible Solution

Quote first parameter like

"deps:copy": "cpx '*{package.json,yarn.lock}' 'dist/functions'",

Which Package & Your Environment

Question in Stack Overflow

I am using webpack 3 to bundle my react.js web application. I've set up two separate configurations -one for development and the other production. Following the instructions from your article and this repo, I set up a third confirguration to execute as a second task on production pipiline to take cloudfunctions.js and spit it out to the deployment dir functions/index.js using babel to transpile the code,

Instead of describing the transpile requirements in a .babelrc, I am adding those details using webpack to the options configuration object in inside the module in rules.

I've been successful transpiling the code, yet Firebase keeps complaining about 'firebase' not being defined. I've narrowed down the trigger of this error to the very first line of code which is an import.

Any suggestion that can point me to the right direction is truly appreciated.

import functions from ''firebase-functions';

As a matter of fact, I've tried Commonjs (using require) and and other attempts at ES6 import/exports.

Package.json:

{
  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack/dev.config.js",
    "build": "cross-env NODE_ENV=production node ./node_modules/webpack/bin/webpack.js --config webpack/prod.config.js"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0-beta.40",
    "firebase-admin": "^5.5.1",
    "firebase-functions": "^0.7.3",
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.40",
    "@babel/core": "^7.0.0-beta.40",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.40",
    "@babel/preset-env": "^7.0.0-beta.40",
    "babel-loader": "^8.0.0-beta.0",
    "babel-preset-react": "^6.24.1",
    "cross-env": "^5.1.3",
    "generate-json-webpack-plugin": "^0.2.2",
    "uglifyjs-webpack-plugin": "^1.1.8",
    "webpack": "^3.10.0",
    "webpack-merge": "^4.1.1"
  }
}

functions.config.js (webpack)

const
    path               = require('path'),
    pkg                = require('../package'),
    GenerateJsonPlugin = require('generate-json-webpack-plugin'),
    UglifyJSPlugin     = require('uglifyjs-webpack-plugin'),
    webpack            = require('webpack');

const externals = [
    'firebase-admin',
    'firebase-functions'
]

const genPackage = () => ({
    name         : 'functions',
    private      : true,
    main         : 'index.js',
    license      : 'MIT',
    dependencies : externals.reduce( (acc, name) => Object.assign({}, acc, { [name]: pkg.dependencies[name] || pkg.devDependencies[name] }), {} )
})

module.exports = {
    entry  : [
        '@babel/polyfill',
        path.join(__dirname, '../cloudfunctions.js')
    ],
    output : {
        path     : path.join(__dirname, '../functions/'),
        filename : 'index.js'
    },
    module : {
        rules: [
            {
                test    : /\.js$/,
                loader  : 'babel-loader',
                options : 
                    {
                        presets : [
                            [ 
                                '@babel/env',
                                { 
                                    option : { 
                                        targets : { 
                                            node : '6.11.5'
                                        }
                                    }
                                }
                            ]
                                
                        ],
                        plugins: [
                            '@babel/plugin-proposal-object-rest-spread'
                        ]   
                    }
                ,
                exclude : /node_modules/
                
            }
        ]
    },
    externals : externals.reduce( (acc, name) => Object.assign({}, acc, { [name]: true }), {} ),
    plugins   : [
        new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) }),
        new UglifyJSPlugin(),
        new GenerateJsonPlugin('package.json', genPackage())
    ]
}

• OS: Windows 10
• Node Version: 8.9.4
• Pkg Manager: npm
• Shell: Windows Shell
• Browser & version: Chrome 64.0.3282.186
• Language: Javascript

Expected Behaviour

1. Transpile succesfully.
2. Deploy to firebase successfully

Actual Behaviour

1. Transpiles succesfully.
2. Continue receiving this error:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
+  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...

Error: Error occurred while parsing your function triggers.

ReferenceError: firebase is not defined
    at Object.module.exports (C:\Users\Andrew Redican\Compass\functions\index.js:9040:18)
    at __webpack_require__ (C:\Users\Andrew Redican\Compass\functions\index.js:20:30)
    at Object.module.exports (C:\Users\Andrew Redican\Compass\functions\index.js:8967:17)
    at __webpack_require__ (C:\Users\Andrew Redican\Compass\functions\index.js:20:30)
    at Object.<anonymous> (C:\Users\Andrew Redican\Compass\functions\index.js:3687:18)
    at __webpack_require__ (C:\Users\Andrew Redican\Compass\functions\index.js:20:30)
    at C:\Users\Andrew Redican\Compass\functions\index.js:63:18
    at Object.<anonymous> (C:\Users\Andrew Redican\Compass\functions\index.js:66:10)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)

I've Tried

1. Babel 6 and then Babel 7 still unfruitful.
2. I've tried environment configuration. https://firebase.google.com/docs/functions/config-env
3. I've tried providing the access object directly hardcoded.

Possible Solution

I am obviosly missing something, but I've went over this article/repo several times now.

Context

I am trying to get away from typescript and dealing promises' callback hell as far as I can. I am also trying not to rely directly on npm to run command directly but rather take advantage of webpack.

_app.js and test.js to render a static page with props.local. I used getInitialProps method to render that. But failed when i want to serve with yarn.

test.js

import React from 'react';
import App from "../components/App";
import TestComponent from "../components/Test";

function Test({ local }) {
    return (
        <App>
            <TestComponent local={local} />
        </App>
    )
}

export default Test.getInitialProps = () => {
    return { local: "Hello" };
}

The TestComponent just print the props.local

import React from 'react';

function Test({ local }) {
    return (
        <div>
            {local}
        </div>
    )
}

export default Test;

_app.js

import React from 'react';

export default function MyApp({ Component, pageProps, router }) {
    return (
        <React.Fragment>
            <Component {...pageProps} key={router.route} />
        </React.Fragment>
    )
}

when i run yarn build

`
Creating an optimized production build

Compiled successfully.

Automatically optimizing pages ..
Error occurred prerendering page "/test" https://err.sh/zeit/next.js/prerender-error: Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Blocal%7D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at S (/home/lenoir/vscode/firebase-gcp-examples/functions-nextjs/node_modules/react/cjs/react.production.min.js:19:94)
at U (/home/lenoir/vscode/firebase-gcp-examples/functions-nextjs/node_modules/react/cjs/react.production.min.js:19:229)
at V (/home/lenoir/vscode/firebase-gcp-examples/functions-nextjs/node_modules/react/cjs/react.production.min.js:20:322)
at toArray (/home/lenoir/vscode/firebase-gcp-examples/functions-nextjs/node_modules/react/cjs/react.production.min.js:21:261)
at a.b.render (/home/lenoir/vscode/firebase-gcp-examples/functions-nextjs/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:45:176)
at a.b.read (/home/lenoir/vscode/firebase-gcp-examples/functions-nextjs/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:18)
at renderToString (/home/lenoir/vscode/firebase-gcp-examples/functions-nextjs/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:54:364)
at render (/home/lenoir/vscode/firebase-gcp-examples/functions-nextjs/node_modules/next/dist/next-server/server/render.js:81:16)
at Object.renderPage (/home/lenoir/vscode/firebase-gcp-examples/functions-nextjs/node_modules/next/dist/next-server/server/render.js:346:16)
at Function.getInitialProps (/home/lenoir/vscode/firebase-gcp-examples/functions-nextjs/dist/client/server/static/hSYgXCax9LBSjUtbkhXQ8/pages/_document.js:243:19)

Build error occurred
Error: Export encountered errors
at _default (/home/lenoir/vscode/firebase-gcp-examples/functions-nextjs/node_modules/next/dist/export/index.js:19:811)
at process._tickCallback (internal/process/next_tick.js:68:7)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command
`

• add code to repo
  • update deps because of #68
• write blog post
• publish blog post
• 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
• deprecate old example

• finish function group blog post
• add simple example showing function groups

First of all, thank you @jthegedus for putting together these amazing resources!

I'm trying to use Incremental Static Regeneration with functions-nextjs but haven't been able to get it working.

The only necessary change is to add e.g. revalidate: 1 (for 1 second) inside the returned props below:

Have you tried it? Do you know if there are any fundamental limitations?

Not sure if this is a configuration issue on my end or if the boilerplate doesnt work. im just running some of the setup commands in the package.json. everything runs fine but when i run yarn serve i get this error.

This example with erro in deploy

yarn build ✔
yarn serve ✔

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

Error: Error occurred while parsing your function triggers.

Error: > Couldn't find a pages directory. Please create one under the project root
at findPagesDir (/Users/robsonkades/Documents/myprojects/firebase-gcp-examples/functions-nextjs/node_modules/next/dist/lib/find-pages-dir.js:3:170)
at new DevServer (/Users/robsonkades/Documents/myprojects/firebase-gcp-examples/functions-nextjs/node_modules/next/dist/server/next-dev-server.js:1:2962)
at createServer (/Users/robsonkades/Documents/myprojects/firebase-gcp-examples/functions-nextjs/node_modules/next/dist/server/next.js:2:105)
at Object. (/Users/robsonkades/Documents/myprojects/firebase-gcp-examples/functions-nextjs/dist/server/index.js:22:31)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)

• add code to repo
• write blog post
• publish blog post
• 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

Which Package & Your Environment

• Package in this repo: functions-nextjs
• OS: Windows
• Node Version: 10
• Pkg Manager:
• Shell:
• Browser & version: Chrome
• Language:

Expected Behaviour

I was able to deploy but the links are not working correctly:

this doesn't work:
https://testing-6963d.web.app/

this works:
https://testing-6963d.web.app/blog

I think the issue might be with hosting site target name in firebase.json I put this as the value "testing-6963d"

Actual Behaviour

Possible Solution

Context

This repo could use with a GitHub Social Media Repo Card for better sharing on social media.

this released at Google IO 19 - https://firebase.google.com/docs/functions/local-emulator

the examples would benefit from showing how to use these

Use firebase-tools@^7.0.0 as it includes a new emulator with serve:

• express
• nextjs
• nuxtjs
• parcel
• babel
• apollo

• simple GraphQL example running Apollo-Server as the old deprecated example did
• write updated blog post about it

• similar to the old deprecated example
• write updated blog post about it