Table of Contents

• Frontend Toolkit
  • Components
    • 1. PDF Report Generation
    • 2. Email Template Generation
  • Setup and Installation
    • Prerequisites
    • Steps
  • Docker
  • Local Docker Build

Frontend Toolkit

The Frontend Toolkit project is a versatile Next.js application that provides essential tools for generating PDF reports and creating customizable email templates.

Components

1. PDF Report Generation

This leverages Puppeteer to get a snapshot of the web page and convert it into a PDF file. The following reports are available:

• CSPM Report: Generate a on-demand PDF report for Cloud Security Posture Management (CSPM) data using Puppeteer Read more
• CWPP Report: Generate a on-demand PDF report for Cloud Workload Protection Platform (CWPP) data using Puppeteer Read more

2. Email Template Generation

Email templates for use in various scenarios, such as alerts, triggers or notifications. The templates are constructed using react-email which provides primitive components for building emails.

Setup and Installation

Prerequisites

• Node.js (version >=20)
• Pnpm (version >=9)

Steps

1. Clone the repository:

   
   

   git clone https://github.com/accuknox/frontend-toolkit.git

   
   

2. Navigate into the project directory:

   
   

   cd frontend-toolkit

   
   

3. Install dependencies:

   
   

   pnpm install

   
   

4. Start the development server:

   
   

   pnpm run dev

   
   

5. Open your browser at http://localhost:8000 to view the application.

Docker

This Dockerfile uses a multi-stage build approach to build a Docker image for a Node.js application that uses Puppeteer. The Dockerfile defines several stages, including a base stage, a dependencies installation stage, a build process stage, and an app runner stage.

The base stage uses the official Node.js Alpine-based image and installs Puppeteer dependencies required for running the application.

The dependencies installation stage installs production dependencies using pnpm.

The build process stage builds the application using npm run build.

The app runner stage sets environment variables for production environment, creates a new group and user for running the application, creates a new directory for storing .next files, and copies the standalone and static files from the builder stage to the runner stage. Finally, it sets the user to run the application, exposes the application port, and sets the command to run the application.

Multi-stage builds divide the build process into isolated stages. This separation allows for resuming the build process from a failed stage without affecting the other stages, ensuring that successful stages remain unchanged.

Local Docker Build

For local testing, we can build the Docker image using the following steps:

1. Download and install Docker Desktop from Docker Hub if you haven't already. Then start the Docker daemon.
2. Since Next.js uses port 3000 for the build process by default, please change the HOST to http://localhost:3000 in the .env file.
3. Then we can build the Docker image using the following command (this might take approx 10-15 mins):
   
   

   docker build -t frontend-toolkit .

   
   
4. Once the image is built, we can run the Docker container using the following command:
   
   

   docker run -p 3000:3000 frontend-toolkit

   
   
5. Open your browser/postman at http://localhost:3000 to view/test the application.

Happy coding! 🚀