# Getting Started with 11ty This integration guide is following the [Getting started guide](../getting-started/quick-start.html). We assume that you have completed [Step 8](../getting-started/quick-start.html#_8-consume-the-content-type-s-api) and therefore can consume the API by browsing this [url](http://localhost:1337/restaurants). If you haven't gone through the getting started guide, the way you request a Strapi API with [11ty](https://www.11ty.dev/) 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. :::: tabs ::: tab npm ```bash npm init -y npm install @11ty/eleventy ``` ::: ::: tab yarn ```bash yarn init -y yarn add @11ty/eleventy ``` ::: :::: Make sure installation went ok: ```bash npx @11ty/eleventy # Wrote 0 files in 0.02 seconds (v0.11.0) ``` ### Configure 11ty 11ty do not create any file structure for you. It's up to you to do it. - Create a `./src/_data` folder containing a `categories.js` and a `restaurants.js` file. They will be used to fetch your content from Strapi. - Create a `./src/_templates` folder containing a `default.liquid` file. It will be the default template of your project. ```html {{ renderData.title }} Home {{ content }} ``` - 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): ```js 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: :::: tabs ::: tab npm ```bash npm install axios eleventy-plugin-error-overlay html-minifier ``` ::: ::: tab yarn ```bash yarn add axios eleventy-plugin-error-overlay html-minifier ``` ::: :::: ### 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. _Request_ ```js const { default: axios } = require('axios'); module.exports = async () => { try { const res = await axios.get('http://localhost:1337/restaurants'); return res.data; } catch (error) { console.error(error); } }; ``` _Response_ ```json [ { "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` ```js const { default: axios } = require('axios'); module.exports = async () => { try { const res = await axios.get('http://localhost:1337/restaurants'); return res.data; } catch (error) { console.error(error); } }; ``` `./src/index.md` ```md --- title: Restaurants layout: default.liquid pagination: data: restaurants size: 100 alias: restaurants --- # Restaurants

{{ restaurant.name }}

``` `./src/restaurant.md` ```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 %}

{% 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. _Request_ ```js const { default: axios } = require('axios'); module.exports = async () => { try { const res = await axios.get('http://localhost:1337/categories'); return res.data; } catch (error) { console.error(error); } }; ``` _Response_ ```json [ { "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` ```js const { default: axios } = require('axios'); module.exports = async () => { try { const res = await axios.get('http://localhost:1337/categories'); return res.data; } catch (error) { console.error(error); } }; ``` `./src/category.md` ```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 %}

{% endfor %} ``` You can find your restaurants and categories by browsing `http://localhost:8081/restaurants/` and `http://localhost:8081/categories/`. ## User Stories - How [Paradigma Digital](https://strapi.io/user-stories/paradigma-digital-brand) switched from Wordpress to Strapi and Eleventy. ## Conclusion Here is how to request your Collection Types in Strapi using 11ty. Learn more about [11ty](https://www.11ty.dev/).