nurmdrafi

Dockerizing React Apps with Dynamic Environment Variables

Introduction

When deploying React applications in different environments (development, QA, staging, production), managing environment variables becomes crucial. Unlike server-side applications where environment variables can be injected at runtime, React applications are built into static files where environment variables are embedded during the build process.

This guide demonstrates how to create a Docker setup for React applications that allows dynamic environment variable injection at container runtime rather than build time.

Implementation Overview

nurmdrafi

Infisical Integration with Docker

This guide explains how to integrate Infisical, a secrets management platform, with a Dockerized application to securely fetch and inject secrets at runtime. It covers setting up the Infisical CLI, configuring environment variables, retrieving credentials, and integrating with Docker.

Prerequisites

• A self-hosted Infisical instance (e.g., https://infisical.barikoimaps.dev).
• Docker installed.
• Basic familiarity with Docker, Node.js, and environment variables.

Setup Instructions

nurmdrafi

Install Cursor AI editor on Ubuntu 24.04

1. Use the Download button on www.cursor.com web site. It will download the NAME.AppImage file.

2. Move the File:

sudo mv ~/Downloads/NAME.AppImage /opt/cursor.appimage

nurmdrafi

Building a Secure LocalStorage Utility with crypto-js

Browser's LocalStorage is convenient but stores data in plaintext, creating security risks. Let's build a TypeScript utility that adds encryption using crypto-js to better protect client-side data.

The Problem with Default LocalStorage

LocalStorage has three key security issues:

• Stores everything as plaintext
• Vulnerable to XSS attacks
• No built-in expiration mechanism

nurmdrafi

Vitest setup

MOCK SETUP CONFIGURATION WORKFLOW

PHASE 1: PROJECT STRUCTURE ANALYSIS
1. Redux: Located in redux/, with feature-specific logic in redux/features/
2. API Responses: Used in pages/ and hooks/
3. LocalStorage/SecureLocalStorage: Used in utils/ or directly in components
4. Tests: Stored in __tests__/ with mocks designed for testing

nurmdrafi

Using AI and Prompt Composer for Unit Tests

Table of Contents

1. Introduction
2. Setting Up Your Testing Environment
3. Understanding Your Project Structure
4. Creating Effective AI Prompts for Testing
5. Using the AI Prompt Composer
6. Testing Different Types of Components

nurmdrafi

How to Generate Unit Tests Using AI Prompts

Table of Contents

1. Introduction
2. Setting Up Your Testing Environment
3. Understanding Your Project Structure
4. Creating Effective AI Prompts for Testing
5. Using the AI Prompt Composer
6. Testing Different Types of Components

nurmdrafi

Test Coverage Integration with SonarQube and GitHub Actions

This document outlines the steps taken to integrate test coverage reporting into SonarQube using GitHub Actions for the Laboni Express project.

Overview

The goal was to ensure that test coverage data (generated by Vitest) is correctly reported to SonarQube during the CI/CD pipeline. This involved:

1. Generating test coverage files in GitHub Actions.
2. Configuring Vitest to generate coverage files.

nurmdrafi

src/
├── app/                          # Next.js app router
│   ├── (marketing)/              # Public pages (e.g., home, about)
│   ├── (shop)/                   # Shop-related pages
│   ├── (product)/                # Product-related pages
│   ├── (admin)/                  # Admin-related pages
│   ├── layout.tsx                # Root layout
│   └── page.tsx                  # Home page
├── components/                   # Reusable components

nurmdrafi

[Project Title]

1. Project Overview

Description

Insert a brief and concise description of the project. For example: "A web application for [briefly state the main purpose, e.g., tracking expenses, managing tasks, creating a portfolio]."

Purpose