Hi Azure Team, I am looking to implement push notifications in my existing React web application that is using a Node Express backend. I would like to integrate Azure Push Notification Service (or any other relevant Azure service) to handle push notifications for this web app. Could you please guide me on how to set this up? Specifically, I need help with the following: What Azure services should I use for push notifications in a web app (e.g., Azure Notification Hubs, Azure Communication Services, etc.)? How to set up Azure Push Notifications to work with my React frontend? How to configure and send notifications from the Node Express backend to the React app? Any best practices for ensuring secure and reliable push notifications in this setup? If there are any tutorials or examples available for integrating Azure Push Notifications with React and Node.js, that would be very helpful. Looking forward to your response. Thank you!

Setting up Azure Push Notifications for React Web App with Node Express Backend

Rohit 0

Hi Azure Team,

I am looking to implement push notifications in my existing React web application that is using a Node Express backend. I would like to integrate Azure Push Notification Service (or any other relevant Azure service) to handle push notifications for this web app.

Could you please guide me on how to set this up? Specifically, I need help with the following:

What Azure services should I use for push notifications in a web app (e.g., Azure Notification Hubs, Azure Communication Services, etc.)?
How to set up Azure Push Notifications to work with my React frontend?
How to configure and send notifications from the Node Express backend to the React app?
Any best practices for ensuring secure and reliable push notifications in this setup?
If there are any tutorials or examples available for integrating Azure Push Notifications with React and Node.js, that would be very helpful.

Looking forward to your response. Thank you!

Shree Hima Bindu Maganti 1,605 Microsoft Vendor

Hi Rohit
Welcome to the Microsoft Q&A Platform!
setting up push notifications in your React web application with a Node Express backend using Azure Notification Hubs.
Use Azure Notification Hubs for push notifications.

Generate VAPID keys using the web-push library.
Go to Azure Portal >Create a Notification Hub >Set up a Namespace.

Generate VAPID keys
npx web-push generate-vapid-keys
Add VAPID public/private keys to Notification Hub settings under Push Notifications.
Set Up Service Worker (sw.js).

self.addEventListener('push', (event) => {
    const data = event.data.json();
    self.registration.showNotification(data.title, {
        body: data.body,
        icon: data.icon,
    });
});

Request Notification Permissions:

async function subscribeUser() {
    const registration = await navigator.serviceWorker.register('/sw.js');
    const subscription = await registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: '<Your VAPID Public Key>',
    });
    await fetch('/api/save-subscription', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(subscription),
    });
}

Replace <Your VAPID Public Key> with the public key from Azure Notification Hubs.
npm install web-push body-parser

Save and Send Notifications.

const express = require('express');
const webPush = require('web-push');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
const publicVapidKey = '<Your VAPID Public Key>';
const privateVapidKey = '<Your VAPID Private Key>';
webPush.setVapidDetails('mailto:you@example.com', publicVapidKey, privateVapidKey);
let subscriptions = [];
app.post('/api/save-subscription', (req, res) => {
    subscriptions.push(req.body);
    res.status(201).json({});
});
app.post('/api/send-notification', (req, res) => {
    const payload = JSON.stringify({ title: 'Hello!', body: 'This is a notification.' });
    subscriptions.forEach((sub) =>
        webPush.sendNotification(sub, payload).catch(console.error)
    );
    res.status(200).json({ message: 'Notifications sent' });
});
app.listen(3001, () => console.log('Server running on port 3001'));

https://learn.microsoft.com/en-us/azure/notification-hubs/
https://developer.mozilla.org/en-US/docs/Web/API/Push_API

Share via

Setting up Azure Push Notifications for React Web App with Node Express Backend

Your answer