Setting up Firebase Cloud Messaging (FCM) in Ubuntu Server 20.04 and later deploy to Firebase Hosting from scratch.

This setup works in
1. Windows (Edge, Chrome, Firefox)
2. macOS (Chrome, Firefox)
3. Android (Chrome, Firefox)

This setup does NOT work in
1. macOS (Safari)
2. iOS(Safari, Chrome, Firefox)

Image for post
Image for post
Create a new project
Image for post
Image for post
Give your project a name
Image for post
Image for post
Click [Continue]
Image for post
Image for post
Give this project a name in Google Analytics. Choose your desired region.
Image for post
Image for post
Project successfully created
Image for post
Image for post
Add a web app
Image for post
Image for post
Give your web app a name
Image for post
Image for post
Get the sample from Github
Image for post
Image for post
Choose cloud messaging for web
Image for post
Image for post
We will need the folder contents of messaging
Image for post
Image for post
Lets resume to step #3

It is a brand new AWS EC2 Ubuntu Server 20.04 so I’ll have to run these below.

sudo apt update
sudo apt upgrade -y
sudo apt install -y npm
sudo npm install -g firebase-tools
Image for post
Image for post
Login to Firebase after successfully installing Firebase tools
Image for post
Image for post
Run “firebase login” in tmux if you’re running Ubuntu server like me
Image for post
Image for post
Login with your Google account
Image for post
Image for post
Click [Allow]
Image for post
Image for post
Copy the URL
Use a different tmux session, curl the copied URL. Remember to add single quote before and after the URL.
Image for post
Image for post
Login successful.
Image for post
Image for post
Choose hosting
Image for post
Image for post
Choose the project created earlier
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Now we clone the sample project earlier.

cd /tmp
git clone https://github.com/firebase/quickstart-js.git
cd quickstart-js/messaging
cp * ~/oofnivek-medium-fcm/
Image for post
Image for post
Image for post
Image for post

In the index.html, edit the “<YOUR_PUBLIC_VAPID_KEY_HERE>” with your web push certificate key pair. Below are the series of steps of how to get it.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Lastly deploy it to Firebase hosting

Now test if the setup was successful.

Image for post
Image for post
Image for post
Image for post
After clicking [Allow], this is the FCM registration token. Copy it.
Image for post
Image for post
Image for post
Image for post
Click [Send test message]
Image for post
Image for post
Paste the FCM registration token here
Image for post
Image for post
Successfully received the push notification

Next I’ll be writing up on how to send Firebase Cloud Messaging (FCM) push notifications using Bash curl.

< Back to all the stories I had written

Written by

A software engineer, a rock climbing, diving & rollerblading enthusiast, a husband, a father.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store