DEV Community: u4aew

Creating an SSR Application on Next.js 14

u4aew — Fri, 06 Sep 2024 18:48:51 +0000

Introduction

Hello! In this article, we will explore how to create a simple web application with server-side rendering (SSR) and why it might be useful.

Server-side rendering (SSR) allows us to deliver pages to users more quickly, improving performance metrics and user experience. This is especially beneficial when users have budget smartphones or slow internet connections, as all heavy requests and computations are handled on the server.

For SSR, we will use Next.js 14. Next.js is a popular framework that offers many useful features out of the box:

Server-side and static rendering
Automatic code optimization
Built-in TypeScript support
Smart routing
API routes for building a backend
Version 14+ introduces new capabilities, including enhanced performance, a new file-system-based router, and improved support for server components.

Project Idea
For our example, we will develop an MVP of a financial exchange with basic functionality. Here’s what our application will be able to do:

Display a stock catalog with pagination
Load additional stocks via a "Show More" button
Provide detailed information about each stock on a separate page
Show the latest price and percentage change for each stock
Display a price change chart for each stock
Be SEO-optimized
Be server-rendered for improved performance

Implementation

In Next.js, there is a concept of server and client components. Let's explore their differences:

Server Components are processed on the server. They perform API requests, fetch data, and generate HTML markup, which the browser then renders. Advantages include:

Reduced JavaScript sent to the client
Faster initial page load
Direct access to server resources (e.g., databases)
Improved SEO optimization

Client Components function like regular React components in the browser. They can:

Interact with browser APIs
Handle user events
Manage local state
Use React lifecycle hooks

Here's how we will divide the components of our application:

Server Components (Red):

Header: Static, does not require interactivity
Stock List: Data is loaded on the server
Pagination: Logic is handled on the server for SEO
Stock Details: Data fetched from the server

Client Components (Green):

"Load More" Button: Requires click handling and scroll position preservation
Price Change Chart: Interactive, uses browser APIs for rendering
This separation allows us to leverage the strengths of both server and client components effectively.

Working with the API

To handle stock market data, we will use a public API, but we'll create a BFF (Backend for Frontend) for it. The BFF will allow us to:

Retrieve only the data necessary for our application
Transform data into a format convenient for the frontend
Combine data from multiple sources
Cache frequently requested information

This approach will optimize data handling and improve performance.

Server Components

Here's an example of a server component: the stock information page.

import React from 'react';
import { Metadata } from 'next';
import { BASE_URL } from '@/config';
import { serviceStocks } from '@/services';
import { StockIntro } from '@/components/StockIntro';
import { BuyStock } from '@/components/BuyStock';
import Candles from '@/components/Candles/Candles';
import styles from './styles.module.scss';

type Props = {
  params: { slug: string };
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { data: dataIntro } =
    (await serviceStocks.getByTicker(params.slug)) || {};

  if (!dataIntro) {
    return {
      title: 'Stock not found',
    };
  }

  const metaDescription = `Information about stock ${dataIntro.name} (${dataIntro.ticker}). Sector: ${dataIntro.sector}, Country: ${dataIntro.countryOfRisk}`;
  const keywords = `${dataIntro.name}, ${dataIntro.ticker}, ${dataIntro.sector}, ${dataIntro.countryOfRiskName}, stock, invest`;
  const canonicalUrl = `${BASE_URL}/${params.slug}`;

  return {
    title: `${dataIntro.name} (${dataIntro.ticker}) - Information about stock`,
    description: metaDescription,
    keywords: keywords,
    openGraph: {
      title: `${dataIntro.name} (${dataIntro.ticker}) - Information about stock`,
      description: metaDescription,
      type: 'website',
    },
    alternates: {
      canonical: canonicalUrl,
    },
  };
}

const PageStock = async ({ params }: Props) => {
  try {
    const [stockData, lastPriceData, candlesData] = await Promise.all([
      serviceStocks.getByTicker(params.slug),
      serviceStocks.getLastPriceByTicker(params.slug),
      serviceStocks.getCandlesByTicker(params.slug),
    ]);

    return (
      <div className={styles.page}>
        <div className={styles.main}>
          <div className={styles.intro}>
            {stockData ? (
              <StockIntro data={stockData.data} />
            ) : (
              <span>Not data</span>
            )}
          </div>
          {candlesData ? (
            <Candles
              currency={stockData?.data?.currency}
              data={candlesData.data}
            />
          ) : (
            <span>Not data</span>
          )}
        </div>
        <div className={styles.side}>
          {lastPriceData && candlesData ? (
            <BuyStock
              candlesData={candlesData.data}
              currency={stockData?.data?.currency}
              data={lastPriceData.data}
            />
          ) : (
            <span>Not data</span>
          )}
        </div>
      </div>
    );
  } catch (error) {
    console.error('Error loading stock data:', error);
    return <div>Error loading stock data</div>;
  }
};

export default PageStock;

Client Components

Here's an example of a client component for the price change chart:

'use client';

import React from 'react';
import dynamic from 'next/dynamic';
import styles from './styles.module.scss';
const Chart = dynamic(() => import('./Chart/Chart'), { ssr: false });

const Candles = ({ data, currency }: { data: any; currency?: string }) => {
  return (
    <div className={styles.chart}>
      <Chart data={data} currency={currency} />
    </div>
  );
};

export default Candles;

import React, { FC } from 'react';
// @ts-ignore
import CanvasJSReact from '@canvasjs/react-charts';
import { ICandle } from '@/typing';
const CanvasJSChart = CanvasJSReact.CanvasJSChart;

interface ChartProps {
  data: {
    candles: ICandle[];
  };
  currency?: string;
}

const Chart: FC<ChartProps> = ({ data, currency }) => {
  const dataPoints = data.candles.map((candle) => ({
    x: new Date(candle.time),
    y: [
      parseFloat(`${candle.open.units}.${candle.open.nano}`),
      parseFloat(`${candle.high.units}.${candle.high.nano}`),
      parseFloat(`${candle.low.units}.${candle.low.nano}`),
      parseFloat(`${candle.close.units}.${candle.close.nano}`),
    ],
  }));

  const options = {
    theme: 'light2',
    axisX: {
      valueFormatString: 'DD MMM',
    },
    axisY: {
      prefix: currency,
    },
    data: [
      {
        type: 'candlestick',
        yValueFormatString: `${currency} ###0.00`,
        xValueFormatString: 'DD MMM YYYY',
        dataPoints: dataPoints,
      },
    ],
  };

  return <CanvasJSChart options={options} />;
};

export default Chart;

For a more detailed look at the code, you can visit the GitHub repository.

SEO Optimization

import { Open_Sans } from 'next/font/google';
import { BASE_URL } from '@/config';
import { Footer } from '@/components/Footer/Footer';
import { Header } from '@/components/Header';
import { Metadata } from 'next';
import type { Viewport } from 'next';
import styles from './layout.module.scss';
import './globals.css';

const roboto = Open_Sans({
  weight: '400',
  subsets: ['latin'],
});

const RootLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return (
    <html lang="en" className={roboto.className}>
      <body className={styles.layout}>
        <header className={styles.header}>
          <Header />
        </header>
        <main className={styles.main}>
          <div className={styles.content}>{children}</div>
        </main>
        <footer className={styles.footer}>
          <Footer />
        </footer>
      </body>
    </html>
  );
};

export default RootLayout;

export const viewport: Viewport = {
  colorScheme: 'light dark',
  themeColor: '#2196f3',
};

export const metadata: Metadata = {
  title: {
    default: 'Financial Exchange Platform',
    template: '%s | Financial Exchange Platform',
  },
  description:
    'A leading financial exchange platform for trading and investment.',
  applicationName: 'Financial Exchange Platform',
  authors: [
    {
      name: 'Financial Exchange Team',
      url: BASE_URL,
    },
  ],
  metadataBase: new URL(BASE_URL),
  generator: 'Next.js',
  keywords: ['financial', 'exchange', 'trading', 'investment', 'platform'],
  referrer: 'origin',
  creator: 'Financial Exchange Team',
  publisher: 'Financial Exchange Inc.',
  robots: { index: true, follow: true },
  alternates: {
    canonical: BASE_URL,
  },
  icons: {
    icon: '/favicon.ico',
    apple: '/apple-touch-icon.png',
  },
  manifest: '/manifest.webmanifest',
  openGraph: {
    title: 'Financial Exchange Platform',
    description:
      'A leading financial exchange platform for trading and investment.',
    type: 'website',
    url: BASE_URL,
    siteName: 'Financial Exchange Platform',
    images: [
      {
        url: '/images/og-image.jpg',
        width: 800,
        height: 600,
        alt: 'Financial Exchange Platform',
      },
    ],
  },
  appleWebApp: {
    capable: true,
    title: 'Financial Exchange Platform',
    statusBarStyle: 'black-translucent',
  },
  formatDetection: {
    telephone: false,
  },
  abstract: 'A leading financial exchange platform for trading and investment.',
  category: 'Finance',
  classification: 'Financial Services',
  other: {
    'msapplication-TileColor': '#0a74da',
  },
};

Application Deployment

To automate the deployment of our application, we will use GitHub Actions and Docker Hub. This setup will allow us to automatically build and publish Docker images with each push to the main branch of the repository.

name: Docker

on:
  push:
    branches: [ main ]

jobs:
  build-and-push:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v1

      - name: Login to Docker Hub
        uses: docker/login-action@v1
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}

      - name: Build and push Docker image
        uses: docker/build-push-action@v2
        with:
          push: true
          tags: u4aew/next:latest

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

EXPOSE 6060

CMD ["npm", "start"]

The minimal basic functionality of our application is ready.

Test environment

In the future, to enhance functionality, we will add:

WebSocket for real-time price updates
Filters and sorting for the stock catalog
User authentication
A personal dashboard to track selected stocks

Thank you for your attention, and I hope this article was helpful!

Creating a web application using micro-frontends and Module Federation

u4aew — Sun, 04 Feb 2024 09:00:05 +0000

Hello! In this article, we will explore the process of developing a web application based on the micro-frontends approach using the Module Federation technology.

Micro-frontends are an approach in web development where the frontend is divided into multiple small, autonomous parts. These parts are developed by different teams, possibly using different technologies, but ultimately they function together as a single unit. This approach helps address issues related to large applications, simplifies the development and testing process, promotes the use of various technologies, and enhances code reusability.

The goal of our project is to create a banking application with functionality for viewing and editing bank cards and transactions.

For implementation, we will choose Ant Design, React.js in combination with Module Federation.

The diagram illustrates the architecture of a web application using micro-frontends integrated through Module Federation. At the top of the image is the Host, which serves as the main application (Main app) and acts as a container for the other micro-applications.

There are two micro-frontends: Cards and Transactions, each developed by a separate team and performing specific functions within the banking application.

The diagram also includes the Shared component, which contains shared resources such as data types, utilities, components, and more. These resources are imported into both the Host and the micro-applications Cards and Transactions, ensuring consistency and code reuse throughout the application ecosystem.

Additionally, the diagram shows the Event Bus, which serves as a mechanism for message and event exchange between system components. This facilitates communication between the Host and micro-applications, as well as between the micro-applications themselves, enabling them to react to state changes.

This diagram demonstrates a modular and extensible structure of a web application, which is one of the key advantages of the micro-frontends approach. It allows for the development of applications that are easier to maintain, update, and scale.

We organize our applications inside the packages directory and set up Yarn Workspaces, which will allow us to efficiently use shared components from the shared module among different packages.

"workspaces": [
    "packages/*"
  ],

Module Federation, introduced in Webpack 5, enables different parts of the application to dynamically load each other's code. With this feature, we ensure asynchronous loading of components.

Webpack configuration for the host application

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

const deps = require('./package.json').dependencies;
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  // Other Webpack configuration not directly related to Module Federation
  // ...

  plugins: [
    // Module Federation plugin for integrating micro-frontends
    new ModuleFederationPlugin({
      remotes: {
        // Defining remote micro-frontends available to this micro-frontend
        'remote-modules-transactions': isProduction
          ? 'remoteModulesTransactions@https://microfrontend.fancy-app.site/apps/transactions/remoteEntry.js'
          : 'remoteModulesTransactions@http://localhost:3003/remoteEntry.js',
        'remote-modules-cards': isProduction
          ? 'remoteModulesCards@https://microfrontend.fancy-app.site/apps/cards/remoteEntry.js'
          : 'remoteModulesCards@http://localhost:3001/remoteEntry.js',
      },
      shared: {
        // Defining shared dependencies between different micro-frontends
        react: { singleton: true, requiredVersion: deps.react },
        antd: { singleton: true, requiredVersion: deps['antd'] },
        'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
        'react-redux': { singleton: true, requiredVersion: deps['react-redux'] },
        axios: { singleton: true, requiredVersion: deps['axios'] },
      },
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'index.html'), // HTML template for Webpack
    }),
  ],

  // Other Webpack settings
  // ...
};

Webpack configuration for the "Bank Cards" application

const path = require('path');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const deps = require('./package.json').dependencies;

module.exports = {
  // Other Webpack configuration...

  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'index.html'), // HTML template for Webpack
    }),
    // Module Federation Plugin configuration
    new ModuleFederationPlugin({
      name: 'remoteModulesCards', // Microfrontend name
      filename: 'remoteEntry.js', // File name that will serve as the entry point for the microfrontend
      exposes: {
        './Cards': './src/root', // Defines which modules and components will be available to other microfrontends
      },
      shared: {
        // Defining dependencies to be shared across different microfrontends
        react: { requiredVersion: deps.react, singleton: true },
        antd: { singleton: true, requiredVersion: deps['antd'] },
        'react-dom': { requiredVersion: deps['react-dom'], singleton: true },
        'react-redux': { singleton: true, requiredVersion: deps['react-redux'] },
        axios: { singleton: true, requiredVersion: deps['axios'] },
      },
    }),
  ],

  // Other Webpack settings...
};

Now we can easily import our applications into the host application.

import React, { Suspense, useEffect } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Main } from '../pages/Main';
import { MainLayout } from '@host/layouts/MainLayout';

// Lazy loading components Cards and Transactions from remote modules
const Cards = React.lazy(() => import('remote-modules-cards/Cards'));
const Transactions = React.lazy(() => import('remote-modules-transactions/Transactions'));

const Pages = () => {
  return (
    <Router>
      <MainLayout>
        {/* Using Suspense to manage the loading state of asynchronous components */}
        <Suspense fallback={<div>Loading...</div>}>
          <Routes>
            <Route path={'/'} element={<Main />} />
            <Route path={'/cards/*'} element={<Cards />} />
            <Route path={'/transactions/*'} element={<Transactions />} />
          </Routes>
        </Suspense>
      </MainLayout>
    </Router>
  );
};
export default Pages;

Next, let's set up Redux Toolkit for the "Bank Cards" team.

// Import the configureStore function from the Redux Toolkit library
import { configureStore } from '@reduxjs/toolkit';

// Import the root reducer
import rootReducer from './features';

// Create a store using the configureStore function
const store = configureStore({
  // Set the root reducer
  reducer: rootReducer,
  // Set default middleware
  middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
});

// Export the store
export default store;

// Define types for the dispatcher and application state
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;

// Import React
import React from 'react';

// Import the main application component
import App from '../app/App';

// Import Provider from react-redux to connect React and Redux
import { Provider } from 'react-redux';

// Import our Redux store
import store from '@modules/cards/store/store';

// Create the main Index component
const Index = (): JSX.Element => {
  return (
    // Wrap our application in Provider, passing our store to it
    <Provider store={store}>
      <App />
    </Provider>
  );
};

// Export the main component
export default Index;

The application should have a role-based access control system.

USER - can view pages, MANAGER - has editing rights, ADMIN - can edit and delete data.

The host application sends a request to the server to retrieve user information and stores this data in its own storage. It is necessary to securely retrieve this data in the "Bank Cards" application.

To achieve this, a middleware needs to be written for the Redux store of the host application to store the data in the global window object

// Import the configureStore function and Middleware type from the Redux Toolkit library
import { configureStore, Middleware } from '@reduxjs/toolkit';

// Import the root reducer and RootState type.
import rootReducer, { RootState } from './features';

// Create middleware that saves the application state in the global window object.
const windowStateMiddleware: Middleware<{}, RootState> =
  (store) => (next) => (action) => {
    const result = next(action);
    (window as any).host = store.getState();
    return result;
  };

// Function to load state from the global window object
const loadFromWindow = (): RootState | undefined => {
  try {
    const hostState = (window as any).host;
    if (hostState === null) return undefined;
    return hostState;
  } catch (e) {
    console.warn('Error loading state from window:', e);
    return undefined;
  }
};

// Create a store using the configureStore function
const store = configureStore({
  // Set the root reducer
  reducer: rootReducer,
  // Add middleware that saves the state in the window
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(windowStateMiddleware),
  // Load the preloaded state from the window
  preloadedState: loadFromWindow(),
});

// Export the store
export default store;

// Define the type for the dispatcher
export type AppDispatch = typeof store.dispatch;

Let's move the constants to the shared module.

export const USER_ROLE = () => {
  return window.host.common.user.role;
};

To synchronize the user role changes across all micro-frontends, we will utilize an event bus. In the shared module, we will implement handlers for sending and receiving events.

// Importing event channels and role types
import { Channels } from '@/events/const/channels';
import { EnumRole } from '@/types';

// Declaring a variable for the event handler
let eventHandler: ((event: Event) => void) | null = null;

// Function for handling user role change
export const onChangeUserRole = (cb: (role: EnumRole) => void): void => {
  // Creating an event handler
  eventHandler = (event: Event) => {
    // Casting the event to CustomEvent type
    const customEvent = event as CustomEvent<{ role: EnumRole }>;
    // If the event has details, log them to the console and call the callback function
    if (customEvent.detail) {
      console.log(`On ${Channels.changeUserRole} - ${customEvent.detail.role}`);
      cb(customEvent.detail.role);
    }
  };

  // Adding the event handler to the global window object
  window.addEventListener(Channels.changeUserRole, eventHandler);
};

// Function to stop listening for user role changes
export const stopListeningToUserRoleChange = (): void => {
  // If the event handler exists, remove it and reset the variable
  if (eventHandler) {
    window.removeEventListener(Channels.changeUserRole, eventHandler);
    eventHandler = null;
  }
};

// Function to emit an event for user role change
export const emitChangeUserRole = (newRole: EnumRole): void => {
  // Logging event information to the console
  console.log(`Emit ${Channels.changeUserRole} - ${newRole}`);
  // Creating a new event
  const event = new CustomEvent(Channels.changeUserRole, {
    detail: { role: newRole },
  });
  // Dispatching the event
  window.dispatchEvent(event);
};

For the implementation of a bank card editing page that accounts for user roles, we will start by establishing a mechanism for subscribing to role update events. This will enable the page to respond to changes and adapt the available editing features according to the current user role.

import React, { useEffect, useState } from 'react';
import { Button, Card, List, Modal, notification } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { getCardDetails } from '@modules/cards/store/features/cards/slice';
import { AppDispatch } from '@modules/cards/store/store';
import { userCardsDetailsSelector } from '@modules/cards/store/features/cards/selectors';
import { Transaction } from '@modules/cards/types';
import { events, variables, types } from 'shared';
const { EnumRole } = types;
const { USER_ROLE } = variables;
const { onChangeUserRole, stopListeningToUserRoleChange } = events;

export const CardDetail = () => {
  // Using Redux for dispatching and retrieving state
  const dispatch: AppDispatch = useDispatch();
  const cardDetails = useSelector(userCardsDetailsSelector);

  // Local state for user role and modal visibility
  const [role, setRole] = useState(USER_ROLE);
  const [isModalVisible, setIsModalVisible] = useState(false);

  // Effect for loading card details on component mount
  useEffect(() => {
    const load = async () => {
      await dispatch(getCardDetails('1'));
    };
    load();
  }, []);

  // Functions for managing the edit modal
  const showEditModal = () => {
    setIsModalVisible(true);
  };

  const handleEdit = () => {
    setIsModalVisible(false);
  };

  const handleDelete = () => {
    // Display notification about deletion
    notification.open({
      message: 'Card delete',
      description: 'Card delete success.',
      onClick: () => {
        console.log('Notification Clicked!');
      },
    });
  };

  // Effect for subscribing to and unsubscribing from user role change events
  useEffect(() => {
    onChangeUserRole(setRole);
    return stopListeningToUserRoleChange;
  }, []);

  // Conditional rendering if card details are not loaded
  if (!cardDetails) {
    return <div>Loading...</div>;
  }

  // Function to determine actions based on user role
  const getActions = () => {
    switch (role) {
      case EnumRole.admin:
        return [
          <Button key="edit" type="primary" onClick={showEditModal}>
            Edit
          </Button>,
          <Button key="delete" type="dashed" onClick={handleDelete}>
            Delete
          </Button>,
        ];
      case EnumRole.manager:
        return [
          <Button key="edit" type="primary" onClick={showEditModal}>
            Edit
          </Button>,
        ];
      default:
        return [];
    }
  };

  // Rendering the Card component with card details and actions
  return (
    <>
      <Card
        actions={getActions()}
        title={`Card Details - ${cardDetails.cardHolderName}`}
      >
        {/* Displaying various card attributes */}
        <p>PAN: {cardDetails.pan}</p>
        <p>Expiry: {cardDetails.expiry}</p>
        <p>Card Type: {cardDetails.cardType}</p>
        <p>Issuing Bank: {cardDetails.issuingBank}</p>
        <p>Credit Limit: {cardDetails.creditLimit}</p>
        <p>Available Balance: {cardDetails.availableBalance}</p>
        {/* List of recent transactions */}
        <List
          header={<div>Recent Transactions</div>}
          bordered
          dataSource={cardDetails.recentTransactions}
          renderItem={(item: Transaction) => (
            <List.Item>
              {item.date} - {item.amount} {item.currency} - {item.description}
            </List.Item>
          )}
        />
        <p>
          <b>*For demonstration events from the host, change the user role.</b>
        </p>
      </Card>
      {/* Edit modal */}
      <Modal
        title="Edit transactions"
        open={isModalVisible}
        onOk={handleEdit}
        onCancel={() => setIsModalVisible(false)}
      >
        <p>Form edit card</p>
      </Modal>
    </>
  );
};

To set up the deployment of the application through GitHub Actions, we will create a .yml configuration file that defines the CI/CD workflow. Here's an example of a simple configuration:

name: Build and Deploy Cards Project

on:
  push:
    paths:
      - 'packages/cards/**'
  pull_request:
    paths:
      - 'packages/cards/**'

  install-dependencies:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - name: Cache Node modules
        uses: actions/cache@v2
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}

      - name: Install Dependencies
        run: yarn install

  test-and-build:
    needs: install-dependencies 
    runs-on: ubuntu-latest 

    steps:
      - uses: actions/checkout@v2

      - name: Use Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - name: Cache Node modules
        uses: actions/cache@v2
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}

      - name: Build Shared Modules
        run: yarn workspace shared build

      - name: Test and Build Cards
        run: |
          yarn workspace cards test
          yarn workspace cards build

      - name: Archive Build Artifacts
        uses: actions/upload-artifact@v2
        with:
          name: shared-artifacts
          path: packages/cards/dist

 deploy-cards:
    needs: test-and-build
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Use Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - name: Cache Node modules
        uses: actions/cache@v2
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}

      - name: Download Build Artifacts
        uses: actions/download-artifact@v2
        with:
          name: shared-artifacts
          path: ./cards

      - name: Deploy to Server
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.HOST }}
          username: root
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          source: 'cards/*'
          target: '/usr/share/nginx/html/microfrontend/apps'

The screenshot shows the distribution of collected bundles. Here we can add functions such as versioning and A/B testing, managing them through Nginx.

As a result, we have a system where each team working on different modules has its own application in the microfrontend structure.

This approach speeds up the build process, as it is no longer necessary to wait for the entire application to be checked. Code can be updated in parts and regression testing can be conducted for each individual component.

It also significantly reduces the problem of merge conflicts, as teams work on different parts of the project independently of each other. This increases the efficiency of team work and simplifies the development process as a whole.

A test environment for demonstrating functionality and the source code is available in the GitHub repository.

Thank you for your attention!

Adding WebAuthn to the web application

u4aew — Sat, 02 Dec 2023 11:02:12 +0000

Hello! In this article, we will learn how to add WebAuthn to web applications from the perspective of a frontend developer. WebAuthn represents a new authentication method that provides a higher level of security by replacing outdated passwords and SMS confirmations with public key-based authentication. This not only increases protection against unauthorized access, but also simplifies login for users.

Basics of Public Key Encryption

To understand WebAuthn, it is important to be familiar with the concept of public key encryption. This is a method where two keys are used: a public key and a private key. The public key can be freely distributed and is used to encrypt messages. The ciphertext thus generated can only be decrypted with the corresponding private key, which should remain secret. This technology underlies WebAuthn, where public keys provide reliable authentication without the transmission of confidential data.

How WebAuthn works

WebAuthn operates on several key stages:

Creating a Challenge: The server generates a unique challenge and sends it to the user's device.
User Confirmation: The user confirms their intention to authenticate using biometrics, a PIN code, or another method.
Signing the Challenge: The device signs the challenge with its private key, confirming the legitimacy of the request.
Sending the Assertion: The device sends the signed challenge back to the site.
Assertion Verification: The site verifies the signature using a previously stored public key.Successful verification confirms the user's authentication.

Example Implementation in a Web Application

In this part of the article, we will develop a simple web application using React.js. Our application will include a single field for entering a username and two functional buttons: 'Register' and 'Login'.

Registration
To register a new user, we need to implement a function that requests the creation of new credentials through navigator.credentials.create(). An important component here is publicKeyCredentialCreationOptions, which defines the parameters for creating a new key. For a more detailed understanding of these parameters, I recommend consulting the WebAuthn documentation.

// Function to create new credentials using the Web Authentication API.
const getCredential = async ({
    challenge, // Hash (challenge) received from the server
  }) => {
    // Options for creating a public key.
    const publicKeyCredentialCreationOptions = {
      rp: {
        name: 'my super app', // name of the Relying Party
        id: 'webauthn.fancy-app.site', // identifier of the Relying Party (Domain)
      },
      user: {
        id: Uint8Array.from(userId, (c) => c.charCodeAt(0)), // converting userId into Uint8Array
        name: 'User', // username 
        displayName: 'Full username', // user's display name
      },
      challenge: Uint8Array.from(challenge, (c) => c.charCodeAt(0)), // converting challenge into Uint8Array
      pubKeyCredParams: [
        // preferred parameters for the cryptographic algorithm
        {
          type: 'public-key', // type of key
          alg: -7, // algorithm ECDSA with curve P-256
        },
        {
          type: 'public-key',
          alg: -257, // algorithm RSA with SHA-256 limitation
        },
      ],
      timeout: 60000, // response timeout (in milliseconds)
      excludeCredentials: [], // list of credentials to be excluded
      authenticatorSelection: { // criteria for selecting an authenticator
        residentKey: 'preferred',
        requireResidentKey: false,
        userVerification: 'required', // requirement for user verification
      },
      attestation: 'none', // type of attestation, not required here
      extensions: { // extensions
        credProps: true, // if true, credential properties are returned
      },
    };
    // API call to create new credentials using the provided options.
    return await navigator.credentials.create({
      publicKey: publicKeyCredentialCreationOptions,
    });
  };

This function returns a PublicKeyCredential object, which in JavaScript represents public credentials. They are created during registration through the WebAuthn API.

After these data are sent to the server, it conducts a verification of the public key and, upon successful verification, registers the user who sent it.

Authentication

For user authentication, we need to create a function that uses navigator.credentials.get(). This function will use publicKeyCredentialRequestOptions parameters, which should include challenge (the challenge) and rpId (the identifier of the relying party, usually the domain).

const getAssertion = async ({ challenge }) => {
    // Creating an object with public key credential request options
    const publicKeyCredentialRequestOptions = {
      // Converting the challenge (provided by the server) to Uint8Array. 
      // This is necessary as WebAuthn requires the challenge to be in binary format.
      challenge: Uint8Array.from(challenge, (c) => c.charCodeAt(0)),

      // An empty array indicating that any registered credentials can be used.
      // Specific credentials can be specified if there is a need to restrict access.
      allowCredentials: [],

      // The Relying Party ID (usually the domain) associated with the request.
      rpId: 'webauthn.fancy-app.site',

      // The timeout in milliseconds to complete the authentication process.
      timeout: 60000,

      // The level of user verification. In this case, confirmation ('required') is needed.
      // Other options may include 'preferred' or 'discouraged'.
      userVerification: 'required',
    };

    // Calling the get() method of navigator.credentials with the provided parameters.
    // This call initiates the process of obtaining an authentication assertion from the user.
    return await navigator.credentials.get({
      publicKey: publicKeyCredentialRequestOptions,
    });
};

The function will return a PublicKeyCredential object, which then needs to be sent to the server. This is necessary for the authentication procedure and subsequent acquisition of an access token.

Demo

If you would like to try out this functionality on your own device, please use the link to the test stand. In the console, you will see the PublicKeyCredential, which is used for both registration and authentication. Also, for a detailed study of the code, I suggest the link to the GitHub repository.

Thank you for your attention)

How to Set Up Push Notifications in Safari on iOS

u4aew — Sun, 15 Oct 2023 12:55:59 +0000

Hello! In this article, we will explore how to send push notifications to iOS users, even if your app is temporarily unavailable in the App Store. With the release of Safari 16.4, the ability to receive notifications in Progressive Web Apps (PWA) has become available.

Sure, let's tackle this task from a frontend developer's perspective.

What We'll Need

Server-side: For the server logic, we'll choose Node.js.
Client-side: We will be using React.js for creating the user interface.
Push service: We'll use Google Cloud Messaging as the service for sending push notifications.

Creating a Server on Express.js

Let's start by generating VAPID keys. To understand why they are needed, let's briefly go over the theory. VAPID is essentially a unique ID for your application in the world of web push notifications. These keys help the browser understand where the notification is coming from and provide an additional layer of security. So, we'll have a pair of keys: public and private.

Now onto the practice! We will use a Node.js library called web-push. This library works well with Google Cloud Messaging, Google's system for sending notifications.

Install the library using npm:
npm install web-push -g

Generate the keys
web-push generate-vapid-keys

We've generated two keys: a public key and a private key. The public key will be used on the client side when users are subscribing to notifications. This key will allow the browser to identify the source of notifications to make sure they are coming from a trusted server.

The private key will be stored on our server. It's required for signing the data we send and for verifying the authenticity of our application with notification sending systems like Google Cloud Messaging.

We'll create two URLs: one for saving notification subscriptions and another for sending them.

// Import the web-push library for working with push notifications
const webPush = require('web-push');

webPush.setVapidDetails(
    publicKey,
    privateKey
);

// Initialize an object to store subscriptions
let subscriptions = {}

// Route for subscribing to push notifications
app.post('/subscribe', (req, res) => {
    // Extract subscription and ID from the request
    const {subscription, id} = req.body;
    // Store the subscription in the object under the key ID
    subscriptions[id] = subscription;
    // Return a successful status
    return res.status(201).json({data: {success: true}});
});

// Route for sending push notifications
app.post('/send', (req, res) => {
    // Extract message, title, and ID from the request
    const {message, title, id} = req.body;
    // Find the subscription by ID
    const subscription = subscriptions[id];
    // Create the payload for the push notification
    const payload = JSON.stringify({ title, message });

    // Send the push notification
    webPush.sendNotification(subscription, payload)
    .catch(error => {
        // Return a 400 status in case of an error
        return res.status(400).json({data: {success: false}});
    })
    .then((value) => {
        // Return a 201 status in case of successful sending
        return res.status(201).json({data: {success: true}});
    });
});

Setting Up the Client Side

Here we will be working with a basic React application. To make everything as simple as possible, we'll create our own hook to help us simplify the work with push notifications. I'll leave comments to make it clear how everything is set up.

// Function to convert Base64URL to Uint8Array
const urlBase64ToUint8Array = (base64String) => {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding)
        .replace(/-/g, '+')
        .replace(/_/g, '/');

    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);

    for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }

    return outputArray;
};

// Hook for subscribing to push notifications
const useSubscribe = ({ publicKey }) => {
    const getSubscription = async () => {
        // Check for ServiceWorker and PushManager support
        if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
            throw { errorCode: "ServiceWorkerAndPushManagerNotSupported" };
        }

        // Wait for Service Worker to be ready
        const registration = await navigator.serviceWorker.ready;

        // Check for pushManager in registration
        if (!registration.pushManager) {
            throw { errorCode: "PushManagerUnavailable" };
        }

        // Check for existing subscription
        const existingSubscription = await registration.pushManager.getSubscription();

        if (existingSubscription) {
            throw { errorCode: "ExistingSubscription" };
        }

        // Convert VAPID key for use in subscription
        const convertedVapidKey = urlBase64ToUint8Array(publicKey);
        return await registration.pushManager.subscribe({
            applicationServerKey: convertedVapidKey,
            userVisibleOnly: true,
        });
    };

    return {getSubscription};
};

Example of Using the React Hook to Get the Subscription Object and Send it to the Server

// Import the useSubscribe function and set the public key (PUBLIC_KEY)
const { getSubscription } = useSubscribe({publicKey: PUBLIC_KEY});

// Handler for subscribing to push notifications
const onSubmitSubscribe = async (e) => {
    try {
        // Get the subscription object using the getSubscription function
        const subscription = await getSubscription();

        // Send the subscription object and ID to the server for registration
        await axios.post('/api/subscribe', {
            subscription: subscription,
            id: subscribeId
        });

        // Log a message in case of successful subscription
        console.log('Subscribe success');
    } catch (e) {
        // Log a warning in case of an error
        console.warn(e);
    }
};

So, we've successfully completed most of the work, now we need to display the notification that will come from Google Cloud Messaging.

Push Notifications

To implement background tracking of new notifications in our application, we will use two key technologies: Service Worker and Push API.

A Service Worker is a background script that runs independently from the main thread of the web application. This script provides the ability to handle network requests, cache data, and in our case — listen for incoming push notifications.

The Push API is a web API that allows servers to send information directly to the user's browser.

Example of service-worker.js:

// Add a 'push' event listener to the service worker.
self.addEventListener('push', function(event) {
    // Extract data from the push event
    const data = event.data.json();

    // Options for the notification
    const options = {
        // The message text in the notification
        body: data.message,
        // The icon displayed in the notification
        icon: 'icons/icon-72x72.png'
    };

    // Use waitUntil to keep the service worker active
    // until the notification is displayed
    event.waitUntil(
        self.registration.showNotification(data.title, options)
    );
});

Demo

To test it on your own device, here's the link to the demo environment. For a more detailed code review, I'm leaving the link to the GitHub repository.

DEV Community: u4aew

Creating an SSR Application on Next.js 14

Introduction

Implementation

Working with the API

Server Components

Client Components

SEO Optimization

Application Deployment

Creating a web application using micro-frontends and Module Federation

Adding WebAuthn to the web application

Basics of Public Key Encryption

How WebAuthn works

Example Implementation in a Web Application

Demo

How to Set Up Push Notifications in Safari on iOS

What We'll Need

Creating a Server on Express.js

Setting Up the Client Side

Push Notifications

Demo

Adding WebAuthn to the web application