https://github.com/11ty/demo-eleventy-serverless
Run Eleventy in a serverless function
https://github.com/11ty/demo-eleventy-serverless
eleventy serverless
Last synced: 8 months ago
JSON representation
Run Eleventy in a serverless function
- Host: GitHub
- URL: https://github.com/11ty/demo-eleventy-serverless
- Owner: 11ty
- Created: 2021-02-10T23:03:18.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-04T20:43:49.000Z (about 3 years ago)
- Last Synced: 2024-10-29T15:44:53.431Z (over 1 year ago)
- Topics: eleventy, serverless
- Language: JavaScript
- Homepage: https://demo-eleventy-serverless.netlify.app/
- Size: 55.7 KB
- Stars: 59
- Watchers: 5
- Forks: 10
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Eleventy Serverless Demo
Running Eleventy inside of a Netlify serverless function.
_[Read the documentation on 11ty.dev](https://www.11ty.dev/docs/plugins/serverless/)_
## Run it
### Locally
1. Run `npm install`
1. Run `npm start`
1. Navigate to the demo URL at `http://localhost:8080/`
### Production
1. [View the demo on Netlify](https://demo-eleventy-serverless.netlify.app)
1. [Deploy your own to Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/11ty/demo-eleventy-serverless)
## How it works
_[Read the documentation on 11ty.dev](https://www.11ty.dev/docs/plugins/serverless/)_
_This requires Eleventy 1.0 or newer._
1. Use Eleventy as normal.
- In this demo `src` is the input directory.
- For this demo we include one Nunjucks template (`./src/sample-nunjucks.njk`), a Global Data file, an include template, and an Eleventy layout.
- To make any template file into a serverless template, modify your `permalink` object to include a `serverless` key.
```
---
permalink:
build: "/"
serverless: "/:slug/"
---
```
This makes `eleventy.path.slug` (the `slug` name matches `:slug`) available in global data for use in your serverless templates.
2. Add the bundler plugin to your Eleventy configuration file (probably `.eleventy.js`). The name you pass into the plugin (we use `serverless` in this example) should match the key inside of your template’s `permalink` object (`permalink.serverless`).
```js
const { EleventyServerlessBundlerPlugin } = require("@11ty/eleventy");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(EleventyServerlessBundlerPlugin, {
name: "serverless",
functionsDir: "./netlify/functions/",
});
};
```
3. `./netlify/functions/serverless/index.js` is the boilerplate serverless function code. You’ll need to create this yourself.
```js
const { EleventyServerless } = require("@11ty/eleventy");
const { builder } = require("@netlify/functions");
// For the bundler (auto-generated by the plugin)
require("./eleventy-bundler-modules.js");
async function handler (event) {
let elev = new EleventyServerless("serverless", event.path, {
inputDir: "src",
functionsDir: "netlify/functions/",
query: event.queryStringParameters,
});
try {
return {
statusCode: 200,
headers: {
"Content-Type": "text/html; charset=UTF-8"
},
body: await elev.render()
};
} catch (error) {
return {
statusCode: error.httpStatusCode || 500,
body: JSON.stringify({
error: error.message
})
};
}
}
// Netlify On-demand Builder (runs on first request only)
exports.handler = builder(handler);
```
4. Add entries to your `.gitignore` file so the bundles aren’t checked into your repository.
```
netlify/functions/serverless/**
!netlify/functions/serverless/index.js
```