Setup Firebase Cloud Messaging for JHipster generated application (Angular 11/Spring boot)

Domagoj Madunić
Agency04
Published in
2 min readJul 11, 2021

In the previous post we have demonstrated the power and the ease of use of JHipster code generator by building the famous Spring “Pet Clinic” application, with the Spring Boot / Angular as its tech stack. In this blog we will show how to integrate Angular based application with Google’s Firebase Cloud Messaging (FCM) service. Google’s Firebase cloud messaging provides an infrastructure along with the API abstraction to send messages across the range of devices, including Android, iOS and Web apps. FCM can be used to send messages directly to the specific device, or to a topic, for messages to be consumed by multiple devices subscribed to it. Later is the showcase for this blog.

That said, in this exercise we will build from scratch JHipster generated Spring Boot/Angular (v 11.x) application whose backend will provide the continuous feed of messages to a FCM topic, which will be consumed by the Angular web client.

To be able to hands-on follow this blog post, you will need to have the following tools in place: Git, Java JDK, Nodejs, npm and JHipster (version 7.0.1. at the time of writing of this post). For the detailed instructions on how to setup your dev environment please take a look at JHipster official setup guide.

1. Create JHipster project and configure Google Firebase SDK

The first step is to create application skeleton. Open the terminal and issue the following commands:

mkdir jhfcm
cd jhfcm/
jhipster

When prompted to do so, answer the JHipster wizard’s questions as shown in the image (and the listing) bellow:

Read the full story on the link.

--

--

Domagoj Madunić
Agency04

CEO and founder of Agency04 — Software development company based in Zagreb. Passionate about software development and 17th century Mediterranean history.