diff --git a/examples/functions-airtable-form/README.md b/examples/functions-airtable-form/README.md new file mode 100644 index 0000000000000..88eefd62f5244 --- /dev/null +++ b/examples/functions-airtable-form/README.md @@ -0,0 +1,67 @@ +

+ + Gatsby + +

+

+ Gatsby Functions Airtable Form Example +

+ +## 🚀 Quick start + +1. Setup Airtable + + Create a new base named `Submissions` and create a table with three columns, "Name", "Email", and "Message". + +2. **Get Airtable Credentials.** + + There are **2** environment variable you'll need to add your project to properly run the example: + + - `AIRTABLE_KEY`: Get Airtable API Key. [Airtable Docs](https://support.airtable.com/hc/en-us/articles/219046777-How-do-I-get-my-API-key-) + - `AIRTABLE_DB`: Get the ID for the "Submissions" Base in interactive Airtable API docs. [Airtable Docs](https://airtable.com/api) + + You'll want to add these as environment variables when deploying to Gatsby Cloud. Don't forget to add them to the Preview variables if you plan to add a CMS preview integration. + +3. **Start developing.** + + To get started, run `yarn` to add all necessary packages. + + When developing locally, you'll want to include the ENV variables in your `.env.development`. Read more about how Gatsby handles `.env` files and environment variables in the [Gatbsy Docs](https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/) + + ```shell + cd airtable-form + yarn + yarn run develop + ``` + +4. **Open the code and start customizing!** + + Your site is now running at http://localhost:8000! You can use the UI on the index page to test the functions or directly access them at http://localhost:8000/api/airtable + + For this route, hitting the route with a POST request with the following body should submit a form response to your Airtable base: + + ```json + { + "name": "Sample Name", + "email": "sample@example.com", + "message": "Hello, World!" + } + ``` + + Edit `src/pages/index.js` to see your site update in real-time! + +5. **Deploy** + +You can deploy this example on Gatsby Cloud by copying the example into a new repo and [connecting that to Gatsby Cloud](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/deploying-to-gatsby-cloud/#set-up-an-existing-gatsby-site). + + diff --git a/examples/functions-airtable-form/gatsby-config.js b/examples/functions-airtable-form/gatsby-config.js new file mode 100644 index 0000000000000..b2dc0496eab81 --- /dev/null +++ b/examples/functions-airtable-form/gatsby-config.js @@ -0,0 +1,9 @@ +module.exports = { + flags: { + FUNCTIONS: true, + }, + siteMetadata: { + title: "Airtable Form", + }, + plugins: ["gatsby-plugin-gatsby-cloud"], +} diff --git a/examples/functions-airtable-form/package.json b/examples/functions-airtable-form/package.json new file mode 100644 index 0000000000000..6e4393c66219d --- /dev/null +++ b/examples/functions-airtable-form/package.json @@ -0,0 +1,24 @@ +{ + "name": "airtable-form", + "version": "1.0.0", + "private": true, + "description": "Airtable Form", + "author": "Joel Smith", + "keywords": [ + "gatsby" + ], + "scripts": { + "develop": "gatsby develop", + "start": "gatsby develop", + "build": "gatsby build", + "serve": "gatsby serve", + "clean": "gatsby clean" + }, + "dependencies": { + "airtable": "^0.10.1", + "gatsby": "^3.4.0", + "gatsby-plugin-gatsby-cloud": "^2.3.0", + "react": "^17.0.1", + "react-dom": "^17.0.1" + } +} diff --git a/examples/functions-airtable-form/src/api/airtable.js b/examples/functions-airtable-form/src/api/airtable.js new file mode 100644 index 0000000000000..eeae50b682942 --- /dev/null +++ b/examples/functions-airtable-form/src/api/airtable.js @@ -0,0 +1,51 @@ +const Airtable = require("airtable") + +Airtable.configure({ + endpointUrl: "https://api.airtable.com", + //Your API Key from Airtable + apiKey: process.env.AIRTABLE_KEY, +}) + +// Your Table ID from Airtable +const db = Airtable.base(process.env.AIRTABLE_DB) + +const handler = (req, res) => { + try { + if (req.method !== "POST") { + return res.status(404).json({ message: "This endpoint requires a POST" }) + } + + const data = req.body + + if (!data) { + return res.status(500).json({ error: "There isn't any data." }) + } + + db("Submissions").create( + [ + { + fields: { + Name: data.name, + Email: data.email, + Message: data.message, + }, + }, + ], + (err, records) => { + if (err) { + res.json({ + message: "Error adding record to Airtable.", + error: err.message, + }) + } else { + res.json({ message: `Successfully submitted message` }) + } + } + ) + } catch (err) { + console.log(err) + res.json({ message: "There has been a big error.", error: err }) + } +} + +module.exports = handler diff --git a/examples/functions-airtable-form/src/images/icon.png b/examples/functions-airtable-form/src/images/icon.png new file mode 100644 index 0000000000000..38b2fb0e467e0 Binary files /dev/null and b/examples/functions-airtable-form/src/images/icon.png differ diff --git a/examples/functions-airtable-form/src/pages/404.js b/examples/functions-airtable-form/src/pages/404.js new file mode 100644 index 0000000000000..053ae0e831ee9 --- /dev/null +++ b/examples/functions-airtable-form/src/pages/404.js @@ -0,0 +1,54 @@ +import * as React from "react" +import { Link } from "gatsby" + +// styles +const pageStyles = { + color: "#232129", + padding: "96px", + fontFamily: "-apple-system, Roboto, sans-serif, serif", +} +const headingStyles = { + marginTop: 0, + marginBottom: 64, + maxWidth: 320, +} + +const paragraphStyles = { + marginBottom: 48, +} +const codeStyles = { + color: "#8A6534", + padding: 4, + backgroundColor: "#FFF4DB", + fontSize: "1.25rem", + borderRadius: 4, +} + +// markup +const NotFoundPage = () => { + return ( +
+ Not found +

Page not found

+

+ Sorry{" "} + + 😔 + {" "} + we couldn’t find what you were looking for. +
+ {process.env.NODE_ENV === "development" ? ( + <> +
+ Try creating a page in src/pages/. +
+ + ) : null} +
+ Go home. +

+
+ ) +} + +export default NotFoundPage diff --git a/examples/functions-airtable-form/src/pages/index.js b/examples/functions-airtable-form/src/pages/index.js new file mode 100644 index 0000000000000..d3e73fb0f5f7d --- /dev/null +++ b/examples/functions-airtable-form/src/pages/index.js @@ -0,0 +1,36 @@ +import * as React from "react" + +export default function AirtableUI() { + return ( +
+

Add person to Airtable

+
+ + +
+
+ + +
+
+ + +
+ +
+ + + ) +} + +export default IndexPage