WebInsights

Introducing Flamelink the CMS for Firebase

APIcontent management systemprogramming languageCMSGoogle Cloud PlatformHeadless CMSFlamelinkFlamelink CMSFirebasecloud firestorerealtime databaseJavaScript SDKfirebase console
Updated December 7, 2020 Dipak Odedra

Firebase is renowned for the power that it gives to developers to build amazing products such as websites, apps, and other digital platforms while allowing them to take their ideas from a concept to a high-quality product, quickly and easily. 

 

Whilst this is true for developers who are familiar with back-end services such as Realtime Database and Cloud Firestore, people who are less technical have found it slightly difficult to use when implementing updates and during general management.

 

But to any problem, there is a solution, and the solution to this is the Flamelink CMS, a headless Content Management System (CMS) made specifically for Firebase. 

 

In this article, we will talk about how to connect Flamelink to your Firebase project, and how to create and customize your schemas for the final product. But, before we get into that, let’s take a look at what exactly Flamelink is.

 

Let’s dive in!

 

flamelink
Source: jamstack

 

What is Flamelink CMS?

Flamelink is a headless CMS that is built specifically for Firebase and therefore supports both Realtime Database and Cloud Firestore. It will allow developers to gain from the many benefits of using Firebase and the Google Cloud Platform, whilst also giving slightly less technical people an interface that is intuitive and easy. 

 

Therefore it is an easy way for developers to focus on what matters, writing the code that builds the apps, while the content creators can easily add, update, and manage the content to suit their personal needs. 

 

flamelink cms
Source: jamstack
Powered by Google’s Firebase

Flamelink is powered by Google’s Firebase, meaning that it is extremely fast, secure, and reliable. Flamelink uses the features of Firebase to create an API driven headless CMS which can allow you to effortlessly manage content. Since it’s easy to use, it’s perfect for both coders and content managers. 

 

Flexible Front-End

Flamelink is compatible with numerous different programming languages so it doesn’t matter which coding language you use, Flamelink doesn’t discriminate.

 

Realtime Updates

The integration between Firebase and Flamelink ensures that everything works smoothly and seamlessly, and that content can be updated and managed with one simple click.

 

Official JavaScript SDK

You can easily integrate it with the Flamelink CMS since it’s a promise-based, simple and intuitive API that supports multiple environments and languages, and is built upon the Firebase SDK. 

 

Now we know what the Flamelink CMS is, how do we set it up? Let’s take a look.

1. Create a Firebase Project

To get started, first, you need to navigate to the Firebase Console and sign in, and then select Add Project. Here, you want to enter a name for the app you’re making.

 

flamelink add project
Source: googleblog

 

At this point, you’ll have to answer a few more questions. For the purpose of this article, the choices you make won’t matter, however, answer them depending on your needs and wants. After you’ve answered said questions, your Firebase project will then be ready to go!

 

2. Firebase Configuration

The next step is to ensure that you can create, read, and update your content via the Flamelink interface. To do this, you’ll be configuring the Security Rules and Firebase Authentication

 

To start with, navigate to Authentication on your Firebase console and enable your preferred sign-in methods.  This will need to be configured if you want to log in to your Firebase project using the Flamelink interface. 

 

flamelink authentication
Source: googleblog

 

Then, you want to confirm your authorized domains, and don’t forget to add the app.flamelink.io domain. This will allow the project’s Firebase Authentication to be used by Flamelink directly. 

 

flamelink authorized domains
Source: googleblog

 

The next step is to configure the Security Rules. For this, we’ll be using Cloud Firestore, so in the side-panel, look for the Firestore section. If necessary, create a database, and then navigate to Rules

 

Flamelink cloud firestore database
Source: googleblog

 

Here you will want to write your rules. For more in-depth information on how to write secure rules give the official documentation a read. 

 

You will also need to ensure that the rules for Cloud Storage for Firebase are also configured. To do so, navigate to Storage > Rules. Here you will be able to enter rules. Once again, it is paramount that you ensure you write secure rules before you launch your app.

 

3. Creating a Flamelink Account & Project

This is the point where your Firebase project will need to be linked with a Flamelink project. It only takes a few simple easy steps. Follow this tutorial below to help you through it. 

 

 

4. Setting Up Flamelink’s Schema.

The final step is to simply configure Flamelink and to do this you will use something called a Schema. A Schema essentially works like a Google Form that allows you to manage your own fields and structure for your data.

 

All this is possible thanks to an easy drag-and-drop feature, requiring no code and, the data that is inputted in the Schema will appear in Firebase ready to be used immediately. The schema builder gives you total freedom and control.

 

4.1 There are 3 types of Schema’s: Single, Collection, and Form.

Single is a type of schema that is used for pages that have a unique content structure, one that differs between pages. Examples of this would be a Frequently Asked Questions (FAQ) page, About Us page, Terms, and Conditions, etc. All of these require different data inputs and therefore would be regarded as a single content type.

 

Collection, on the other hand, is a schema structure that is used when you want to have a page that has a similar layout. For example, you could create a schema for Blog Posts, and your resulting blog posts will have the same schema layout. Other examples would be News Posts, Article Posts, etc.

 

Form is a type of schema that is used for pages that need to be filled by your app users. For example, a Comment Section, or Contact Form would have a Form schema. 

 

4.2 Building a Schema

To build a schema, first, navigate to the Flamelink dashboard which you have just linked to Firebase, and log in if you aren’t already.  

 

flamelink schema
Source: medium

 

Click New Schema and fill in the details on Schema Details

 

schema details
Source: medium

 

You will need to complete the following sections:

  • Title: The name given to your content type such as ‘Home’ page, ‘About Page’. 
  • Schema ID: This will be automatically the same as your Title, but you can customize it as you wish. It should be noted that it should be unique for all your schemas since it will be the reference point for all the data in a schema, and once saved, it cannot be changed.
  • Description: A brief description explaining what this schema, or content type, is. It is only for your reference.
  • Type: This is where you state which content type from Single, Collection, and Form it will be.
  • Group Name: Multiple single schemas can be grouped together, but can’t group Collections. When you type your group name in, make sure it’s the same as your current group name (case sensitive). If the group doesn’t exist, it will create a new one.

 

The two toggles at the bottom of the form provide you with the following options:

  • Sortable Toggle: With a Collection schema, you will be able to sort which entries should be positioned under which, using the Content section. For example, if you had a Blog Collection, you could differentiate between categories such as ‘Tech’, and sub-categories such as ‘Hardware’ or ‘Programming’.
  • Enable Toggle: This will enable the schema to be visible or not under the Content section

 

Once you’re done filling in the Schema Details, hit Save at the top right of the screen to confirm and save your changes. 

 

4.3 Adding Fields

Flamelink is built in a way that gives 100% freedom in the choice and order of Fields, which can be customized to the specific needs of you and your project. 

 

Select Add Fields at the top of the screen and you will be shown a list of all the possible Fields that you can add to your schema. 

 

schema fields
Source: medium

 

Drag and drop the fields you want from the panel to the preview panel on the right. Alternatively, you can double click on the field or template group which you want and you will achieve the same goal. 

 

Field panel right
Source: medium

 

Once you have added a field, a green checkmark will appear in the top right corner of the field, indicating it has been added successfully. To confirm this, click Save in the top right corner of the page.

 

Now is when you can begin to customize your fields. Select a field to open up the Edit Fields view. This will give you free rein to customize the field as you wish. When you’re done, don’t forget to click Save to confirm these changes. 

 

You’re All Set!

And that’s it! It’s incredibly easy, this is all you need to know in order to master the Flamelink CMS. 

 

Like any other CMSs out there, Flamelink is built with users’ in mind and made for getting the best results with the least effort. At the end of the day, even the most experienced developers would rather spend time on what matters, i.e. perfect their code instead of battling with content and non-responsive images.

 

 

So now, we’ve covered everything from describing what Flamelink is, to how to link it with Firebase, and most importantly, how to create and customize your content in order to create the best possible product you can. All that remains is for you to get your creative juices flowing and implement what we’ve shown. 

 

And, f you found this helpful, check out some of our other articles






Leave a Reply

Your email address will not be published. Required fields are marked *