# Getting Started with 11ty
✋ CAUTION
This third-party integration guide might not be up-to-date with Strapi v4. Contributions (opens new window) are most welcome.
This integration guide is following the Quick Start Guide. We assume that you have fully completed its "Hands-on" path, and therefore can consume the API by browsing this url (opens new window).
If you haven't gone through the Quick Start Guide, the way you request a Strapi API with 11ty (opens new window) remains the same except that you will not fetch the same content.
# Create an 11ty app
Create a package.json
file, install and save Eleventy into your project.
Make sure installation went ok:
npx @11ty/eleventy
# Wrote 0 files in 0.02 seconds (v0.11.0)
# Configure 11ty
11ty does not create any file structure for you. It's up to you to do it.
- Create a
./src/_data
folder containing acategories.js
and arestaurants.js
file. They will be used to fetch your content from Strapi. - Create a
./src/_templates
folder containing adefault.liquid
file. It will be the default template of your project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>
{{ renderData.title }}
</title>
</head>
<body>
<a href="/">Home</a>
{{ content }}
</body>
</html>
- Create a
./src/index.md
,./src/restaurant.md
and a./src/categorie.md
file. They will define how you'll present the data. - Create a
.eleventy.js
file containing the following (make sure to prefix the file's name with the dot):
const HtmlMin = require('html-minifier');
const ErrorOverlay = require('eleventy-plugin-error-overlay');
module.exports = eleventyConfig => {
eleventyConfig.setTemplateFormats(['md']);
eleventyConfig.addPlugin(ErrorOverlay);
eleventyConfig.addTransform('htmlmin', (content, outputPath) => {
if (outputPath.endsWith('.html')) {
let minified = HtmlMin.minify(content, {
useShortDoctype: true,
removeComments: true,
collapseWhitespace: true,
});
return minified;
}
return content;
});
return {
dir: {
input: 'src',
output: 'dist',
includes: '_templates',
data: '_data',
},
jsDataFileSuffix: '.data',
};
};
- Finally, add the following packages to your application:
# GET Request your collection type
Execute a GET
request on the restaurant
collection type in order to fetch all your restaurants.
Be sure that you activated the find
permission for the restaurant
collection type.
Example GET request
const { default: axios } = require('axios');
module.exports = async () => {
try {
const res = await axios.get('http://localhost:1337/api/restaurants');
return res.data;
} catch (error) {
console.error(error);
}
};
Example response
[
{
"id": 1,
"name": "Biscotte Restaurant",
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
"created_by": {
"id": 1,
"firstname": "Paul",
"lastname": "Bocuse",
"username": null
},
"updated_by": {
"id": 1,
"firstname": "Paul",
"lastname": "Bocuse",
"username": null
},
"created_at": "2020-07-31T11:37:16.964Z",
"updated_at": "2020-07-31T11:37:16.975Z",
"categories": [
{
"id": 1,
"name": "French Food",
"created_by": 1,
"updated_by": 1,
"created_at": "2020-07-31T11:36:23.164Z",
"updated_at": "2020-07-31T11:36:23.172Z"
}
]
}
]
# Example
./src/_data/restaurants.js
const { default: axios } = require('axios');
module.exports = async () => {
try {
const res = await axios.get('http://localhost:1337/api/restaurants');
return res.data;
} catch (error) {
console.error(error);
}
};
./src/index.md
---
title: Restaurants
layout: default.liquid
pagination:
data: restaurants
size: 100
alias: restaurants
---
# Restaurants
<ul>
{%- for restaurant in restaurants -%}
<li><a href="/restaurants/{{ restaurant.id }}/">{{ restaurant.name }}</a></li>
{%- endfor -%}
</ul>
./src/restaurant.md
---
title: Restaurant
layout: default.liquid
pagination:
data: restaurants
size: 1
alias: restaurant
permalink: 'restaurants/{{ restaurant.id }}/'
---
# {{ restaurant.name }}
{{ restaurant.description }}
## Categories
{% for category in restaurant.categories %}
<li><a href="/categories/{{ category.id }}/">{{ category.name }}</a></li>
{% endfor %}
Execute a GET
request on the category
collection type in order to fetch a specific category with all the associated restaurants.
Be sure that you activated the find
permission for the category
collection type.
Example GET request
const { default: axios } = require('axios');
module.exports = async () => {
try {
const res = await axios.get('http://localhost:1337/api/categories');
return res.data;
} catch (error) {
console.error(error);
}
};
Example response
[
{
"id": 1,
"name": "French Food",
"created_by": {
"id": 1,
"firstname": "Paul",
"lastname": "Bocuse",
"username": null
},
"updated_by": {
"id": 1,
"firstname": "Paul",
"lastname": "Bocuse",
"username": null
},
"created_at": "2020-08-28T11:43:23.578Z",
"updated_at": "2020-08-28T11:43:23.589Z",
"restaurants": [
{
"id": 1,
"name": "Biscotte Restaurant",
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
"created_by": {
"id": 1,
"firstname": "Paul",
"lastname": "Bocuse",
"username": null
},
"updated_by": {
"id": 1,
"firstname": "Paul",
"lastname": "Bocuse",
"username": null
},
"created_at": "2020-08-28T13:43:21.786Z",
"updated_at": "2020-08-28T13:43:21.786Z"
}
]
}
]
# Example
./src/_data/categories.js
const { default: axios } = require('axios');
module.exports = async () => {
try {
const res = await axios.get('http://localhost:1337/api/categories');
return res.data;
} catch (error) {
console.error(error);
}
};
./src/category.md
---
title: Category
layout: default.liquid
pagination:
data: categories
size: 1
alias: category
permalink: 'categories/{{ category.id }}/'
---
# {{ category.name }}
## Restaurants
{% for restaurant in category.restaurants %}
<li><a href="/restaurants/{{ restaurant.id }}/">{{ restaurant.name }}</a></li>
{% endfor %}
You can find your restaurants and categories by browsing http://localhost:8081/restaurants/<id-of-restaurant>
and http://localhost:8081/categories/<id-of-category>
.
# User Stories
- How Paradigma Digital (opens new window) switched from Wordpress to Strapi and Eleventy.
# Conclusion
Here is how to request your collection types in Strapi using 11ty. Learn more about 11ty (opens new window).