Local Gatsby production builds with Netlify Functions
With my framework of choice, GatsbyJS, I've become a huge fan of the gatsby-cli to manage local projects. This, coupled with Netlify as my hosting provider and my new-found love for Netlify Functions -- I've never felt so empowered to create new things.
When developing locally, Gatsby provides access to a
developMiddleware method that allows me to proxy requests to Netlify functions on-top of their netlify-lambda package:
To start up both my functions and Gatsby site in unison, my local development script takes advantage of the concurrently package to start them up at the same time:
To get around the typical "works locally, but not in production" issue, I normally use
gatsby build && gatsby serve to create a production-ready version of my site and run a small server locally to see how things will react in the wild. When running that command alongside Netlify functions, we lose access to the proxy that was created for us during development; meaning that our local production builds are about as useful as a wet tissue.
To get around this, I turned to light-server. I normally reach for serve for quick spin-ups, but unfortunately they don't provide access to proxying absolute URLs.
First, I created a
light-server.json file that included the proxy:
And then, instead of using
gatsby build && gatsby serve, my local production server command was updated to take advantage of light-server:
build-serve command does the following:
- Builds a production version of both my functions directory (to catch any build failures) and my Gatsby site.
- Starts up the lambda service (as if I'm developing locally)
- Spins up light-server, pointing to the
/publicdirectory with the config we created earlier.
Now, my local production builds can take advantage of proxying through Netlify functions alongside my production-ready Gatsby site. Huzzah!