Angular 6 FireBase Gallery <ServerLess>

Published in

codeburst

7 min readJun 7, 2018

Ever wanted to build a server less image gallery application with out wanting to deal with client side — server side programming separately? Follow this tutorial to find out how.

Gallery App developed using Angular 6 and Google cloud services

In this project, I want to share with you the approach I took to develop a beautiful gallery application using just a client side framework (Angular) and some google cloud services. Please check how I developed the same application using MEAN stack and Amazon Web Services here and here where I dealt with client side and server side logic separately.

As you might be already familiar, Angular is a TypeScript-based open-source front-end web application platform led by the Angular Team at Google and by a community of individuals and corporations. Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google in 2014. Google consistently develops the product adding more features to it to make developer’s life easy. Check out whats new with ’18 firebase. To understand what new with Angular 6, please refer to this article from walkingtree.tech.

In order to follow this tutorial, you are expected to have some familiarity with developing applications in Angular framework and some understanding on how cloud services work.

By the end of this tutorial, you should be able to build a gallery application which lets you
1) Upload an image onto Google storage and add an entry to your application database (FireStore). You would also learn to develop a progress bar which shows the progress of the uploading.
2) View / maximize the images which you have uploaded.
3) Delete the image from Google storage and your application database.

I am going to divide this tutorial into 3 sections Set Up, Development & Deployment for better readability.

Set Up:

Let’s start with setting up FireBase. Create an account with firebase if you have not done it already and log into your console.

Create a new project.

Click on ‘Add Project’ , Give project name, Accept conditions and Create Project.

Go to project settings

Under ‘General’ settings, scroll down on this page to find ‘Add Firebase to web app’

Take a note of the api config details. These details are used in your Angular code to communicate with this app on firebase.

Let’s get into setting up the project on your local machine. I used VS Code as my IDE for development. You need to have Node JS installed on your machine. Use this link to download and install it. Install Angular CLI. Create new angular project ‘ng new firebase-angular-gallery’ . and install firebase-tools globally and install firebase and angularfire2 for this project. Initialize git repository ( assuming you already have git on your system . If not, you need to download & install git first ).

npm install @angular/cli -g
ng new firebase-angular-gallery
npm install firebase-tools -g
npm install angularfire2 firebase --save
git init

Create 2 components, one for gallery and other for notifications and 1 service for notifications.

ng g c gallery --spec false
ng g c notification --spec falseng g s notification-services --spec false

The gallery component contains our core application logic, while the notifications component contains code related to modal notifications.

Necessary module for the project.

Make sure you import all necessary modules for the project in app.module.ts. This completes our set up. Lets look into some code now.

Development:

Here is the full repository of the application on git hub.

zendizmo/angular-firebase-gallery

angular-firebase-gallery — Firebase image gallery application using angular framework

github.com

Let’s understand what is happening in the code.

Let’s take a look at the gallery component html file. This is the first component loaded from app.component file. This has code for uploading a new image, viewing the uploaded images , maximizing the image and deleting the image.
I used MDbootstrap (material design for twitter’s bootstrap), flex and angular’s ‘ngFor’ to display multiple images per row. When I use ‘col-md-3’ class inside a row class and subject that to a loop, I can create a view of displaying multiple rows equally spaced as per ‘col-md-3’.
I used ‘bootstrap’s card’ to display the image in the form of a card. To know about it visit this link. I used modals to view the image in larger size. When the user clicks on the image or clicks on ‘Maximize’ button, I would send image details to the modal. I used ‘notification component’ and ‘notification services’ to do this. More details on notifications comes later in this tutorial.

This code creates below card with ability to maximize on modal upon clicking the image or on the ‘maximize’ button. It also has trash icon which deletes the the image. The async pipe on images subscribes to an Observable and returns the latest value of set of images it has emitted. When a new value is emitted, the asyncpipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

This git gist show code for uploading a new image.

This is the snippet for displaying ‘Progress bar’ which shows progress of the upload. The async pipe subscribes to an Observable of progress defined in typescript file and returns the latest value of progress it has emitted. When a new value is emitted, the asyncpipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

Green bar at the bottom of the above image increases in width based on the upload progress.

This is Gist from scss file. The important part is the for progress bar. The transition: width 0.1s ease gives the effect of increase in width based on the upload percentage.

Let me switch topics and explain why I chose these technologies. I chose Angular framework because of its scalability and its powerful CLI. Also, the language is backed by the tech giant ‘Google’. The team does incredible job responding to developer queries and they constantly upgrade the language to make it even better. One of the popular mobile app development frame works ‘ionic’ uses angular framework.
The reason I chose ‘Firebase’ for database, storage and hosting is a no brainer. Firebase is a product from google aswell. The integration is seem less between Angular and Firebase as they are all from same eco system. The documentation is very thorough and there is lot of help available online to learn about it yourself.
To learn more about Angular frame work, please visit https://angular.io/.
To learn more about Firebase, please check this.

Lets get back to code now :)
On selecting a file, I called “onFileChange(event)” function which previews the image and calls another function startUpload(event.target.files) which starts uploading the file to google storage.

This code contains logic when the ‘upload’ button is clicked and when the image is selected. Note that, the last step of ‘onFileChange’ function calls ‘startUpload’ function passing the file information.

This code contains the logic to upload the image on firebase storage and add an entry firebase firestore (database) with the returned path (downloadURL( ) ). Please also note that, I am creating an id for the document which I would later use for deleting the image from the database. The ‘imagePath’ field is used as a reference to delete the image from firebase storage.

For more details on firebase storage functions, please visit this link.
For more details on firebase firestore functions, please visit this link.

Snippet for loading the images and deleting the image. Note that the last statement is used to delete image from storage and the statement before that is for deleting the image information from database (firestore).

This git gist contains other functions for maximizing the image and deleting the image.

Lets now take a look at how I set up notifications.
Below are some of the notifications implemented in this project. I made use of Twitter Bootstrap’s modals to do this.

I have created different types of notification templates (general notification, delete notification, maximize notification) for my requirement. This is how a sample notification modal would look like in angular html file. Note that the ‘title’ and ‘message’ are passed from the typescript file.

Here is the typescript file for notifications component. You can add more parameters to the ‘notification’ object to customize it further. For example, adding a parameter ‘type’ can potentially reduce the code in notification.component.html file. I could use that parameter to display ‘delete’ button or not. I have not included that parameter in this code though.
I have used ‘rxjs subjects & subscriptions ’ to pass the information between different components. For more details on rxjs subjects and subscriptions, please click on those links.
The deleteItem function emits an event which is captured by the parent component (app.component). More about eventEmmitters here.

Code gist from app.component.html file. From app component, the deleteImage() function in gallery component is triggered.

code gist from notifications-services.service.ts file. You can see I am using ‘subject’ as a way of casting my data (notifications in my case) as an observable, so that my notifications component can subscribe to the changes happening to it dynamically.

This completes the development part of the tutorial. Lets see how we deploy the application on google hosting services.

Deployment:

Build the angular project. Make sure the “outputPath” is set to “dist” in angular.json.

ng build

firebase login

Initialize firebase

Select ‘Hosting’ option and press enter.

Select ‘dont setup a default project’ and press enter

Type ‘y’ and press enter. This is to use index.html file which is generated with ng build as main page.

Type ’N’ and press enter. This is NOT to overwrite the index.html file with firebase init default index.html file.

After initialization, to deploy, type ‘firebase deploy’ command.

In just few seconds, your app will be deployed on google cloud. Click on ‘Hosting URL’ to access your application.

This completes the tutorial. Please keep in mind that the application which you are going to develop, if you are going to make it public, chances are that your Firebase storage gets flooded by unwanted images from public. So, it is recommended to use an authentication mechanism to control this. This tutorial does not have authorization part.
Firebase comes with seemless integration with Angular framework for authentication part as well. Use the Sign-in Methods page under Authentication to enable and configure sign-in methods for your project. Here is the link for the same.

Please follow me if you liked this tutorial. Please give suggestions (if any) in the comments below. Show you support with your claps :). Cheers!

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.