Create a CMS with Angular + Firebase — Part 1
By: Liraz Shaka Amir
Tags: CMS, Angular, Firestore, Firebase, Programming

So how do we start? We’re using firebase — so we need to go over to google’s firebase and create an account. Go ahead; I’m waiting.

Ok, waiting’s done!. Go over to the firebase console. now do the following:

new project instructions — amazing paint skills :)

Create a project. Name it, agree to the terms. Disable google analytics

Great. Now we can create our angular project as usual.

ng new project-name

// select scss

// enable routing

Now we need to add two more npm packages. Angular Material and Angular firebase:



ng add ng add @angular/material // chose what theme you wantng add @angular/fire // will allow us to work with firebase

Now go back to the firebase console and select the Web icon:

Select web icon

Choose app nickname (whatever you want) and click next. you will get this screen:

firebase configuration

Since we’re using angular, we will put all the config inside the environment files. You can create a different config file for testing, production, and development, but we will be using the same config for everything for this tutorial purposes. Notice you have 2 files under the environment folder .prod.ts and .ts. they will look like this:

Be sure to copy your own credentials inside.

Now go back to the Firebase console. We need to add a database to our project. Firebase has 2 different databases, Cloud Firestore or Realtime Database; if you don’t know which one you need for your project, they have a great tool to help you figure it out right here.

For this project, we will go with Cloud Firestore. we will also need authentication, so select both of them:

add products to our project

Let’s start with Authentication. Click on it and inside click Get Started. as you see, they have many options. We will select Google only. Enable it and fill out the form inside. all you have to do is select a good Project public-facing name. This name is what is shown to users when they are asked to authenticate their email to your app. and now select your email. Hit save. That’s it. You’ve got authentication.

Now go to Cloud Firestore and click Create database, select Start in production mode (we will edit the rules later), and click next. Now you will need to select your database's location (The physical location of the server). Select what you want and click Enable. We now have a database.

Go to the rules section. What are the rules? So rules basically tell us which users are authorized to read and write to our database. There is a lot of documentation. They have their own syntax where you can allow everything or even have functions. Feel free to read more about it. for us, this will enough for now:

here we are giving read permissions to all users, but write permissions are only given to someone with the admin's role. This is good for development, but if you're going to publish, I recommend reading more about the Cloud Firestore Rules. If you want more info about Common Expression Language like comments, you can find it here.

If you've never used Cloud Firestore, it’s pretty simple. Firestore is a NoSQL database; this means the data is not stored in a table like SQLite; it is stored in “Collections” — you can think of them as folders. Each collection has “Documents” that contains key-value pairs — they are called fields. this is an example of the data structure:

you can check out this video about Cloud Firestore.

That’s it. Our firebase is ready.

Now let’s go back to our angular app. We're going to create the structure of our app. basically, it means creating all of the components and modules used.

First, add some directories to the app directory.

admin — this is for our admin panel

— this is for our admin panel guards — safeguards for our admin and subscriber routing

— safeguards for our admin and subscriber routing interface — all of our data models will be here

— all of our data models will be here pipes

services

user — this is for our user panel

— this is for our user panel utilities — helping functions

If you’ve enabled routing, then you should also have an app-routing.module.ts file; if not — create one. Create another module named material.module.ts.

this is how your app tree should look like now: