feat(gatsby-plugin-functions): Add the ability to run functions locally and on Gatsby Cloud

packages/gatsby/package.json

@@ -112,6 +112,7 @@
     "mitt": "^1.2.0",
     "mkdirp": "^0.5.1",
     "moment": "^2.27.0",
+    "multer": "^1.4.2",
     "name-all-modules-plugin": "^1.0.1",
     "normalize-path": "^3.0.0",
     "null-loader": "^4.0.1",

packages/gatsby/src/bootstrap/load-plugins/load.ts

@@ -218,7 +218,9 @@ export function loadPlugins(
     `../../internal-plugins/prod-404`,
     `../../internal-plugins/webpack-theme-component-shadowing`,
     `../../internal-plugins/bundle-optimisations`,
-  ]
+    process.env.GATSBY_EXPERIMENTAL_FUNCTIONS &&
+      `../../internal-plugins/functions`,
+  ].filter(Boolean) as Array<string>
   internalPlugins.forEach(relPath => {
     const absPath = path.join(__dirname, relPath)
     plugins.push(processPlugin(absPath))

packages/gatsby/src/commands/serve.ts

@@ -7,6 +7,7 @@ import chalk from "chalk"
 import { match as reachMatch } from "@gatsbyjs/reach-router/lib/utils"
 import onExit from "signal-exit"
 import report from "gatsby-cli/lib/reporter"
+import multer from "multer"
 
 import telemetry from "gatsby-telemetry"
 
@@ -110,6 +111,57 @@ module.exports = async (program: IServeProgram): Promise<void> => {
   router.use(express.static(`public`, { dotfiles: `allow` }))
   const matchPaths = await readMatchPaths(program)
   router.use(matchPathRouter(matchPaths, { root }))
+
+  if (process.env.GATSBY_EXPERIMENTAL_FUNCTIONS) {
+    const compiledFunctionsDir = path.join(
+      program.directory,
+      `.cache`,
+      `functions`
+    )
+
+    const functionsManifest = JSON.parse(
+      fs.readFileSync(path.join(compiledFunctionsDir, `manifest.json`))
+    )
+
+    app.use(
+      `/api/*`,
+      multer().none(),
+      express.urlencoded({ extended: true }),
+      express.text(),
+      express.json(),
+      express.raw(),
+      async (req, res, next) => {
+        const { "0": functionName } = req.params
+
+        if (functionsManifest[functionName]) {
+          const start = Date.now()
+
+          try {
+            const pathToFunction = functionsManifest[functionName]
+            delete require.cache[require.resolve(pathToFunction)]
+            const fn = require(pathToFunction)
+
+            const fnToExecute = (fn && fn.default) || fn
+
+            await Promise.resolve(fnToExecute(req, res))
+          } catch (e) {
+            console.error(e)
+            res.sendStatus(500)
+          }
+
+          const end = Date.now()
+          console.log(
+            `Executed function "/api/${functionName}" in ${end - start}ms`
+          )
+
+          return
+        } else {
+          next()
+        }
+      }
+    )
+  }
+
   router.use((req, res, next) => {
     if (req.accepts(`html`)) {
       return res.status(404).sendFile(`404.html`, { root })

packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js

@@ -78,10 +78,16 @@ class Dev404Page extends React.Component {
   }
 
   render() {
+    const functionsEnabled =
+      this.props.data.allSiteFunction.nodes[0].url !== `FAKE`
     const { pathname } = this.props.location
+    const isAPI = false
     let newFilePath
+    let newAPIPath
     if (pathname === `/`) {
       newFilePath = `src/pages/index.js`
+    } else if (functionsEnabled && pathname.slice(0, 4) === `/api`) {
+      newAPIPath = `src${pathname}.js`
     } else if (pathname.slice(-1) === `/`) {
       newFilePath = `src/pages${pathname.slice(0, -1)}.js`
     } else {
@@ -94,7 +100,9 @@ class Dev404Page extends React.Component {
       <div>
         <h1>Gatsby.js development 404 page</h1>
         <p>
-          {`There's not a page yet at `}
+          {`There's not a page ${
+            functionsEnabled ? `or function ` : ``
+          }yet at `}
           <code>{pathname}</code>
         </p>
         {this.props.custom404 ? (
@@ -109,20 +117,74 @@ class Dev404Page extends React.Component {
             <code>src/pages/404.js</code>.
           </p>
         )}
-        <p>
-          Create a React.js component in your site directory at
-          {` `}
-          <code>{newFilePath}</code>
-          {` `}
-          and this page will automatically refresh to show the new page
-          component you created.
-        </p>
+        {newFilePath && (
+          <div>
+            <h2>Create a page at this url</h2>
+            <p>
+              Create a React.js component like the following in your site
+              directory at
+              {` `}"<code>{newFilePath}</code>"{` `}
+              and this page will automatically refresh to show the new page
+              component you created.
+            </p>
+            <pre>
+              <code
+                dangerouslySetInnerHTML={{
+                  __html: `
+export default function Component () {
+  return "Hello world"
+}`,
+                }}
+              />
+            </pre>
+          </div>
+        )}
+        {newAPIPath && (
+          <div>
+            <h2>Create an API function at this url</h2>
+            <p>
+              Create a javascript file like the following in your site directory
+              at
+              {` `}"<code>{newAPIPath}</code>"{` `}
+              and refresh to execute the new API function you created.
+            </p>
+            <pre>
+              <code
+                dangerouslySetInnerHTML={{
+                  __html: `
+export default function API (req, res) {
+  res.json({ hello: "world" })
+}`,
+                }}
+              />
+            </pre>
+          </div>
+        )}
         {this.state.initPagePaths.length > 0 && (
           <div>
+            <hr />
             <p>
-              If you were trying to reach another page, perhaps you can find it
+              If you were trying to reach another page
+              {functionsEnabled ? ` or function` : ``}, perhaps you can find it
               below.
             </p>
+            {functionsEnabled && (
+              <>
+                <h2>
+                  Functions ({this.props.data.allSiteFunction.nodes.length})
+                </h2>
+                <ul>
+                  {this.props.data.allSiteFunction.nodes.map((node, index) => {
+                    const url = `/api/${node.url}`
+                    return (
+                      <li key={url}>
+                        <a href={url}>{url}</a>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </>
+            )}
             <h2>
               Pages (
               {this.state.pagePaths.length != this.state.initPagePaths.length
@@ -170,6 +232,11 @@ export default Dev404Page
 
 export const pagesQuery = graphql`
   query PagesQuery {
+    allSiteFunction {
+      nodes {
+        url
+      }
+    }
     allSitePage(filter: { path: { ne: "/dev-404-page/" } }) {
       nodes {
         path