<- Tutorial homepage

Create a new Bonfire extension

In this tutorial, we'll go through the steps to create a new extension for the Bonfire platform. Extensions in Bonfire are powerful tools that allow you to extend the functionality and features of your application.

This guide is perfect for developers who are looking to contribute new features or capabilities to the Bonfire ecosystem.

By the end of this tutorial, you should have a solid understanding of how to develop and integrate a new extension in Bonfire, leveraging its modular architecture.


What is a Bonfire extension

Extensions in Bonfire are collections of code that introduce new features and enhance the platform's functionality, or explore a different user experience for an existing feature. They can range from adding entirely new pages, such as bonfire_invite_links which lets admins create and share invites with usage limit and expiration date, to implementing specific components or widgets. An example is bonfire_editor_milkdown, which integrates a markdown-first editor for publishing activities.

Extensions are versatile, they can implement their own schema, database, logic, and components, or they can leverage existing fields, context functions, and UI components, or more commonly, a combination of both.

Bonfire's strength lies in its modular architecture. A significant portion of its codebase is included in extensions, each serving specific purposes.

Moreover, extensions often utilise code from other extensions. For instance, 'bonfire_common' and 'bonfire_ui_common' provide a suite of helpers to ease a good amount of tasks.

Create your Bonfire extension

To start building your own extension, you can utilise our custom mix generator task. Simply navigate to the Bonfire app root folder in your terminal and type:

mix extension.new *your_extension_name*

This command creates a new directory in ./extensions named *your_extension_name*, complete with all the necessary files and scaffolding.

Once your extension folder is set up, you're ready to dive into coding. If your extension includes new pages, you need to link them in the main router. To do this, include use_if_enabled(Bonfire.ExtensionTemplate.Web.Routes) within your app's Router module.

Additionally, consider these steps to enhance your extension:

  • Implement extension-specific fake functions for testing purposes.
  • Create extension-specific database migrations.
  • Add dependencies to deps.git and/or deps.hex.

Simultaneously, begin tracking your extension’s development with Git. Initialize a new Git repository directly within your extension’s directory:

git init

After coding your initial features, create an empty repository on your preferred Git platform. Then, commit and push your local changes to make your work accessible and open for collaboration:

git add .
git commit -m "first commit"
git branch -M main
git remote add origin {your-remote-repository}
git push -u origin main

Remember to add your extension to ./config/deps.git (including the branch name), allowing others without access to your fork to utilise it.
And just like that, you've successfully created and prepared your first Bonfire extension and shared with the community 🔥!

Bonfire Networks

Open Collective account Open Source