DEV Community: Eamonn Walsh

React Application: Build Once, Deploy Anywhere Solution

Eamonn Walsh — Fri, 23 Jun 2023 18:06:52 +0000

In this blog post, we will explore a solution for the build once deploy many issue faced by projects working with web application libraries such as React.

In React environment-specific configuration is baked in at build time, meaning you most likely need to create individual build artifacts for dev, test, uat, live etc. This can turn into a significant time sink if the build process is even remotely lengthy.

The goal is to decouple environment-specific configuration from the build process, allowing the same build artifact to be deployed to multiple environments with different configurations.

Prerequisites

Basic knowledge of React and Vite
Familiarity with Docker and Kubernetes concepts

Steps

1. Placeholder-based Configuration

To make the application deployable to different environments, we need to remove all hard-coded references to environment variables and replace them with placeholders. During the build process, Vite will generate a deployable asset containing these placeholders instead of the actual environment variable values.

2. Move Environment Variables to Kubernetes

Store your environment-specific configuration in Kubernetes, preferably using a ConfigMap. This allows you to set the configuration on a per-environment basis.

3. Create a Shared Environment File

Create a single environment file, e.g., .env.all, that will be used for all builds. Set your variables to align with the placeholder names. For example:

VITE_VARIABLE_1=%VITE_VARIABLE_1%
VITE_VARIABLE_2=%VITE_VARIABLE_2%
VITE_VARIABLE_3=%VITE_VARIABLE_3%

4. Create a Configuration Replacement Script

In your React application codebase, create a JavaScript script that can be executed inside your Docker container. This script will replace the placeholders with the actual environment variable values at deploy time, pulling the values from the ConfigMap in Kubernetes. It's recommended to create this script in a folder outside the /src directory, such as /static, to avoid it being included in the JavaScript asset during build time.

5. Copy the Replacement Script

Use Vite's static copy plugin to move the replacement script into the build output folder (by default, dist). Add the following configuration to your Vite project:

import { react } from '@vitejs/plugin-react';
import viteStaticCopy from 'vite-plugin-static-copy';

export default {
  // Other Vite configuration options...
  plugins: [
    react(),
    viteStaticCopy({
      targets: [
        {
          src: './static/replacePlaceHolders.js',
          dest: './static/replacePlaceHolders.js',
        },
      ],
    }),
  ],
};

6. Run the Build Command

Run your build command as usual, but make sure to point to your single .env.all file using the mode flag. For example:

tsc -p tsconfig.build.json && vite build --mode all

7. Verify the Build Output

Verify that the built asset contains the variable placeholders instead of the actual values. Also, ensure that the replacePlaceHolders.js script exists in the dist folder.

8. Update the Dockerfile

Update your Dockerfile to include Node.js as part of the image so that it can run the replacePlaceHolders.js script during the image preparation phase.

The majority of Docker images used for deploying React applications do not typically necessitate the presence of Node. However, we specifically require Node to be running in order to access and retrieve environment-specific configuration set in your ConfigMap via the process.env object in Node.

Add the following command to the Dockerfile:

CMD ["node", "./replacePlaceHolders.js"]

This command will execute the JavaScript script in Node.js, providing access to the variables set in the ConfigMap. You can replace placeholders in files using the following code snippet:

const fs = require('fs');
const filePath = '<path-to-file>';

let fileContent = fs.readFileSync(filePath, 'utf-8');
        let fileContent = await fs.readFile(<path-to-file>, 'utf-8');

        fileContent = fileContent.replace('%VITE_VARIABLE_1%', process.env.VITE_VARIABLE_1);

Conclusion

There are a few other approaches to do this but they all need to add what I would consider as configuration logic to the app itself and don't run at deploy time. There is no perfect solution

Migrating from Jest to Vitest for React Testing

Eamonn Walsh — Sat, 17 Jun 2023 16:42:30 +0000

Migrating from Jest to Vitest for React Testing

When it comes to testing React applications, Jest has been a popular choice for many developers. However, if you're looking for an alternative testing framework, Vitest could be a great option to explore. In this guide, we'll walk through the process of migrating from Jest to Vitest, step by step.

Step 1: Uninstall Jest

To begin the migration process, you'll need to uninstall Jest from your project. You can do this by running the following command:

npm uninstall jest

In many projects there may be additional dependencies to remove - some to watch out for

@types/jest
jest-css-modules
jest-environment-jsdom
ts-jest

Step 2: Install Vitest

Next, install Vitest as your new testing framework. Use the following command to install Vitest:

npm i -D vitest

Step 3: Install Dependencies for Vitest

Vitest may require additional dependencies based on your testing needs. Make sure to install any necessary third-party dependencies for Vitest. At a minimum I would recommend for coverage to install :

npm i -D @vitest/coverage-v8

Feel free to add any other testing-related dependencies required for your project.

Step 4: Remove Jest Configuration Files

Since you're migrating away from Jest, you can remove any Jest-specific configuration files, such as jest.config.js or jest.setup.js, from your project.

Step 5: Create `setUpTests.ts` File

Create a new file named setUpTests.ts in your project's source directory (e.g., src/setUpTests.ts). This file will serve as the setup file for Vitest. Here's an example content for setUpTests.ts:

// add Vitest functions here globally
import { expect, afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';
import matchers from '@testing-library/jest-dom/matchers';

// Extend Vitest's expect method with methods from react-testing-library
expect.extend(matchers);

// Run cleanup after each test case (e.g., clearing jsdom)
afterEach(() => {
  cleanup();
});

Feel free to customize the setUpTests.ts file based on your specific testing requirements.

Step 6: Modify `vite.config.ts`

Open your vite.config.ts file (or create one if it doesn't exist) and make the following modifications:

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [react(), viteTsconfigPaths()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setUpTests.ts',
  },
});

Ensure that you have the necessary imports for the plugins used in the vite.config.ts file.

Step 7: Update Unit Test Code

In Vitest, the API is similar to Jest, so updating your unit test code should be straightforward. Replace references to Jest functions with the corresponding Vitest functions. For example, replace jest.fn() with vi.fn().

Make the necessary changes to your unit test

Conclusion

Migrating from Jest to Vitest for your React testing needs is a straightforward process that allows you to explore a different testing framework with its own set of features and advantages. By following the steps outlined in this guide, you can smoothly transition your tests to Vitest and take advantage of its capabilities.

It's important to note that Vitest, unlike Jest, does not provide built-in type checking for your test code. Therefore, it's crucial to ensure proper type annotations and type checking in your codebase separately. Be diligent in maintaining the correctness of your tests by ensuring that they align with the expected types of the data being tested.

One thing to be aware of when using Vitest is that tests may still pass even when incorrect or mismatched data types are used. Vitest does not perform strict type checks by default, so it's essential to exercise caution and validate your test inputs and assertions manually.

Overall, migrating from Jest to Vitest opens up new possibilities and testing approaches for your React applications. Be sure to explore the Vitest documentation and community resources to fully leverage its capabilities and take your testing to the next level.

Vite TypeScript & Jest with Absolute Paths

Eamonn Walsh — Sat, 17 Jun 2023 08:59:53 +0000

Introduction:
When working with Vite, TypeScript, and Jest, setting up absolute paths for module imports can enhance code organization and improve developer productivity. However, configuring absolute paths in this setup can sometimes be challenging. In this blog post, we will explore the steps to enable absolute path imports in a Vite project that uses TypeScript and Jest. We'll cover the necessary configurations and potential solutions to address common issues that may arise during the process.

Table of Contents:

1.The Challenge Faced
2.Setting up Absolute Paths in Vite
2.1. Install vite-tsconfig-paths
2.2. Configuring vite.config.js
2.3. Verifying TypeScript Configuration
3.Testing with Jest
3.1. Configuring Jest for Absolute Paths

1. The challenge faced

When working with a Vite project using TypeScript, absolute paths allow us to import modules without worrying about the relative path from the current file. This can improve readability, simplify imports, and make code more maintainable. However, configuring absolute paths in the Vite environment, especially when also using Jest for testing, can present challenges due to different module resolution mechanisms.

2. Setting up Absolute Paths in Vite

To enable absolute path imports in Vite, we need to configure the project appropriately. Here are the steps to follow:

2.1. Install `vite-tsconfig-paths`

npm install --save-dev vite-tsconfig-paths
# or
yarn add --dev vite-tsconfig-paths

2.2. Configuring `vite.config.js`

In the Vite project's root directory, locate the vite.config.js file (create one if it doesn't exist). Update the file as follows:

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), viteTsconfigPaths()],
});

2.3. Verifying TypeScript Configuration

Make sure your TypeScript configuration (tsconfig.json) includes the necessary options for absolute path resolution:

{
  "compilerOptions": {
    "baseUrl": "./src",
  }
}

Ensure the values correspond to your project's directory structure.

3. Testing with Jest

To ensure Jest recognizes and resolves absolute paths, follow these steps:

3.1. Configuring Jest for Absolute Paths

In your Jest configuration file (jest.config.js or jest.config.ts), make the following updates:

// jest.config.js
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
  moduleDirectories: ['node_modules', 'src'],
};

Let me know in the comments if this works for you

DEV Community: Eamonn Walsh

React Application: Build Once, Deploy Anywhere Solution

Prerequisites

Steps

1. Placeholder-based Configuration

2. Move Environment Variables to Kubernetes

3. Create a Shared Environment File

4. Create a Configuration Replacement Script

5. Copy the Replacement Script

6. Run the Build Command

7. Verify the Build Output

8. Update the Dockerfile

Conclusion

Migrating from Jest to Vitest for React Testing

Migrating from Jest to Vitest for React Testing

Step 1: Uninstall Jest

Step 2: Install Vitest

Step 3: Install Dependencies for Vitest

Step 4: Remove Jest Configuration Files

Step 5: Create setUpTests.ts File

Step 6: Modify vite.config.ts

Step 7: Update Unit Test Code

Conclusion

Vite TypeScript & Jest with Absolute Paths

1. The challenge faced

2. Setting up Absolute Paths in Vite

2.1. Install vite-tsconfig-paths

2.2. Configuring vite.config.js

2.3. Verifying TypeScript Configuration

3. Testing with Jest

3.1. Configuring Jest for Absolute Paths

Step 5: Create `setUpTests.ts` File

Step 6: Modify `vite.config.ts`

2.1. Install `vite-tsconfig-paths`

2.2. Configuring `vite.config.js`