(Netlify Newbie) Current State of Forms, Functions, Env Contexts, & Dev - April 2020

jonsully · April 29, 2020, 4:10pm

Hi Netlify Folks!

I recently decided to jump real deep into Netlify from scratch and have had a blast doing it, but want to clarify and culminate some findings into a single place for confirmation for both myself and others, and for clarity on the current state of things (April 29, 2020) to make sure my head’s in the right place. I’ve scoured tons of docs, threads, and community posts here so I’ll try to reference as many as I can but this is a new community account and I may be limited on links

For starters: Netlify is awesome. What an incredible platform and system. I can’t wait to see how it grows and hope I can help in any way possible. The dev process and framework are so phenomenal. Thanks to the whole team for all the efforts and progress made. I enjoy using this platform. It brings me joy. That is not something that happens unintentionally, so thank you.

Early apologies for the length of this post. I’ve dug in pretty deep and want to make sure I’m getting things right based on my observations.

Environment

First and foremost, I want to clarify the role and correct injection of environment variables. I have some “prod” tier environment variables defined in the Netlify UI for my site, but I would like some non-prod tier env vars injected locally and/or in branch deploys and/or in preview deploys – across both site assets / files build-time and function runtimes. Docs: ‘Build Environment Variables’ and Docs: ‘File-based Configuration’ sub-section: ‘Deploy Contexts’ both have a lot of syntax to imply that everything will be distributed correctly if you use the UI env vars and/or TOML env vars (and that’s true for my prod build using my prod env vars) but this community thread with @perry and @jaredh159 suggests that environment variables defined in the TOML do not get injected into functions in particular. Is that correct?

Proposing an example: I have a page called buy.html which I inject an env var of STRIPE_PUBLIC_KEY into and a process.js Function that I pull STRIPE_SECRET_KEY in to make the transaction.

So if I put my Live (‘prod’) API key values into the Netlify UI, everything works great on my production build. It pulls in both live keys correctly and runs things fine , but if I also have Test (‘not-prod’) API key values defined in my netlify.toml file for the build context of …anything not Production, those vars only get injected into the site static build and not the Function runtime? Is that (still) correct?

Is the current ‘best-option’ to follow @fool’s response in that thread and hook into $CONTEXT?

Also thank you for the context (no pun intended) in your response, @fool!

AWS only accepts function deployments with up to 4k worth of environment variables, when appended in a string like VAR1=val1,VAR2=val2 , and base64 encoded - more will cause the deploy to fail!

Lame ^ darn you, AWS!

Lastly, and also really importantly, does hooking into the $CONTEXT work when running the local dev functions server? Hoping to maintain the parity of dev workflow where I can run my full site env locally using .env variable values then push it up and have it run perfect on ‘prod’ values when deployed – OR have it run in a similarly valid ‘test’ state when it’s a branch deploy or deploy preview and then swap over and run fine on ‘prod’ values when promoted to my production deploy.

I also realize that the thread I linked to just kicked back into active discussion a few hours ago, so if others are reading this, please check there first

Dev (CLI)

Outside of what’s mentioned above, and recognizing that dev is still in beta, is it still currently the case that event-based function hooks are not built into dev? I traced down and found the original PR where functions:invoke was added to the (then) nelify-dev-plugin before it got merged to the CLI repo, and I’ve used this locally to kick off a submission-created.js function, but admittedly it was tricky to figure out exactly what the shape/nesting of my --payload ./foo.json data had to be to match production and it’s a bit manual for my taste, but it does work… well on 2.46.0. I’ve had a few issues related to the framework development on 2.47.0 and 2.48.0 but that’s neither here nor there.

For others in the future: if you want to use the payload functionality (which you do), this is the exact shape your json file needs to have. Command: ntl functions:invoke submission-created --payload "./some-data.json" file contents:

{
  "payload": {
    "number": 4,
    "title": "Some Value",
    "email": "test@example.com",
    "body": null,
    "data": {
      "idempotency-token": "bc7d6880-8809-11ea-8af5-18d798294576",
      "Business Name": "Example Biz",
      "Contact Name": "Example Person",
      "Contact Signature": "Example Person",
      "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.122 Safari/537.36",
      "referrer": "https://example.com/contact"
    },
}

And, a related question - since there’s no way to bind to local event triggers (since there’s no local forms anyway ) but you can use local functions when called explicitly, is there any actual benefit to using event-driven Functions rather than just using a ‘normal’ function and injecting a fetch() into the form submission event then running the normal .submit() for tracking in the Netlify UI / post-submission hooks (Zapier, etc.)?
I only ask because that workflow would allow the local function to run without a manual invoke.

btw, --live is absolutely brilliant. Saves me some Ngrok time and setup thank you thank you thank you.

Environment workflow

I’m a bit confused about deploys when it comes to their capabilities as reflected in the Netlify Web UI. The web UI feels like it only shows information and data for what’s currently live in the production deploy. Forms and Functions are primary examples of this - if I create a new Form in a branch then that branch gets deployed, there is no Form listed in the web UI… which makes sense if the web UI is really only for viewing production ‘stuff’ - but is my new form actually built and setup on Netlify’s back end? Is there a way to see those submissions in a web UI at all in a branch or preview deploy?
Question applies to functions too - beyond the environment variables stuff, if I create a new function in a branch or PR, then deploy that branch or preview, that function isn’t listed in the web ui for that Site. Did it get spun up somewhere? Is it running? I saw a forum post somewhere that I can’t seem to trace down again that said “yes” to those things and that the logs for all of those functions would ultimately culminate into the log viewer for the live function (currently in ‘production’) – which makes sense if I’m making diffs to an existing function, but how would I see the logs of a brand new function in a branch deploy if it’s not listed in the site web UI?

Apologies again for the massive post. Appreciate you all and hope I can contribute answers to others with the results of all the digging I’ve done and the answers y’all have posted previously

–
Jon

jonsully · April 29, 2020, 9:55pm

CC @perry not for priority just for visibility for a backlog

perry · April 30, 2020, 8:21pm

hi jonsully and welcome! i know its only been a short time but we’ve enjoyed having you here these last few days.

We haven’t had the capacity to read through your thoughtful post in depth, but we will and we’re thankful you took the time to write it

We do really love feedback as long as it is constructive, and we are all (as a team) excited to be working on supporting a product suite that people care about!

More soon.

jonsully · May 10, 2020, 3:17am

Thanks @perry any thoughts here? I think all of these topics still apply.

Dennis · May 11, 2020, 6:24pm

I’ll try to answer some of your questions.
For Env Vars, yes, toml-defined env vars do not currently make it into lambda functions. A work around would be to modify your function directly based on context. Something like what’s mentioned here: File-based configuration | Netlify Docs.

For any cli issues, I think filing an issue here: Issues · netlify/cli · GitHub would probably get you the best answer.

As far as event-triggered functions, I would say ease of use and the payload would be the main reason I would use them. But as you said, chaining a function invocation after a form submit works too! You do lose the specific payload (like the submission data) but you can probably do some api call ( Netlify API documentation) to retrieve that data. It really depends on what you want to do.

Let me know if that helps and thanks for being awesome!

jonsully · December 30, 2020, 1:46am

For those coming back around to see this, I ended up digging into multi-environment ENV var support pretty deep. There are two good ways to get environment-specific ENV vars running on Netlify. Rock on!

–
Jon