Add userbase example (#12150)

* add userbase example * update readme and add now.json with build.env * update deploy button import path for testing * update readme * update readme with canary tree path for deploy button * remove prepopulated test username + password * Apply lint-fix * add deployed demo link * remove merge conflict arrows * fix lint errors * run yarn lint-fix * add .env.example and update readme with config steps * add dotenv and update next.config.js Co-authored-by: Matthew Sweeney <[email protected]> Co-authored-by: JJ Kasper <[email protected]>
vercel · Apr 24, 2020 · 0c6ee2c · 0c6ee2c
1 parent 2ad3515
commit 0c6ee2c
Show file tree

Hide file tree

Showing 21 changed files with 713 additions and 151 deletions.
diff --git a/.github/ISSUE_TEMPLATE/1.Bug_report.md b/.github/ISSUE_TEMPLATE/1.Bug_report.md
@@ -1,38 +1,38 @@
----
-name: Bug report
-about: Create a bug report for the Next.js core / examples
----
-
-# Bug report
-
-## Describe the bug
-
-A clear and concise description of what the bug is.
-
-## To Reproduce
-
-Steps to reproduce the behavior, please provide code snippets or a repository:
-
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-## Expected behavior
-
-A clear and concise description of what you expected to happen.
-
-## Screenshots
-
-If applicable, add screenshots to help explain your problem.
-
-## System information
-
-- OS: [e.g. macOS, Windows]
-- Browser (if applies) [e.g. chrome, safari]
-- Version of Next.js: [e.g. 6.0.2]
-- Version of Node.js: [e.g. 10.10.0]
-
-## Additional context
-
-Add any other context about the problem here.
+---
+name: Bug report
+about: Create a bug report for the Next.js core / examples
+---
+
+# Bug report
+
+## Describe the bug
+
+A clear and concise description of what the bug is.
+
+## To Reproduce
+
+Steps to reproduce the behavior, please provide code snippets or a repository:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+## Expected behavior
+
+A clear and concise description of what you expected to happen.
+
+## Screenshots
+
+If applicable, add screenshots to help explain your problem.
+
+## System information
+
+- OS: [e.g. macOS, Windows]
+- Browser (if applies) [e.g. chrome, safari]
+- Version of Next.js: [e.g. 6.0.2]
+- Version of Node.js: [e.g. 10.10.0]
+
+## Additional context
+
+Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/2.Feature_request.md b/.github/ISSUE_TEMPLATE/2.Feature_request.md
@@ -1,22 +1,22 @@
----
-name: Feature request
-about: Create a feature request for the Next.js core
----
-
-# Feature request
-
-## Is your feature request related to a problem? Please describe.
-
-A clear and concise description of what you want and what your use case is.
-
-## Describe the solution you'd like
-
-A clear and concise description of what you want to happen.
-
-## Describe alternatives you've considered
-
-A clear and concise description of any alternative solutions or features you've considered.
-
-## Additional context
-
-Add any other context or screenshots about the feature request here.
+---
+name: Feature request
+about: Create a feature request for the Next.js core
+---
+
+# Feature request
+
+## Is your feature request related to a problem? Please describe.
+
+A clear and concise description of what you want and what your use case is.
+
+## Describe the solution you'd like
+
+A clear and concise description of what you want to happen.
+
+## Describe alternatives you've considered
+
+A clear and concise description of any alternative solutions or features you've considered.
+
+## Additional context
+
+Add any other context or screenshots about the feature request here.
diff --git a/examples/with-next-less/README.md b/examples/with-next-less/README.md
@@ -1,44 +1,44 @@
-# Example App with next-less
-
-This example demonstrates how to use the [next-less plugin](https://github.com/zeit/next-plugins/tree/master/packages/next-less).
-
-It includes patterns for with and without CSS Modules, with PostCSS and with additional webpack configurations on top of the next-less plugin.
-
-## Deploy your own
-
-Deploy the example using [Vercel](https://vercel.com):
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-next-less)
-
-## How to use
-
-### Using `create-next-app`
-
-Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
-
-```bash
-npm init next-app --example with-next-less with-next-less-app
-# or
-yarn create next-app --example with-next-less with-next-less-app
-```
-
-### Download manually
-
-Download the example:
-
-```bash
-curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-next-less
-cd with-next-less
-```
-
-Install it and run:
-
-```bash
-npm install
-npm run dev
-# or
-yarn
-yarn dev
-```
-
-Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+# Example App with next-less
+
+This example demonstrates how to use the [next-less plugin](https://github.com/zeit/next-plugins/tree/master/packages/next-less).
+
+It includes patterns for with and without CSS Modules, with PostCSS and with additional webpack configurations on top of the next-less plugin.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-next-less)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npm init next-app --example with-next-less with-next-less-app
+# or
+yarn create next-app --example with-next-less with-next-less-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-next-less
+cd with-next-less
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-next-less/next.config.js b/examples/with-next-less/next.config.js
@@ -1,17 +1,17 @@
-const withLess = require('@zeit/next-less')
-
-/* Without CSS Modules, with PostCSS */
-module.exports = withLess()
-
-/* With CSS Modules */
-// module.exports = withLess({ cssModules: true })
-
-/* With additional configuration on top of CSS Modules */
-/*
-module.exports = withLess({
-  cssModules: true,
-  webpack: function (config) {
-    return config;
-  }
-});
-*/
+const withLess = require('@zeit/next-less')
+
+/* Without CSS Modules, with PostCSS */
+module.exports = withLess()
+
+/* With CSS Modules */
+// module.exports = withLess({ cssModules: true })
+
+/* With additional configuration on top of CSS Modules */
+/*
+module.exports = withLess({
+  cssModules: true,
+  webpack: function (config) {
+    return config;
+  }
+});
+*/
diff --git a/examples/with-next-less/pages/_document.js b/examples/with-next-less/pages/_document.js
@@ -1,21 +1,21 @@
-/*
-In production the stylesheet is compiled to .next/static/style.css and served from /_next/static/style.css
-
-You have to include it into the page using either next/head or a custom _document.js, as is being done in this file.
-*/
-
-import Document, { Head, Main, NextScript } from 'next/document'
-
-export default class MyDocument extends Document {
-  render() {
-    return (
-      <html>
-        <Head />
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </html>
-    )
-  }
-}
+/*
+In production the stylesheet is compiled to .next/static/style.css and served from /_next/static/style.css
+
+You have to include it into the page using either next/head or a custom _document.js, as is being done in this file.
+*/
+
+import Document, { Head, Main, NextScript } from 'next/document'
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <html>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
diff --git a/examples/with-next-less/pages/index.js b/examples/with-next-less/pages/index.js
@@ -1,9 +1,9 @@
-// Without CSS Modules
-import '../style.less'
-export default () => <div className="example">Hello Less!</div>
-
-// With CSS Modules
-/*
-import style from '../style.less'
-export default () => <div className={style.example}>Hello Less!</div>
-*/
+// Without CSS Modules
+import '../style.less'
+export default () => <div className="example">Hello Less!</div>
+
+// With CSS Modules
+/*
+import style from '../style.less'
+export default () => <div className={style.example}>Hello Less!</div>
+*/
diff --git a/examples/with-userbase/.env.example b/examples/with-userbase/.env.example
@@ -0,0 +1 @@
+USERBASE_APP_ID=<place-your-id-here>
diff --git a/examples/with-userbase/.gitignore b/examples/with-userbase/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.now