Build & Sell Apps, Not Content — Angular with Flamelink and Firebase
Tags: angular, flamelink, firebase, headlesscms
Published: 2021-04-21 19:51:25

Erik Slack | ng-conf | Sep 2020

The main draw of any CMS is that it lets authorized users customize content without having any knowledge of how to code. If someone knows how to use a text editor, then they should be able to create new content using the CMS. I’m going to teach you how to set up Firebase and add [Flamelink](https://flamelink.io/) to your Angular application. You’ll have it up and running in short order!

![An image of the Angular, Firebase and Flamelink logos on a dark blue background. The Angular logo is a red hexagon in the shape of a shield. One half is a darker red for depth and there is a white capital "A" in the middle. The fire base logo is a bright yellow lopsided diamond with a short orange triangle behind it and a tall, yellow-orange triangle sticking behind them both. The fire base logo consists of 3 orange parallelograms, each getting more opaque than the last. They are a darker orange where they overlap. There's a twitter logo in the bottom right hand corner and the handle @erik_slack in matching twitter blue.](https://miro.medium.com/max/700/1*ntbRYVOzk01e1e4NtwiZvQ.png)

## **Old-School Content Management Solutions (CMS)**
Remember Drupal and Wordpress? I sure do! It used to be the bread and butter of my self-employment for about three years. I used to love Wordpress for the separation of concerns between building a website and generating that site’s content a website for someone from the generation of that website’s content. My slogan was, “We tailor the web to fit you!” and I ended up building some pretty fancy applications. I also educated clients on how to use Wordpress admin tools to create content.

Eventually, I began to dislike CMS platforms because of the constraints imposed by their frameworks and languages. I jumped on Angular asap and never looked back. To this day, I would never take on another Wordpress project, and don’t need to thanks to Flamelink and other headless CMS solutions.

![Kid wearing sunglasses is buried in sand up to his neck.](https://miro.medium.com/max/700/0*_S_7NGAhGYNyquxL)
###### Photo by Richard Pennystan on Unsplash

## **Convert to Headless CMS and Don’t Ever Look Back**
Headless CMS decouples the experience of content creators/editors from the web application consuming the created data. Here’s a brief analogy; the people writing the news don’t have any effect on the platform that displays that news. In fact, multiple platforms could display the same news in different ways in infinite locations. Why should content be any different? The correct answer is it shouldn’t.

Headless CMS is the best direction to go for any modern project that has CMS needs. Two of excellent use cases for a headless CMS are:

1. For your business’ clients — your clients need to generate and edit their own content and they do not know HTML or CSS. Or, you wish to separate the responsibility of developing an application from the grunt work of making the content.
2. For the enterprise employer — your company wants to update a site without waiting on developers. To avoid having full-fledged CMS tools which have to be upkept and maintained differently from their other applications, but still keep many of the same features like translations, scheduling, and roles.

Headless CMS will never fully render the classical CMS obsolete, but if you’re a software developer and you already know how to build Angular applications — or any other frameworks/platform — then 99% of the time you should NOT use a classical CMS. You will have greater efficiency, liberty to choose your own tools, and capability for building discrete systems — something we don’t focus enough on sometimes — if you use a headless CMS to power the content of your applications.

![Flamelink logo on geometric field of varying shades of orange.](https://miro.medium.com/max/700/0*BkgZnvCs-oSUV-Ss.png)

## **Enter Flamelink**
Flamelink is a content-centric headless CMS that seamlessly integrates Firebase. Full disclosure: I have not ever nor will I ever be compensated by Flamelink to say this next bit. Flamelink is my go-to choice for headless CMS and here’s why:

* simple to set up
* zero headache to maintain
* it’s easy to teach to non-techy people — no training necessary as it’s fairly self-explanatory.
* it’s Firebase! Don’t get what I mean? I can get an Angular app running with hosting, analytics, database, and backend in just a couple of hours when I pair it with Firebase. Since Flamelink is built on Firebase, you’ll also have headless CMS in a jaw-droppingly short amount of time.

<a href="http://www.youtube.com/watch?feature=player_embedded&v=8Cw5ktNADBQ
" target="_blank"><img src="http://img.youtube.com/vi/8Cw5ktNADBQ/0.jpg">
###### Introducing Flamelink

Flamelink is well-built and powerful in its own right! I’ve been using this tool for personal projects for over a year now and since I started using it so many awesome features have been added. their attentive approach to [customer service](https://flamelink.io/support) has also impressed me. I’ve had a couple of head-scratching moments where I didn’t know why something was broken, but they promptly helped me fix whatever was wrong with my setup. Not only do they have a great product, but the company is hard-working and staffed with the nicest folks! That’s been my experience so far.

Now I’ll walk you through the practical steps to getting started with Flamelink in your Angular application.

![Firebase logo on a light blue background. The word "Firebase" is underneath in white text.](https://miro.medium.com/max/225/1*qvSawCk_m7-iXCHnHGcUjA.png)

## **Get Started With Flamelink, Firebase, and Angular**
There are three parts in this practical guide to setting up Flamelink in your Angular application:

### **Part 1: Set up Firebase**

![4 screen shots which capture the setup instructions for a new Firebase project. Go to firebase to see the same screens.](https://miro.medium.com/max/700/1*gOA4cvKuZphvOaQ0DUf4yQ.png)
###### Setting up a new Firebase project.

1. Register or login to your Firebase account and create a new project. _See screenshot above._
2. Configure your new Firebase project. _See screenshot below._

###### Configuration 1: Set up authentication in Firebase so that you can log in via Flamelink.
![Shows sign-in authentication settings in a Firebase project.](https://miro.medium.com/max/700/0*tpwCSIb7sUrcuhuD)

###### Configuration 2: Configure authorized domains.
![Authorized domains screen from Firebase project configuration. There is a blue arrow pointing the the bottom domain named "app.flamelink.io", it is a custom type domain. The arrow states "Add This One"](https://miro.medium.com/max/700/1*d1vRlR-joALY3BQrvmc5ig.png)

###### Configuration 3: Set database rules. Here’s an example.
![Cloud firestore rules setting.](https://miro.medium.com/max/700/1*5ws8W20El0E_-_aZqnG0pQ.png)

###### Configuration 4: Set storage rules. Here’s an example.
![Firebase storage rules setting.](https://miro.medium.com/max/700/1*h-9nBBJcF5APXimTQ61hTQ.png)

### **Part 2: Set up Flamelink**

###### Flamelink project creation example of first part.
![Image for post](https://miro.medium.com/max/700/1*WodQdwOubrdtPwdzqsn2lg.png)

###### Flamelink project creation example of second part.
![Image for post](https://miro.medium.com/max/700/1*_qOEpFt5h9noWyovnMZPcQ.png)

1. Register or login to your Flamelink account and create a new project. See screenshots above.
2. Configure your new Flamelink project.

First, add some new schemas using the tools in the Flamelink web application for each type of content you want to be able to create. _See screenshots below._

###### Create your schemas.
![Screen shot of a list of schemas. The list consists of 5 rows. The top row is black. On the left is the word "schemas" in white capital letters. On the right side is an input bar that reads "Filter", next to it is an orange button reading "new schema" in white capital letters. There are two list items.](https://miro.medium.com/max/662/0*w4K0Z6g0u09xQD4R)

###### This is what the schema creation process actually looks like. Note the user-friendly drag and drop and clean building of various fields into each schema.
![Image for post](https://miro.medium.com/max/700/1*uRw0CuJ7Ln_EvkBm9T_UGw.png)

This is the moment we’ve all been waiting for — adding the content! So next you’re going to add some content to each of the collections which are labeled by their schema.

###### Create your first content from your schemas.
![Image for post](https://miro.medium.com/max/700/0*mtRXqUU-hjbNuQSk)

###### This is what the content creation process looks like. It’s based directly off of the schema you created for the content. It supports validation of various kinds and multiple languages. You can even determine when it should be published!
![Image for post](https://miro.medium.com/max/700/1*9Iqod_Rn4_6zCNXW0e09pQ.png)

Once you’ve added schemas and content to each schema, you’re ready to see your content come alive in an Angular application. The anticipation is palpable at this point!

### **Part 3: Build an Angular App**
1. **Create your new Angular app or use one you’ve already made.** See [https://angular.io/start](https://angular.io/start) for help making the app.
2. **Install the following dependencies:** @angular/fire, firebase, firebaseui, firebaseui-angular, flamelink
3. **Set up Firebase in your Angular app.** Depending on your needs, this might be as easy as adding the firebase config to your environment file and then loading it and moving on to the Flamelink setup steps. That would be true if you are providing content publicly. If you need to put your content behind an auth wall, see my [github example app](https://github.com/erik-slack/Angular-Flamelink-Firebase) for more details.
4. **Set up Flamelink in your app.** I decided to make a service for all of my Flamelink logic. Again refer to my [github example app](https://github.com/erik-slack/Angular-Flamelink-Firebase) for more details on the specifics.

Now that your application is set up and you’re seeing content powered by Flamelink, let me bestow upon you a bit more of my perspective. I’ll share with you some things you can do that are beyond the scope of this article — and if enough people comment and ask me to delve more into these more advanced Flamelink topics then I’ll do so. I also want to share some things that you should be aware of regarding security when using Flamelink and Firebase.

## **Advanced Usages of Flamelink**

### **Using Flamelink with NGRX**
Something to note is that Flamelink can work seamlessly with [NGRX](https://ngrx.io/docs) store which is a tool for state management in Angular based on RxJS. Get your data via @ngrx/effects from Flamelink and store it to be selected via selectors by your components. With the proper caching of network requests and by using the super-powerful selectors of NGRX you can optimize the usage of your Firebase data to reduce the costs significantly. Keep in mind it’s only free to use Firebase up to certain thresholds of the various features it offers. Click [here](https://firebase.google.com/pricing) to see Firebase pricing details.

![Logo of nrwl/nx.](https://miro.medium.com/max/400/1*QY9IfY-jvSEsoj8hVttG2g.png)
###### Nx brings monorepo with exceptional tooling to Angular and other frameworks.

### **Using Flamelink with NRWL/NX**
I’ve used Flamelink without any issue in my [NX monorepo](https://nx.dev/angular) with great success and no amount of increased frustration. I bring this up because this is a popular way to build Angular apps, and I’m a big fan even for smaller projects.

## **Some Insights and Tips**

### **Secure Your Database!**
I’m not an expert on this yet, but I’ve learned that you need to be wise about securing your Firebase to avoid giving too much access to your DB. Read this article to learn how to [secure your database if you used RTDB](https://itnext.io/how-to-set-firebase-security-rules-for-your-flamelink-project-d855e8210198?gi=ab1d93a6b0fe). If like me you used Cloud Firestore, [here’s an article that can help you with that](https://intercom.help/flamelink/en/articles/3068550-flamelink-and-cloud-firestore).

### **Touching On SDKs**
There are currently two javascript sdks for Flamelink and the newer one I used is [https://flamelink.github.io/flamelink-js-sdk/#/](https://flamelink.github.io/flamelink-js-sdk/#/). The older one looks exactly like the newer one so watch the url to make sure you’ve got the right one. Their sdk is pretty great, but I’ve noted several bugs over the past year in it. That’s to be expected as it’s still in Alpha. Filtering, Sorting, Limits, etc. are all possible using this sdk.

### **What About Support?**
If you need support from Flamelink there are several avenues available to you. If you pay top dollar for it, you can get direct support from the company that is fast and nuanced to your specific needs. If you’re on the free or cheaper plans you can still get support through the Flamelink community slack. There are channels for all of the different platforms and general things as well. I’ve always gotten great responses to every question, and I rate their service as 5 stars. Oh, and those bugs I found in their sdk which I mentioned last paragraph? They fixed or addressed every one of them. This is a community that invests back into itself.

## **Special Offer From Flamelink to Our Readers**
The Flamelink team has an exclusive offer for readers of the ng-conf publication. Sign up for any paid Flamelink project using the _**NGCONF-FLAMELINK-20**_ promo code before September 30, 2020 and get 20% off your subscription for 3 months. There are only 100 coupons up for grabs, so sign up today to see how Flamelink can help add value to your Firebase project.

## **Conclusion**
I consider Flamelink to be another very valuable tool in my application development toolkit and I hope you enjoyed learning about it together. Flamelink isn’t meant to solve every problem with your website, and there are many cases where using it probably wouldn’t make much sense. It WILL help if your app has large amounts of content or you just want to separate the responsibility of the content from the development. Using Flamelink with Angular is easy. I can’t wait to see what you build with it. Please share back in comments as appropriate on how you have used the material in this article.

The final thought I want to touch on in this article is this — be proactive in suggesting Flamelink or another headless CMS to companies and clients who have a lot of frequently changing content. Speak up and you could possibly turn a tedious chore into a career power-move that not only impresses your clients or bosses, but makes your job that much easier.

_This article is adapted and expanded from a talk I gave at the [UT Angular Meetup in 2019](https://www.meetup.com/AngularUtah)._

**Links:**
* Flamelink: [https://flamelink.io/](https://flamelink.io/)
* Flamelink Support: [https://flamelink.io/support](https://flamelink.io/support)
* Firebase: [https://firebase.google.com/](https://firebase.google.com/)
* My Example Repo: [https://github.com/erik-slack/Angular-Flamelink-Firebase](https://github.com/erik-slack/Angular-Flamelink-Firebase)
* SDK: [https://flamelink.github.io/flamelink/#/getting-started](https://flamelink.github.io/flamelink/#/getting-started)

## **ng-conf: The Musical is coming**
ng-conf: The Musical is a two-day conference from the ng-conf folks coming on April 22nd & 23rd, 2021. Check it out at [ng-conf.org](https://www.2021.ng-conf.org/)