Merge branch 'master' of github.com:supabase/monorepo

examples/world/README.md

@@ -0,0 +1,55 @@
+# With Dotenv example
+
+## Deploy your own
+
+Deploy the example using [ZEIT Now](https://zeit.co/now):
+
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-dotenv)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-dotenv with-dotenv-app
+# or
+yarn create next-app --example with-dotenv with-dotenv-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-dotenv
+cd with-dotenv
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example shows how to inline env vars.
+
+**Please note**:
+
+- It is a bad practice to commit env vars to a repository. Thats why you should normally [gitignore](https://git-scm.com/docs/gitignore) your `.env` file.
+- In this example, as soon as you reference an env var in your code, it will automatically be made publicly available and exposed to the client.
+- If you want to have more centralized control of what is exposed to the client check out the example [with-universal-configuration-build-time](../with-universal-configuration-build-time).
+- Env vars are set (inlined) at build time. If you need to configure your app at runtime, check out [examples/with-universal-configuration-runtime](../with-universal-configuration-runtime).

examples/world/next.config.js

@@ -0,0 +1,7 @@
+require('dotenv').config()
+module.exports = {
+  // env: {
+  //   // Reference a variable that was defined in the .env file and make it available at Build Time
+  //   SOCKET_URL: process.env.SOCKET_URL,
+  // },
+}

examples/world/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "supabase-world-demo",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next -p 8080",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@supabase/supabase-js": "^0.1.5",
+    "dotenv": "^8.2.0",
+    "next": "latest",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-live": "^2.2.2"
+  },
+  "license": "MIT"
+}

examples/world/pages/index.js

@@ -0,0 +1,58 @@
+import { createClient } from '@supabase/supabase-js'
+import { useState, useEffect } from 'react';
+import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
+
+export default class Index extends React.Component {
+  render() {
+    const code = `
+    function World() {
+      const [countries, setCountries] = useState(<div>Hello wordl</div>);
+
+      getCountries = async function() {
+        this.supabase = createClient('https://world.supabase.co', 'FkGhDLmT3V')
+
+        let countries = await this.supabase
+          .from('countries')
+          .select("*")
+      
+        const countryNames = countries.body.map(country => <li key={country.name}>{country.name}</li>)
+
+        setCountries(countryNames);
+      }
+
+      useEffect(() => {
+        getCountries();
+      }, []);
+
+      return (
+        <div>
+          Hello
+          {countries}
+        </div>
+      )
+
+    }
+    `
+
+    return (
+      <LiveProvider code={code} scope={{createClient, useState, useEffect}}>
+        <LiveEditor />
+        <LiveError />
+        <LivePreview />
+      </LiveProvider>
+    )
+  }
+}
+
+const styles = {
+  main: { fontFamily: 'monospace', padding: 30 },
+  pre: {
+    whiteSpace: 'pre',
+    overflow: 'auto',
+    background: '#333',
+    maxHeight: 200,
+    borderRadius: 6,
+    padding: 5,
+  },
+  code: { display: 'block', wordWrap: 'normal', color: '#fff' },
+}