feat: add support for netlify functions

gatsby-config.js

@@ -1,11 +1,23 @@
 const config = require('./config/website')
 const pathPrefix = config.pathPrefix === '/' ? '' : config.pathPrefix
+const { createProxyMiddleware } = require('http-proxy-middleware')
 
 require('dotenv').config({
   path: `.env.${process.env.NODE_ENV}`,
 })
 
 module.exports = {
+  developMiddleware: app => {
+    app.use(
+      '/.netlify/functions/',
+      createProxyMiddleware({
+        target: 'http://localhost:9000',
+        pathRewrite: {
+          '/.netlify/functions/': '',
+        },
+      }),
+    )
+  },
   pathPrefix: config.pathPrefix,
   siteMetadata: {
     siteUrl: config.siteUrl + pathPrefix,

netlify.toml

@@ -1,4 +1,5 @@
 [build]
+  functions = "functions"
   publish = "public"
 
 [[plugins]]

package.json

@@ -67,7 +67,10 @@
   "devDependencies": {
     "babel-preset-gatsby": "^0.2.20",
     "dayjs": "^1.8.18",
+    "http-proxy-middleware": "^1.0.4",
     "hygen": "^5.0.3",
+    "netlify-lambda": "^1.6.3",
+    "npm-run-all": "^4.1.5",
     "open": "^7.0.3",
     "prettier": "1.19.1"
   },
@@ -77,10 +80,13 @@
   "license": "MIT",
   "main": "n/a",
   "scripts": {
-    "build": "GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --log-pages",
+    "build": "GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --log-pages && netlify-lambda build src/functions",
+    "build:lambda": "netlify-lambda build src/functions",
     "build:local": "gatsby build",
     "g:post": "hygen post new",
     "dev": "gatsby develop",
-    "start": "serve public/"
+    "start": "run-p start:**",
+    "start:app": "npm run dev",
+    "start:lambda": "netlify-lambda serve src/functions"
   }
 }

src/functions/hello.js

@@ -0,0 +1,11 @@
+// For more info, check https://www.netlify.com/docs/functions/#javascript-lambda-functions
+export function handler(event, context, callback) {
+  console.log('queryStringParameters', event.queryStringParameters)
+  callback(null, {
+    // return null to show no errors
+    statusCode: 200, // http status code
+    body: JSON.stringify({
+      msg: 'Hello, World! ' + Math.round(Math.random() * 10),
+    }),
+  })
+}

src/pages/index.js

@@ -27,6 +27,10 @@ const Hero = () => {
   const theme = useTheme()
   const date = new Date()
 
+  fetch('/.netlify/functions/hello')
+    .then(response => response.json())
+    .then(console.log)
+
   return (
     <section
       css={css`