First Look at Flarum – Next Generation Forums Made Simple

Flarum is a forums solution that is currently in public beta and is under active development. Today we’re going to take a look at it, get it set up in a Homestead Improved Vagrant virtual machine, and look at the configuration and the features that Flarum offers. Then, we’ll compare it to some other forums platforms to see how it stacks up at a glance.

Environment Setup

For our environment, we’ll be using a Homestead Improved Vagrant VM. More details about the setup can be found in this quick tip on getting Homestead Improved up and running. If another type of development environment is to be used, we can skip this step, otherwise, please follow the above HI setup guide before continuing.

For the purposes of this article, the folder used is flarum and the application name (and host set up in /etc/hosts) is flarum.app. In our Homestead.yaml, we should have our flarum.app entry pointing to the home/vagrant/Code directory.

Now, after vagrant up we should be able to access our app in our browser via http://flarum.app.

Setting up Flarum

We will be loosely following the Flarum installation guide.

First, on our host machine, we download the latest release of Flarum (this article was written using the 0.1.0-beta.2 release). Then, we unzip the contents to our flarum directory.

Webserver Configuration

Next, we vagrant ssh into our Homestead VM, and edit our nginx configuration file.

sudo nano /etc/nginx/sites-available/flarum.app

We’ll need to add the following lines (they can be added just above the location ~ \.php${} block):

    location /api { try_files $uri $uri/ /api.php?$query_string; }
    location /admin { try_files $uri $uri/ /admin.php?$query_string; }

    location /flarum {
        deny all;
        return 404;
    }

Then, we’ll restart nginx to make sure that our changes are saved before we begin:

sudo service nginx restart

Database Configuration

While still logged into our Vagrant machine, let’s go ahead and set up the Flarum database. When creating the new user, we will choose and set a password for the Flarum application to use to access MySQL.

mysql -u homestead -psecret

  CREATE DATABASE flarum;
  CREATE USER 'flarum'@'localhost' IDENTIFIED BY 'password'; 
  GRANT ALL PRIVILEGES ON flarum.* TO 'flarum'@'localhost';
  FLUSH PRIVILEGES;

We may then exit the MySQL prompt (CTRL+C). Now, on the host computer, we open our browser and enter flarum.app/. We should see the Flarum installation screen.

Flarum Installation

We’ll call our test forum “Flarum”. Enter the MySQL connection information. Our user was flarum and our password was password.

For administrator credentials, we will use forumsadmin, an email, and a password. For the purposes of this demo, we will just use password.

Note: There is a known bug in this process at the time of this writing. If Flarum does not accept the administrator name (if it is invalid), it will fail silently. Usernames must only contain letters, numbers, dashes, and underscores.

If all went well, we will be on the main forum screen. Congratulations – our forum is now functional!

Initial Adjustments

Let’s page through the Flarum administration menu first. We can access the administration menu from the user menu in the top right.

Basics

Under Basics, we can change the banner that currently advises us that Flarum is a beta product, and of course the standard Title, Description, etc.

Permissions

Under Permissions, we have a few basic moderation tools, such as:

• Viewing Discussions
• Signups
• Replying
• Post Editing
• Liking
• Moderation Actions

These can all be applied to user groups, and new groups can be created, allowing us to have multiple levels of trust among our users.

Appearance

Under Appearance, we can select the hexadecimal colors we’d like for highlighting and for background elements. We can also toggle on a dark mode or colored header. This is also the place where custom CSS rules can be deployed on top of Flarum’s standard CSS.

Extensions

The Extensions tab shows us all of the currently installed extensions. We can click the dotted menu icon next to each (when hovering over it) to disable, enable, or uninstall. In the future, we will be able to use the “add extension” button, but for now, we’ll have to manually install extensions by dropping them into our extensions folder, if we find (or create) any third party ones.

Tags

The last menu, Tags, allows us to create tags that can be used on discussions. Flarum employs a two level tag hierarchy – primary and secondary tags. At the moment, it seems as though the creation dialogue only allows the creation of secondary tags. We can drag these up and deposit them as children of a primary tag, or leave them on the secondary tags list to be displayed alongside the primary tag(s) in the Tag list. This is a bit confusing, hopefully to be cleared up later in development.

Themes and Extensions

Theming is a mixed bag with Flarum. There is an easy way to add one-off styles modifications, in the Appearance section of the admin panel. Flarum uses the CSS preprocessor LESS, which was chosen for a variety of reasons by the developers over Sass and other options.

Example Customizations

Here is our flarum.app, with Dark Mode turned on via the Appearance administration tab.

We will do a quick customization to demonstrate how simple it is to make small stylistic changes to the theme.

If we go to the Appearance tab in the administration menu, and click ‘Edit Custom CSS’, we can then enter our own custom CSS or LESS.

Our goal for this simple customization will be to alter the color of the ‘Start a Discussion’ button. We would like to make it red, to make it more eye-catching to the new visitor. So, after we identify the class we want to target as IndexPage-newDiscussion, we can go ahead and just write out a single line of CSS:

.IndexPage-newDiscussion {background:#ff0000;}

And that’s all there is to it. If we take a look at our home page again, we will see our change in place:

Changes can, in theory, be made to any of the styles in the app. Now, of course, we will want to alter more than a few small styles when we are using Flarum in production. One way to do that will be to build our own theme files, within the extensions system.

Extensions

If we have alterations to the structure, functionality, or appearance of the instance to perform beyond what the administration menu or default extensions offer, we can create our own extension. Extensions will be an integral part of Flarum as the community grows, especially given the ease with which they can be created. A skeleton extension can be generated as the first step to create an extension. The theming portion of extensions is explained more fully on the themes documentation page. With regards to themes, Flarum also helpfully provides a list of the LESS variables used in the site in the variables.less file, and they use a BEM naming convention for CSS classes.

General Features

• Infinite Scrolling – this is similar to Discourse, another modern forums platform. Users seem to have a very polar response to this – we love it, or we hate it. Historically, forums software limits the amount of topics or replies within a topic to a certain amount per “page”, requiring us to load a new page to view more. In Flarum, a viewer of a conversation can just scroll through a conversation, loading more responses as they go, until the end – however long it is.
• Touch Friendly – this is a feature that makes Flarum really stand out. It’s been touch optimized from the start, with gesture support (swipe right to mark a discussion “read” or left to get more options). The animations aren’t overly bulky and the pages are not noticeably slower to load on mobile, either.
• URLs – Flarum URL formats are intuitive. The url of the tag ‘General’ will be <app base url>/t/general. The URL of our first discussion called ‘test’ which is tagged as ‘general’ will be <app base url>/d/1-test. Also, a post number is appended to the URL to indicate which post within a discussion is being read.
• Editor – Flarum employs a “floating editor” which appears as a sort of pop up attached at the bottom of the page. We can navigate freely around Flarum while composing our reply to a discussion, allowing us to look at other discussions as needed to compose our response. This is a feature also found in Discourse, and it’s quite handy. The Flarum editor supports MarkDown, BBCode, and Emoji, and will be extensible to support more.
• Moderation – The customizable moderation groups and permissions are a definite boon for the platform. Even in beta stages, there is already attention being given to moderation, which any community administrator knows is a critical part of running forums.

Comparison to Other Platforms

Overall, Flarum seems as if at release, it may compare well to modern forums platforms like Discourse. Discourse or NodeBB may well be the only real competitors in the same arena. While other modern forums platforms exist, such as vBulletin 5 or Vanilla, Flarum feels like it stands out in a way countered by few. In some cases, it may boil down to a language preference: Discourse is a Ruby on Rails platform, while NodeBB is a Node.js platform.

Flarum is very mobile friendly, which is a struggle for forums in general, but a critical future-proofing feature. Discourse is getting there, but is still a little clunky on mobile, and NodeBB is also mobile friendly – in fact, it claims to be developed mobile first.

The tag based navigation of Flarum may alienate fans of static categories, but we see this more and more in web applications, and tag based sorting definitely has its advantages. Discourse, conversely, uses both categories and tags, and how the combination works out can depend wildly on the implementation, sometimes very useful, other times just a mess. It may depend on the user base’s preferences whether tag-based sorting is a pro or a con of Flarum.

Resources are another big concern, when comparing platforms, and Flarum wins the contest with most other modern platforms (like Discourse) hands-down. It can run on hosts with lower specifications, and feels snappier. This comes at a cost though, as we are forced to consider that more (relatively) mature platforms such as Discourse may have more stability, and already have large communities to support and extend them. Flarum is not yet even ready for production, so time will tell whether this advantage shrinks or becomes overshadowed.

Conclusions

Whether one chooses Flarum as their forums platform of choice may depend on a variety of things. What language do we prefer? A PHP core makes Flarum an excellent choice for PHP developers and for those working with pre-existing PHP applications. The release roadmap and progress of Flarum may tell us much, as well. We can watch to see the development progress, feedback from users, and features that are added into Flarum. As the extensions system matures, and the theming options, we will be able to gauge how customizable this platform will actually be – and whether or not a strong user base grows behind it, or whether it falters. Either way, it should definitely remain on our radar for future projects!

Frequently Asked Questions about Flarum