From 9e5e0efda8005735d96334a1385621c0f41f477c Mon Sep 17 00:00:00 2001 From: swyx Date: Thu, 10 Jan 2019 11:21:17 -0800 Subject: [PATCH 1/4] Update README.md --- README.md | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/README.md b/README.md index 252beac4..446647d8 100644 --- a/README.md +++ b/README.md @@ -51,6 +51,55 @@ It also watches your files and restarts the dev server on change. Note: if you a - Every function needs to be a top-level js/ts/mjs file. You can have subfolders inside the `netlify-lambda` folder, but those are only for supporting files to be imported by your top level function. - Function signatures follow the [AWS event handler](https://docs.aws.amazon.com/lambda/latest/dg/nodejs-prog-model-handler.html) syntax but must be named `handler`. [We use Node v8](https://www.netlify.com/blog/2018/04/03/node.js-8.10-now-available-in-netlify-functions/) so `async` functions **are** supported ([beware common mistakes](https://serverless.com/blog/common-node8-mistakes-in-lambda/)!). Read [Netlify Functions docs](https://www.netlify.com/docs/functions/#javascript-lambda-functions) for more info. +
+ + Lambda function examples + + If you are new to writing Lambda functions, this section may help you. Function signatures should conform to one of either two styles. Traditional callback style: + + ```js +exports.handler = function(event, context, callback) { + // your server-side functionality + callback(null, { + statusCode: 200, + body: JSON.stringify({ + message: `Hello world ${Math.floor(Math.random() * 10)}` + }) + }); +}; + ``` + + or you can use async/await: + + ```js + import fetch from 'node-fetch'; +export async function handler(event, context) { + try { + const response = await fetch('https://api.chucknorris.io/jokes/random'); + if (!response.ok) { + // NOT res.status >= 200 && res.status < 300 + return { statusCode: response.status, body: response.statusText }; + } + const data = await response.json(); + + return { + statusCode: 200, + body: JSON.stringify({ msg: data.value }) + }; + } catch (err) { + console.log(err); // output to netlify function log + return { + statusCode: 500, + body: JSON.stringify({ msg: err.message }) // Could be a custom message or object i.e. JSON.stringify(err) + }; + } +} + ``` + + `async/await` is nicer :) just return an object + +
+ ## Using with `create-react-app`, Gatsby, and other development servers `react-scripts` (the underlying library for `create-react-app`) and other popular development servers often set up catchall serving for you; in other words, if you try to request a route that doesn't exist, the dev server will try to serve you `/index.html`. This is problematic when you are trying to hit a local API endpoint like `netlify-lambda` sets up for you - your browser will attempt to parse the `index.html` file as JSON. This is why you may see this error: From be2de4a44a7d076f12228c9f2c113f45a6e19ee1 Mon Sep 17 00:00:00 2001 From: swyx Date: Thu, 10 Jan 2019 11:56:40 -0800 Subject: [PATCH 2/4] add functions lists and simplify example functions --- README.md | 45 +++++++++++++++++---------------------------- 1 file changed, 17 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 446647d8..67608deb 100644 --- a/README.md +++ b/README.md @@ -72,36 +72,26 @@ exports.handler = function(event, context, callback) { or you can use async/await: ```js - import fetch from 'node-fetch'; export async function handler(event, context) { - try { - const response = await fetch('https://api.chucknorris.io/jokes/random'); - if (!response.ok) { - // NOT res.status >= 200 && res.status < 300 - return { statusCode: response.status, body: response.statusText }; - } - const data = await response.json(); - return { statusCode: 200, - body: JSON.stringify({ msg: data.value }) + body: JSON.stringify({ message: `Hello world ${Math.floor(Math.random() * 10)}` }) }; - } catch (err) { - console.log(err); // output to netlify function log - return { - statusCode: 500, - body: JSON.stringify({ msg: err.message }) // Could be a custom message or object i.e. JSON.stringify(err) - }; - } } ``` - `async/await` is nicer :) just return an object + For more Functions examples, check: + + - https://functions-playground.netlify.com/ (introductory) + - https://functions.netlify.com/examples/ (our firehose of all functions examples) + - the blogposts at the bottom of this README ## Using with `create-react-app`, Gatsby, and other development servers +### Why you need to proxy (for beginners) + `react-scripts` (the underlying library for `create-react-app`) and other popular development servers often set up catchall serving for you; in other words, if you try to request a route that doesn't exist, the dev server will try to serve you `/index.html`. This is problematic when you are trying to hit a local API endpoint like `netlify-lambda` sets up for you - your browser will attempt to parse the `index.html` file as JSON. This is why you may see this error: `Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0` @@ -140,7 +130,7 @@ module.exports = {
-**Using with `Angular CLI`** + Using with `Angular CLI` CORS issues when trying to use netlify-lambdas locally with angular? you need to set up a proxy. @@ -221,14 +211,7 @@ You may also want to add `typescript @types/node @types/aws-lambda`. { "presets": [ "@babel/preset-typescript", - [ - "@babel/preset-env", - { - "targets": { - "node": "6.10.3" - } - } - ] + "@babel/preset-env" ], "plugins": [ "@babel/plugin-proposal-class-properties", @@ -285,7 +268,7 @@ Minor note: For the `identity` field, since we are not fully emulating Netlify I You can do a great deal with lambda functions! Here are some examples for inspiration: - Basic Netlify Functions tutorial: https://flaviocopes.com/netlify-functions/ -- Netlify's list of Function examples: https://functions-playground.netlify.com/ ([Even more in the README](https://github.com/netlify/functions)) +- Netlify's list of Function examples: https://functions-playground.netlify.com/ ([Even more in the README](https://github.com/netlify/functions) as well as our full list https://functions.netlify.com/examples/) - Slack Notifications: https://css-tricks.com/forms-auth-and-serverless-functions-on-gatsby-and-netlify/#article-header-id-9 - URL Shortener: https://www.netlify.com/blog/2018/03/19/create-your-own-url-shortener-with-netlifys-forms-and-functions/ - Gatsby + Netlify Identity + Functions: [Turning the Static Dynamic: Gatsby + Netlify Functions + Netlify Identity](https://www.gatsbyjs.org/blog/2018-12-17-turning-the-static-dynamic/) @@ -309,6 +292,12 @@ If you wish to emulate more Netlify functionality locally, check this repo: http All of the above are community maintained and not officially supported by Netlify. +## Changelog + +- v1.0: https://twitter.com/Netlify/status/1050399820484087815 Webpack 4 and Babel 7 +- v1.1: https://twitter.com/swyx/status/1069544181259849729 Typescript support +- v1.2: https://twitter.com/swyx/status/1083446733374337024 Identity emulation (& others) + ## License [MIT](LICENSE) From cdc87996865a0d6e2405bb26c661d3c66c0057aa Mon Sep 17 00:00:00 2001 From: swyx Date: Mon, 14 Jan 2019 14:40:38 -0800 Subject: [PATCH 3/4] fix typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 67608deb..fe6baff3 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ This is an optional tool that helps with building or locally developing [Netlify Functions](https://www.netlify.com/docs/functions/) with a simple webpack/babel build step. -The goal is to make it easy to write Lambda's with transpiled JS/Typescipt features and imported modules. +The goal is to make it easy to write Lambda's with transpiled JS/TypeScript features and imported modules. ## Installation From 46ea7abde5366413e079e9efb34655c40226e323 Mon Sep 17 00:00:00 2001 From: swyx Date: Wed, 16 Jan 2019 23:17:42 -0800 Subject: [PATCH 4/4] add js jabber podcast --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index fe6baff3..1e3eef1d 100644 --- a/README.md +++ b/README.md @@ -274,6 +274,7 @@ You can do a great deal with lambda functions! Here are some examples for inspir - Gatsby + Netlify Identity + Functions: [Turning the Static Dynamic: Gatsby + Netlify Functions + Netlify Identity](https://www.gatsbyjs.org/blog/2018-12-17-turning-the-static-dynamic/) - Raymond Camden's [Adding Serverless Functions to Your Netlify Static Site](https://www.raymondcamden.com/2019/01/08/adding-serverless-functions-to-your-netlify-static-site) - Travis Horn's [Netlify Lambda Functions from Scratch](https://travishorn.com/netlify-lambda-functions-from-scratch-1186f61c659e) +- [JAMstack with Divya Sasidharan & Phil Hawksworth | Devchat.tv](https://devchat.tv/js-jabber/jsj-347-jamstack-with-divya-sasidharan-phil-hawksworth/) - Great discussion on the problems that Netlify Functions solve - [**Submit your blogpost here!**](https://github.com/netlify/netlify-lambda/issues/new) These libraries pair very well for extending your functions capability: