11ty and web components, an awesome combination

11ty (Eleventy) and web components is an awesome combination. It is one of my go-to solutions for building web apps.

Setting up a project with 11ty is pretty simple. You can set it up from scratch or you can use an 11ty starter project.

This post shows you how to get started using 11ty with FicusJS. FicusJS is a set of lightweight functions for developing applications using web components.

The tool we are going to use creates a starter project quickly and easily using 11ty and FicusJS. The tool of choice is Create Ficus App. It is a simple tool that makes creating new projects quick and easy.

The project will contain:

• 11ty development set-up
• FicusJS web components
• Unit testing with Ava and JSDom
• Build tooling for production optimisation

Getting started

Create Ficus App lets you focus on code, not build tools.

To create a project called my-app, run this command:

npx create-ficus-app my-app

Once the my-app directory is created, all you need to do is install NPM packages using NPM or yarn:

cd my-app

# use NPM
npm i

# or use yarn
yarn

Starter projects

Depending on what you need to build, Create Ficus App offers a selection of starter projects.

More to follow soon!

• Basic app - a simple, single HTML page with inline scripts
• 11ty app - a Jamstack site based on 11ty

If you want to choose a starter project, run this command and follow the prompts:

npx create-ficus-app

Summary

Having a simple tool like Create Ficus App can save a lot of time when creating new projects. It gives you a headstart and allows you to incrementally add new tools and features as your project grows.

If you have any feedback on the tool, please visit the Github repo.