Eleventy: Building a simple E-commerce site.

If you are a web developer with more than five years of experience, you might have started your career with Javascript for the front-end and probably PHP for the backend. Throughout your career, you should have noticed lots of frameworks and tech evolution. Oh, Once I have seen changes and new versions of the same framework monthly or even weekly(Special thanks to Angular). The reason for the discussion is that it is hard to keep up with the market. One such tech that changed the way static sites are built is called Static Site Generators(SSG). In this article, we will learn what is SSG and explore a powerful SSG framework called Eleventy and we are going to build a simple e-commerce website with it.

What is a Static Site Generator?

A static site generator is a tool that generated plain HTML files from dynamic content. But you may ask why the logic should we do that? Well, to put it simply not all websites need to be dynamic and fetch content and process always. Some sites like landing pages, portfolio websites, brochure websites, etc don’t need to fetch data from an API frequently.

Such sites are better built static than dynamic. By dynamic, we mean building in a way to fetch and do processing frequently(Typically sites built with ReactJS, AngularJS, or VueJS).

There are many SSG frameworks including Next, Gatsby, and Jekyll but in this article, we will be learning Eleventy.

Eleventy:

By this time we know that Eleventy is a static site generator. But what makes it stand out compared to other tools. Below are some important points.

• Requires low configuration out of the box.
• Can be easily integrated with the existing project.
• Supports a wide range of template engines.
• Works great with data.
• Easy deployment.

Enough with theories, let us dive into coding.

E-Commerce application:

In this section, we will build a simple e-commerce site exploring all the Eleventy concepts. Below is the folder structure for the project. As mentioned earlier Eleventy supports a wide range of template engines. In this article, we will be using the Liquid template engine.

The API that we are using is the Fake Store API. And for the CSS, we use Bulma.

All the folders above will be explained in detail later in the section. For now, we will see a brief description of each directory below.

• _data folder contains all the data involved in our application be it a static JSON file or data from API the code resides here. More on this later.
• _includes folder contains all the reusable components and layouts here.
• CSS folder will contain our Bulma CSS file.
• _site contains the generated static files. This is the folder that should be deployed on the server.
• .cache is created by Eleventy itself and is used for caching data(Especially from APIs).
• if you have no idea what node_modules, package.json, and package-lock.json. You should learn the basics of NodeJS before continuing.
• index.liquid is the entry point for the project.
• We will see what is details.listdata-pages.liquid in detail.

index.liquid:

• In the first part, we mention the layout, this is just a YAML representation. Notice all the files are named with the extension liquid.
• {%include ‘_navbar.liquid’%}. This tells us to include _navbar.liquid in this file. By default when you include a file Eleventy will look in the _incudes folder. You can change this configuration.
• The rest of the file is general liquid js code.
• You might notice listdata is not declared but we have used it in this file. These variables will come from the _data folder, Eleventy by default search this variable in the _data folder, if it is not present in the current file.

_data/listdata.js:

This file contains the API call.

• First, we need to install @11ty/eleventy-fetch(npm i @11ty/eleventy-fetch). These are called Eleventy plugins. There are a number of plugins available you can check them out here.
• EleventyFetch is the function to do API calls, under the hood it uses fetch API. We can also see there are two config keys passed, duration(After the specified duration Eleventy will hit the specified API, till then the data from API is cached) and JSON(this specifies the type of data that we are receiving).
• And lastly, we are returning the API data.
• Note that in the previous section we used the listdata variable this is nothing but the name of the file. Now you can notice that the listdata.data has the list.
• So the variable will always follow the name of the file in the _data directory.

_includes/_navbar.liquid:

As mentioned before the _incudes folder will contain all the includable components and also the layouts.

this file contains the navbar code and this will be included on all pages.

_includes/template.liquid:

This is the template file, typically a template file will contain the base structure of a page. In the above example, we can see that the basic HTML code and common headers are being declared.

We don’t need to rewrite this code in each and every file right? So, We create this as a template. The content is a default variable, that actually renders the child file. Here by child file, we mean the files that have set the layout variable as template.liquid(In our project both index.liquid and details.listdata-pages.liquid have their layout as the template.liquid).

details.listdata-pages.liquid:

This file will display the details of the selected product.

• The first part mentions the layout of the page, pagination config, and the permalink.
• In the pagination config, the data key specifies the data for this page, size key specifies the number of data needed to be displayed on a single page. The alias key is the alias for the specified data key.
• The permalink key contains the URL for the details page. So /{{data.id}}/ means that (base URL)/(id) will return the product details of matching the id.
• Next, we include our _navbar. liquid file same as the index.liquid file.
• The rest of the files contain the product details.
• Since we are using the data from the listdata.js file the name of the file should be (filename).listdata-pages.liquid.

To know more about configurations and details on how this works under the hood, check out this link.

Building the application:

First, we need to build the application. Run the below command in the terminal to build the application.

npx @11ty/eleventy --formats=liquid,css --watch

The above command –formats, specifies which file types to include in the build, and –watch will watch for any file changes while we are developing the application and build it when a change is detected.

After running the above command the _site folder will be generated in your root directory.

In the above image, we can see that numerous folders are created while building. All the folders with numbers are ids from the API’s response. As this is a static site this is the way it works. If you are React or Angular developer it will be really awkward but trust me this is the way static sites works.

These folders are generated from the permalink key in the file details.listdata-pages.liquid.

Running the application:

To run a static site we need a server to host it. Serve is an npm library that quickly spins up a web server. To install the package run the below command.

npm i -g serve

Now we can run the below command from the root folder to serve our application.

serve _site

We can see the below status in the terminal after serving.

Now, open http://localhost:3000 in the browser, and we should see the following result.

Result:

The first page displays the product list.

After clicking any product we will display the details of the selected product on a separate page.

Conclusion:

Eleventy is a great tool if you are building a static site. With a low learning curve and minimalist configuration, it’s the best framework to get started. What we have explored and built here is only the basics and Eleventy is capable of more and it is highly configurable with huge support for template engines do check it out here.

Git repo: https://github.com/kishork2120/eleventy-blog.

If you need an in-depth tutorial do check this article, A Deep Dive Into Eleventy Static Site Generator.

If you like this article do check out my other article on Alpine.js beginner tutorial: create a todo app with minimal lines of code.