Netlify dev + functions + gatsby: ports etc?

answered
#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:

https://github.com/netlify/netlify-dev-plugin/ 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