https://github.com/samthor/11ty-fast-dev
11ty-fast-dev
https://github.com/samthor/11ty-fast-dev
Last synced: about 2 months ago
JSON representation
11ty-fast-dev
- Host: GitHub
- URL: https://github.com/samthor/11ty-fast-dev
- Owner: samthor
- License: apache-2.0
- Created: 2020-12-11T05:00:31.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-12-11T05:12:32.000Z (over 5 years ago)
- Last Synced: 2025-12-27T01:59:08.567Z (6 months ago)
- Language: JavaScript
- Size: 10.7 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
This makes 11ty more efficient when used behind a dev server, making it only compiles your pages when you actually want to see them.
This relies on you running your own dev server.
(This could be built into `eleventy --serve`, I don't know.)
⚠️ This is a crazy idea and perhaps not intended for production use just yet.
You're welcome!
## Usage
Your .eleventy.js should be updated like this:
**TODO(samthor): This should be flagged or only run in `--watch` mode.**
```js
const eleventyFastDev = require('11ty-fast-dev/patch');
module.exports = eleventyConfig => {
// We can't set up 11ty-fast-dev here, but instead need to do it later in
// 11ty's lifecycle. Its calculation of collections is a great place, as this
// is before any files are written.
// TODO(samthor): We only want to do this when flagged or in watch mode and
// so on.
const config = eleventyFastDev.buildConfig(eleventyConfig);
eleventyConfig.addCollection('_11ty-fast-dev', config);
// ... the rest of your config
};
```
Add this handler to your web server (this uses Express):
```js
const {buildEleventyFastDevHandler} = require('11ty-fast-dev/handler');
const staticPaths = ['dist']; // 11ty writes here by default
const eleventyFastDevHandler = buildEleventyFastDevHandler(staticPaths);
// Insert this _before_ your static handlers, so old dist files don't "win".
app.use(eleventyFastDevHandler);
```
Profit!
## Implementation
The eleventy side does two things:
* monkeypatches `TemplateWriter._writeTemplate` so that instead of writing a template, we store this ability into a closure
* opens a web server on "localhost:9999", and when the right page is requested, renders the file
On the server side, it's a pretty basic handler which then goes out and asks "localhost:9999" for the right page.
## Downsides
This will, as stated, only execute your templates and run transforms when you request a file.
If you have side effects in these places, then this won't work for you.
(This is generally considered a bad idea _anyway_).