Netlify dev + functions + gatsby: ports etc?

Support
,
1

I’m working on a site built with Gatsby, running on Netlify, and using functions for some simple 3rd-party API proxy behaviour. I only setup the functions a week or so ago using netlify-lambda & zip it and ship it and ran into a few minor niggles.

As advised, I’m switching over my setup to the awesome netlify dev. I’ve installed the cli, logged in and linked my repo. So far, it’s genuinely amazing :heart:.

Gatsby has express under the hood, meaning it has some really neat built-in proxying features, including the documented advanced proxying for netlify functions:

My netlify-lambda setup required me to run a separate server for functions on port 9000, as shown in the Gatsby documentation.

With netlify dev, it seems like functions are always served on port 34567? I couldn’t find this documented anywhere, but the CLI outputs:

Waiting for localhost:8000.Lambda server is listening on 34567

Some time later I also get:

◈ Server now ready on http://localhost:8888

I changed by gatsby dev middleware to point at port 34567, and everything seems to work great. This is the same behaviour I had with netlify-lambda, but for me I had trouble getting functions to work with required modules in production.

As far as I understand, as a result of running netlify dev in my project I now have:

localhost:8000 ← gatsby’s dev server
localhost:8888 ← netlify’s dev server
localhost:34567 ← netlify’s function server

Running netlify dev --help shows me:

  -c, --command=command      command to run
  -d, --dir=dir              dir with static files
  -f, --functions=functions  Specify a functions folder to serve
  -l, --live                 Start a public live session
  -o, --offline              disables any features that require network access
  -p, --port=port            port of netlify dev

So I can customise the main port, and the function directory, but not the function port?

Can someone clarify:

  • is the functions port always 34567?
  • is this configurable (what if I want to dev multiple projects?)
  • which env in my netlify.toml should be used? Is it just the default [build] or is there a [context.development] env?
  • what does netlify dev do in the background with my functions? Is zip-it-and-ship-it automatically being run? I

Basically, I’m trying to figure out 1) a reliably config for gatsby proxy and 2) following on from my issue with netlify lambda, if this works locally how does it work and why does it then not work in prodcution without the manual zip-it-and-ship-it step :thinking:

Is there more detailed docs somewhere that I missed? I assume they’re WIP :grimacing:

This isn’t urgent, just testing for fun at the moment!

2

A little update:

localhost:8000 ← gatsby’s dev server
localhost:8888 ← netlify’s dev server

These two appear to function the same. That’s pretty amazing because Gatsby’s ludicrous mode is truly awesome to work with, and I’m still getting that.

It does beg the questions of why I need two, are there going to be performance issues from having both servers running, can/should one be disabled etc?

localhost:34567 <- netlify’s function server

I had thought this wasn’t reloading - but it is!! It is reloading silently without any output on the console, which is what threw me off.

Also (and this makes sense) the reload of the function server doesn’t cause my Gatsby page to refresh - I have to reload. That’s totally fine, but again I’m wondering if there’s a way to tell gatsby to reload after the function server reloads?

3

Hi Hannah,

so glad you are trying it out! I’ll try to answer your questions directly:

Is there more detailed docs somewhere that I missed? I assume they’re WIP :grimacing:

GitHub - netlify/netlify-dev-plugin: Local dev server with functions, rules engine and add-on support for now while all this is being worked out. and obviously i’m all over every issue filed.

is the functions port always 34567?

as implemented, yes. this is a design oversight. we need to fix this.

is this configurable (what if I want to dev multiple projects?)

our fix will be to introduce toml field for this.

which env in my netlify.toml should be used? Is it just the default [build] or is there a [context.development] env?

we use the functions field in the [build] block, but there is also a [dev] block for overriding project detector defaults. we do not yet support other contexts inside Netlify Dev and would love an issue if you have strong feelings about how this should work for your usecase.

what does netlify dev do in the background with my functions? Is zip-it-and-ship-it automatically being run?

netlify dev merely serves them, together with your build and addon environment variables. ZISI is not automatically being run, it is now relegated to just an implementation detail for deployment.

It does beg the questions of why I need two, are there going to be performance issues from having both servers running, can/should one be disabled etc?

no, you need both running. netlify’s devserver is a proxy on top of gatsby’s devserver, with extra goodies like functions, edge logic/redirects, and environment variables from your production netlify instance (we will have more ways to configure other kinds of env vars soon). the idea is that in local dev you interact with netlify’s devserver and get all that extra stuff with no setup (including no need to proxy functions within gatsby’s webpackdevserver).

I had thought this wasn’t reloading - but it is!! It is reloading silently without any output on the console, which is what threw me off.

Yeah… we will fix that :sweat_smile:

I’m wondering if there’s a way to tell gatsby to reload after the function server reloads?

i mean… maybe… but why do you really want this? whats the underlying need here?

i think thats all of them. Please let me know if you have any other questions and if you have any urgent queries i’m available to you most times of the day @swyx. big fan of ghost the company and the product.

1 Like
4

Hi Hannah and swyx,

I wonder if either of you have had success with netlify dev + gastby. I spent all day today trying to get things working but I’ve hit trouble. If you’ve got things working and are comfortable with this combination of tools, I wonder if you’d be interested to screenshare with me and work through the problem I’m having? If we solve the problem, I’d consider paying a reasonable bounty.

Background

Until today I was using gatsby-plugin-netlify-functions which does a great job of transpiling my lambda functions to a folder AND ALSO proxying things so the functions are available to gatsby in develop mode (without having to fuss with separate AWS deploys of the lambda functions). It works great! (Hot reloading, jest tests run against the functions at same time as against my gatsby components, and so on.)

EXCEPT, that plugin doesn’t handle POST requests. :frowning:

So, just today I learned of netlify dev. I want the ability to write my lambda functions in a way that is consistent with the rest of my Gatsby code, so I can run unit tests against them, hot-reload, babel transpilation, and so on.

What I’ve got now:

I’ve got a custom-made function in gastby-node.js to transpile my lambda functions to a folder. That’s working. But i get "Function not found" message at /.netlify/functions/hello. I think I have 2 problems:

  1. It seems onPostBuild is not the best place to trigger transpilation of the functions.
  2. I haven’t been able to figure out the right .toml settings to avoid the “Function not found” error.
5

@dns, I’m just checking “the usual” things before escalating this. Have you tried using the following setting in netlify.toml?

Using something similar to the following there:

[build] # Make sure you don't have a duplicate [build] context!
  functions = "relative/path/to/functions/directory/"

This is the path to the directory relative to the base of the repo where the netlify.toml file is found. If that setting doesn’t work, please let us know.

6

Thank you, Luke.

My problem was a combination of things, I think. I’ve got it working (mostly) with these settings in netlify.toml:

[build]
command = 'yarn build'
functions = './site/__functions__'

[dev]
command = 'yarn workspace site develop'
functionsPort = 34567
port = 8000
publish = 'site/public'
targetPort = 8000

And these scripts in the top-level folder of my yarn workspaces:

"scripts": {
"cy:open-dev": "cypress open --config-file ./site/cypress.json",
"develop": "netlify dev",
"test:e2e": "start-server-and-test develop http://localhost:8000 cy:open-dev"
}

And these scripts in the “site” workspace package.json:

"build": "gatsby build",
"develop": "gatsby develop",
"serve": "gatsby serve",
"test": "jest --verbose",
"test:watch": "jest --verbose --watchAll"

–

It took me a while to try various settings and figure out how to work within the workspaces folder structure.

That’s all working great. My next challenge is deal with building and hot-reloading my functions. (perhaps that’s a different thread?)

I’m experimenting now with this in my package.json

"develop": "netlify-lambda build ./site/src-functions && netlify dev",

That works at first but after calling a function once, my browser hangs – perhaps there’s a port conflict. Also, I haven’t yet figured out how to ‘rebuild’ the function onChange – both gatsby-netlify-lambda-functions and netlify lambda serve would watch for file changes.

7

UPDATE

I’ve succeeded to entirely replace gatsby-plugin-netlify-functions with netlify dev and netlify-lambda – note I also use yarn workspaces in my environment. So, setting up the paths and ports was a challenge.

I’ve posted a video here to fully explain my setup – I hope the video is helpful to others: gatsbyjs + yarn workspaces + netlify dev + lambda functions - YouTube

8

oh this is awesome! thank you so much for sharing!