# 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 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.

npm init -y
npm install @11ty/eleventy
 
        Copied to clipboard!

Make sure installation went ok:

npx @11ty/eleventy
# Wrote 0 files in 0.02 seconds (v0.11.0)
 
        Copied to clipboard!

# 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 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>
 
        Copied to clipboard!

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',
  };
};
 
        Copied to clipboard!

Finally, add the following packages to your application:

npm install axios eleventy-plugin-error-overlay html-minifier
 
        Copied to clipboard!

# 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/restaurants');
    return res.data;
  } catch (error) {
    console.error(error);
  }
};
 
        Copied to clipboard!

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"
      }
    ]
  }
]
 
        Copied to clipboard!

# 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);
  }
};
 
        Copied to clipboard!

./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>
 
        Copied to clipboard!

./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 %}
 
        Copied to clipboard!

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/categories');
    return res.data;
  } catch (error) {
    console.error(error);
  }
};
 
        Copied to clipboard!

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"
      }
    ]
  }
]
 
        Copied to clipboard!

# 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);
  }
};
 
        Copied to clipboard!

./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 %}
 
        Copied to clipboard!

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).

← Jekyll Svelte →