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 to your Angular application. You’ll have it up and running in short order!

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.

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.

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.

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 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.

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

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.

Configuration 2: Configure authorized domains.

Configuration 3: Set database rules. Here’s an example.

Configuration 4: Set storage rules. Here’s an example.

Part 2: Set up Flamelink

Flamelink project creation example of first part.

Flamelink project creation example of second part.

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.

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.

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.

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!

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 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 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 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 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 to see Firebase pricing details.

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 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. If like me you used Cloud Firestore, here’s an article that can help you with that.

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/#/. 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.

Links:

• Flamelink: https://flamelink.io/
• Flamelink Support: https://flamelink.io/support
• Firebase: https://firebase.google.com/
• My Example Repo: https://github.com/erik-slack/Angular-Flamelink-Firebase
• SDK: 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