# Getting Started with 11ty

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 getting started 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 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.
<!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.

Request

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

[
  {
    "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/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.

Request

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

[
  {
    "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/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

# Conclusion

Here is how to request your Collection Types in Strapi using 11ty. Learn more about 11ty (opens new window).

← Svelte →