From a8ab5bb0bb2da572599ba8d3f35cbbe0b74ba7ef Mon Sep 17 00:00:00 2001 From: Ben Hong Date: Tue, 22 Feb 2022 17:26:51 -0800 Subject: [PATCH] docs (#2): add Prince's documentation on forms to README --- README.md | 35 ++++++++++++++++++++++++++++++----- 1 file changed, 30 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 3f0a4e1..39e7f5d 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Nuxt Toolbox Template +# Nuxt Toolbox Template ## Build Setup @@ -18,7 +18,9 @@ $ npm run generate ``` ## Deploy to Netlify + --- + Want to deploy immediately? Click this button [![Deploy to Netlify Button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/nuxt-toolbox) @@ -40,26 +42,30 @@ You can also use `netlify deploy (--prod)` to manually deploy and `netlify open` ### Running Locally -You can use `netlify dev` from the command line to access project information like environment variables as well as +You can use `netlify dev` from the command line to access project information like environment variables as well as + - test functions - test redirects - share a live session via url with `netlify dev --live` - [and more](https://cli.netlify.com/netlify-dev/) :) ### Deployment Resources + - [CLI docs](https://docs.netlify.com/cli/get-started/) - [File-based Netlify Configuration](https://docs.netlify.com/configure-builds/file-based-configuration/) - [Netlify Dev Overview](https://www.youtube.com/watch?v=RL_gtVZ_79Q&t=812s) - [Netlify Edge, CDN deployment](https://www.netlify.com/products/edge/) ## Redirects + --- -In the [`netlify.toml`](./netlify.toml) configuration file there is an example of how to implement redirects. Redirects can be used to do many things from redirecting Single Page Apps more predictably, redirecting based on country/language to leveraging On-Demand Builders for [Distributed Persistant Rendering](https://www.netlify.com/blog/2021/04/14/distributed-persistent-rendering-a-new-jamstack-approach-for-faster-builds/). -In the example we'll be using redirects to have a shorter endpoint to Netlify functions. By default, you call a Netlify function when requesting a path like `https://yoursite.netlify.com/.netlify/functions/functionName`. Instead, we'll redirect all calls from a path including `/api` to call on the Netlify functions. So the path will be `https://yoursite.netlify.com/api/functionName`, a lot easier to remember too. +In the [`netlify.toml`](./netlify.toml) configuration file there is an example of how to implement redirects. Redirects can be used to do many things from redirecting Single Page Apps more predictably, redirecting based on country/language to leveraging On-Demand Builders for [Distributed Persistant Rendering](https://www.netlify.com/blog/2021/04/14/distributed-persistent-rendering-a-new-jamstack-approach-for-faster-builds/). +In the example we'll be using redirects to have a shorter endpoint to Netlify functions. By default, you call a Netlify function when requesting a path like `https://yoursite.netlify.com/.netlify/functions/functionName`. Instead, we'll redirect all calls from a path including `/api` to call on the Netlify functions. So the path will be `https://yoursite.netlify.com/api/functionName`, a lot easier to remember too. ### Example + ```toml [[redirects]] from = "/api/*" @@ -80,4 +86,23 @@ There are many ways to use redirects. Check out the resouces below to learn more - [Redirect options](https://docs.netlify.com/routing/redirects/redirect-options/) - [Creating better, more predicatable redirect rules for SPAs](https://www.netlify.com/blog/2020/04/07/creating-better-more-predictable-redirect-rules-for-spas/) - [Redirect by country or language](https://docs.netlify.com/routing/redirects/redirect-options/#redirect-by-country-or-language) -- [On-Demand Builders](https://docs.netlify.com/configure-builds/on-demand-builders/) \ No newline at end of file +- [On-Demand Builders](https://docs.netlify.com/configure-builds/on-demand-builders/) + +## Serverless Functions + +With Netlify, you can build out server-side code without having to setup and maintain a dedicated server. Inside of our default folder path, [`netlify/functions`](./netlify/functions) you can see an example of the format for JavaScript functions with the [`joke.js`](./netlify/functions/joke.js) file. + +The function format expects a function named `handler` to be exported. This will be the function that will be invoked whenever a client makes a request to the generated endpoints. The endpoint's format is followed as `/.netlify/functions/joke`. So whenever the site is deployed, if you go to `https:///.netlify/functions/joke` you will see a random joke! + +> Side note: In our example, we're using `import` to include data from another location and `export const const handler` to let our function be consumed by Netlify. We're able to do this because of [esbuild](https://esbuild.github.io). This is a bundler configuration we set in our `netlify.toml` under `[functions]`. + +### Serverless Functions Resources + +There is quite a bit you can do with these functions, so here are some additional resources to learn more! + +- [Netlify Function Format](https://docs.netlify.com/functions/build-with-javascript/#synchronous-function-format) +- [Build Netlify Functions with TypeScript](https://docs.netlify.com/functions/build-with-typescript/) +- [Event-triggered Functions](https://docs.netlify.com/functions/trigger-on-events/) +- [What are Background Functions](https://www.netlify.com/blog/2021/01/07/what-are-background-functions/) +- [Netlify Functions - Examples](https://functions.netlify.com/examples/) +- [Using esbuild as your bundler for new ECMAScript Features](https://www.netlify.com/blog/2021/04/02/modern-faster-netlify-functions/)