nurmdrafi

sudo zypper addrepo --refresh https://download.opensuse.org/repositories/system:/snappy/openSUSE_Leap_15.5 snappy sudo zypper --gpg-auto-import-keys refresh sudo zypper dup --from snappy sudo zypper install snapd sudo systemctl enable --now snapd sudo systemctl enable --now snapd.apparmor sudo snap install redis

nurmdrafi

https://shav.dev/blog/socket-io-and-redux-middleware

What is Socket.io?

Socket.IO is a Javascript lirary that enables real-time, bidirectional communication between web clients (browsers) and servers. It simplifies the process of bulding interactive web applications by allowing data to be transmitted instantly and continuously between the client and server, facilitating features like chat applications, live updates, and multiplayer gamimg.

What is Bidirectional Communication?

Bidirectional communication means that information can flow in two directions, both the web client(browser) and the server can send and receive data to and from each other in real-time. So if something changes on the server, it can immediately notify the client, and vice versa, without the client needing to constantly ask the server if there's new information available.

Analogy

Think of bidirectional communication like a phone call. When you're talking on the phone with someone, you can both speak and listen at the same t

nurmdrafi

// Sending and receiving push messages

1. if user grant notification permission, the user subscribes to the push service
2. the push service returns a subscription object, which includes a public key to enable messages to be encrypted and an endpoint URL for the browser's push service, which is unique for each user
3. send push messages from this URL from server, encrypted with the public key and the push service forward this message to the right client, device and browser
4. service worker handle the push messages, when a push event is fired shows up message

// subscribe to the push service

navigator.serviceWorker.getRegistration().then(reg => {

nurmdrafi

useCustomMapStyles.ts

import { useState, useEffect } from 'react'
import { MAP_API_ACCESS_TOKEN } from '../app.config'

const useCustomMapStyles = () => {
  // States
  const [mapStyles, setMapStyles] = useState<any>([])

  // On Load Fetch Map Styles

nurmdrafi

• Changelog Demo

add this update-version.js file inside utils folder

const fs = require('fs')
let packageJson = require('../package.json')

// Current Time
const now = new Date()

nurmdrafi

Create File

sudo nano /etc/nginx/sites-available/test

Basic Config

If project running on server using docker or pm2

server {
 listen 80;

nurmdrafi

Related Docs

• Serwist - A Swiss Army knife for service workers
• Progressive Web Apps By Web Dev - web.dev
• Progressive Web App Training - Chrome for Developers
• How to make PWAs re-engageable using Notifications and Push

Benefits of Progressive Web App (PWA)

1. Offline Functionality: PWAs can operate seamlessly offline, providing users with uninterrupted access to content and functionality even in low or no connectivity environments. This is achieved through service workers, enabling cached content to be served when the network is unavailable.

nurmdrafi

Related Docs

• Content Security Policy By NextJS - nextjs.org
• Protect your Next.js app with security headers - medium.com
• Web Security By Mozilla - mozilla.org
• Content Security Policy Reference

Step 1: Add Content Security Policy Header using Nonce

Add the following to your app/layout.tsx or pages/_app.tsx or pages/_document.tsx

nurmdrafi

# check memory
$ free

# check swap file location, (default location - '/')
$ swapon

# turn off swap using swapfile location
$ sudo swapoff /swapfile

nurmdrafi

NextJS Deploy with Docker

name: Docker Image CI/CD for Staging

on:
  push:
    branches: ["staging"]

env: 
  DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}