Hello!
I was looking at the [`with-firebase-hosting`](/zeit/next.js/tree/canary/examples/with-firebase-hosting) example and was having some various issues running it:
* `npm run serve` will choke on windows because trying to set enviroment variables with `NODE_ENV=production`
* `npm run build-funcs` failing because of babeljs mismatches between `@babel/cli@^7.0.0-rc.1` and `next@^6.0.3`
* Not being able to deploy because `firebase-tools` being a deprecated version.
I remedied this and also improved some other factors:
* Use standard JSON formatting on `package.json` so that `npm install` doesn't cause changes on every run. (a83e930)
* Remove "prettier" as a devDependency as there is no use of it in the example and most other examples does not have it as a dependency. (6095663)
* Update all dependencies. The simple usecase in this example didn't really require any changes to the code. (ccde086)
* [`firebase-admin@6`](https://github.com/firebase/firebase-admin-node/releases/tag/v6.0.0)
* [`firebase-functions@2`](https://github.com/firebase/firebase-functions/releases/tag/v2.0.0)
* [`firebase-tools@4`](https://github.com/firebase/firebase-tools/releases/tag/v4.0.0)
* [`firebase-tools@5`](https://github.com/firebase/firebase-tools/releases/tag/v5.0.0)
* [`firebase-tools@6`](https://github.com/firebase/firebase-tools/releases/tag/v6.0.0)
* Make `npm run serve` runnable on windows using [`cross-env`](https://www.npmjs.com/package/cross-env). (b20dda7)
* Update `.gitignore` to ignore firebase cache (bf761b7)
* Remove `src/app/.babelrc` that seems to have been added as a previous bugfix but doesn't seem to do anything currently. (1b02045)
* Remove point from [`README.md`](https://github.com/zeit/next.js/blob/canary/examples/with-firebase-hosting/README.md) that was mentioning any `predeploy` hooks in `firebase.json` as they were removed in 4f4b7a1bce. (5636d9f)
* Use the possibility added by upgrading `firebase-tools` to [`>=4.0.0`](https://github.com/firebase/firebase-tools/releases/tag/v4.0.0) and `firebase-functions` to [`>=2.0.0`](https://github.com/firebase/firebase-functions/releases/tag/v2.0.0) to make the deployable functions use node 8 rather than node 6. Also make babel compile with node 8 as target for less polyfills etc. (c954cc2)
* Added comment to [`README.md`](https://github.com/zeit/next.js/blob/canary/examples/with-firebase-hosting/README.md) explaining how firebase deploys to node 8 and that babel will compile code for node 8. (d8b2e65, 91953dc)
This was tested to `serve` on windows, linux(WSL) and on mac. Deploy was tested on linux(WSL) and mac.
---
This PR is a based on #5806 with correct base.
---
🔔 @jthegedus @timneutkens
Google seems to be deprecated the legacy realtime database and moving towards default use of Firestore, although it's still officially in beta. This PR migrates towards Firestore and the recommended loading methods for the Firebase 5.6.0 libraries. Note: the Firebase and Firebase-Admin dependencies should be updated to 5.6.0 and 6.3.0 respectively.
Hey @timneutkens I've updated this example a bit.
- Fixed `/asserts` spelling to `/assets`.
- Removed the `/assets/styles.less` as importing this caused the entire ant-design css sheet to be loaded, now only the React components imported will have their styles loaded via the babel plugin which was already configured. Resulted in dropping the CSS for this example from ~630kb to ~220kb.
- Removed `index.js` as it's not needed.
* Fix for locale.split is not a function.
Following from https://github.com/zeit/next.js/pull/5488
- Renamed languages to supportedLanguages
- Firstly, accept languages based on supportedLanguages
- And finally, accept a single language, if it returns false, the default of 'en' is used.
I looked at the navigator library, which is used by 'accept', this should be a more solid solution, since we can now know that `const locale` is always a string.
// Before (Sometimes returns an array as `const local`)
const locale = accept.language(languages) || 'en'
// After (Always returns a string)
const locale = accept.language(accept.languages(supportedLanguages)) || 'en';
* Update server.js
Update variable name.
In this example, we can:
- `QueryRenderer` SSR
- caching the data
- use the feature of `react-relay-network-modern` which is the powerful tool for `relay-modern`
I copy the example `with-relay-modern`, but I just modified the code. Some detail are not modified.
If you think this example is needed, I will fix those. Otherwise, close this **PR** to let me know this example is not needed.
- The with-firebase-auth example won't run unless a database with proper rules is created first.
- Add a small error callback to addDbListener to help with debugging if someone's database connection doesn't work.
On the server `props.initialMobxState` received by the `constructor` is a fully functioning mobx store that was instantiated by `getInitialProps()` only a few ticks earlier.
Thus, creating a new instance is unneccessary.
In the browser, however, `props.initialMobxState` is a hydrated plain object and thus the store needs to be initialized.
Current with-ant-design-less example has some problems.
- Upgrade next7, console found a 404 error.
> After upgrade next7, .next folder didn't find /static/style.css and there is /static/css/style.chunk.css.
- The /_next/static/style.css link don't need be placed in the <Head> tag. The style.chunk.css file will be add in the head tag automatically after build.
- The project with more pages include _app.js, _document.js...the antd-custom.less will not work well.
> The solution is use `modifyVars` of `lessLoaderOptions`. It work well in my project~
Instead of bundling `postcss-cli` we can now make use of `@zeit/with-css`.
This also means we can get rid of the `<style>` import and concurrent build step for css. 🎉
- use `enhanceApp` so that styled-components used in _app.js are server rendered
- call parent getInitialProps, fixes#5629
- return `styles`, making the render() method obsolete.
cc @mxstbr @probablyup
I spent far too much time fiddling with this example project before realizing it contained a bug in the store initialization logic and it was a bit more complex than it needed to be.
* The custom server was not needed
* The store-initialization did effectively the same thing twice for no reason
* And wrapping MyApp component in a HOC was wholly unnecessary indirection
My changes are split into four discrete commits for clarity.
* added example for using typings-for-css-modules-loader
* Update examples/with-typings-for-css-modules/README.md
* Update examples/with-typings-for-css-modules/README.md
* Update examples/with-typings-for-css-modules/next.config.js
- Looks like no other example provides a link to a hosted demo
- There is the "Deploy to now" badge, so it can be deployed on demand when needed
- The link is broken anyway
- Probably any example hosted by an individual contributor sooner or later will be cleaned up, doesn't feel like a reliable way to provide a live demo
package accept returns false if can't find language in offered list of languages, then later on
bool is attempted to be split, and app crashes in prod & dev
