### Run Viject Migration Tool (Shell)

Source: https://github.com/bhbs/viject/blob/main/README.md

This command sequence navigates into your React application directory and then executes the Viject migration tool using `npx`. `npx` runs the `viject` package from the npm registry without requiring global installation.

```sh
cd <YOUR_APP>
npx viject
```

--------------------------------

### Configure Vite Server Proxy (JavaScript)

Source: https://github.com/bhbs/viject/blob/main/docs/release.md

Creates a Vite plugin using the `configureServer` hook to integrate a custom proxy setup. It initializes the server proxy configuration and then applies the custom proxy middleware.

```javascript
function setupProxyPlugin() {
  return {
    name: "configure-server",
    config() {
      return {
        server: { proxy: {} },
      };
    },
    configureServer(server) {
      setupProxy(server.middlewares);
    },
  };
}
```

--------------------------------

### Running Vite Development and Build Commands (Shell)

Source: https://github.com/bhbs/viject/blob/main/docs/release.md

Standard npm scripts to start the development server (`npm run dev`) and build the production bundle (`npm run build`) after migrating to Vite. These replace the original `react-scripts` commands. Requires `npm` and a configured `package.json`.

```sh
npm run dev
npm run build
```

--------------------------------

### Vite Plugin for Resolving Modules with Tilde Prefix (JavaScript)

Source: https://github.com/bhbs/viject/blob/main/docs/release.md

A Vite plugin function (`importPrefixPlugin`) that configures a module alias to allow importing modules from `node_modules` using a `~` prefix, similar to Create React App's default behavior. It uses `resolve.alias` with a regular expression to replace `~` at the start of a path. Requires Vite's `resolve.alias` configuration.

```js
function importPrefixPlugin() {
  return {
    name: "import-prefix-plugin",
    config() {
      return {
        resolve: {
          alias: [{ find: /^~([^/])/, replacement: "$1" }],
        },
      };
    },
  };
}
```

--------------------------------

### Running Viject Migration Command (Shell)

Source: https://github.com/bhbs/viject/blob/main/docs/release.md

Command to execute the Viject migration tool in the project directory. It initiates the process of converting a Create React App project to use Vite. Requires `npx` and being inside the project directory.

```sh
npx viject
```

--------------------------------

### Vite Plugin for Configuring Development Server (JavaScript)

Source: https://github.com/bhbs/viject/blob/main/docs/release.md

A Vite plugin function (`devServerPlugin`) to configure the development server's host, port, and HTTPS settings based on environment variables (`HOST`, `PORT`, `HTTPS`, `SSL_CRT_FILE`, `SSL_KEY_FILE`). It reads SSL certificate and key files if HTTPS is enabled and paths are provided. Requires Vite's `loadEnv` and Node.js `fs` and `path` modules (`readFileSync`, `resolve`).

```js
function devServerPlugin() {
  return {
    name: "dev-server-plugin",
    config(_, { mode }) {
      const { HOST, PORT, HTTPS, SSL_CRT_FILE, SSL_KEY_FILE } = loadEnv(
        mode,
        ".",
        ["HOST", "PORT", "HTTPS", "SSL_CRT_FILE", "SSL_KEY_FILE"],
      );
      const https = HTTPS === "true";
      return {
        server: {
          host: HOST || "0.0.0.0",
          port: parseInt(PORT || "3000", 10),
          open: true,
          https:
            https && SSL_CRT_FILE && SSL_KEY_FILE
              ? {
                  cert: readFileSync(resolve(SSL_CRT_FILE)),
                  key: readFileSync(resolve(SSL_KEY_FILE)),
                }
              : https,
        },
      };
    },
  };
}
```

--------------------------------

### Transform Vite Index HTML (JavaScript)

Source: https://github.com/bhbs/viject/blob/main/docs/release.md

Creates a Vite plugin using the `transformIndexHtml` hook to replace environment variable placeholders (e.g., `%VAR%`) in the `index.html` file with actual environment variable values loaded via `loadEnv`.

```javascript
function htmlPlugin(mode) {
  const env = loadEnv(mode, ".", ["REACT_APP_", "NODE_ENV", "PUBLIC_URL"]);
  return {
    name: "html-transform",
    transformIndexHtml: {
      enforce: "pre",
      transform(html) {
        return html.replace(/%(.*?)%/g, (match, p1) => env[p1] ?? match);
      },
    },
  };
}
```

--------------------------------

### Vite Plugin for Loading Environment Variables (JavaScript)

Source: https://github.com/bhbs/viject/blob/main/docs/release.md

A Vite plugin function (`envPlugin`) designed to load environment variables prefixed with `REACT_APP_`, `NODE_ENV`, and `PUBLIC_URL` from `.env` files, mimicking Create React App's behavior. It uses `loadEnv` and `define` to make these variables available via `process.env` in the application code. Requires Vite's `loadEnv` utility.

```js
function envPlugin() {
  return {
    name: "env-plugin",
    config(_, { mode }) {
      const env = loadEnv(mode, ".", ["REACT_APP_", "NODE_ENV", "PUBLIC_URL"]);
      return {
        define: Object.fromEntries(
          Object.entries(env).map(([key, value]) => [
            `process.env.${key}`,
            JSON.stringify(value),
          ]),
        ),
      };
    },
  };
}
```

--------------------------------

### Vite Plugin for Changing Build Output Directory (JavaScript)

Source: https://github.com/bhbs/viject/blob/main/docs/release.md

A Vite plugin function (`buildPathPlugin`) that sets the output directory for the production build based on the `BUILD_PATH` environment variable, defaulting to 'build'. This aligns with Create React App's `BUILD_PATH` setting. It configures the `build.outDir` option. Requires Vite's `loadEnv`.

```js
function buildPathPlugin() {
  return {
    name: "build-path-plugin",
    config(_, { mode }) {
      const { BUILD_PATH } = loadEnv(mode, ".", ["BUILD_PATH"]);
      return {
        build: {
          outDir: BUILD_PATH || "build",
        },
      };
    },
  };
}
```

--------------------------------

### Vite Plugin for Setting Base Path (JavaScript)

Source: https://github.com/bhbs/viject/blob/main/docs/release.md

A Vite plugin function (`basePlugin`) that configures the base public path for the application based on the `PUBLIC_URL` environment variable. This is used for deploying the app to a subpath and matches Create React App's `PUBLIC_URL` behavior. It configures the `base` option. Requires Vite's `loadEnv`.

```js
function basePlugin() {
  return {
    name: "base-plugin",
    config(_, { mode }) {
      const { PUBLIC_URL } = loadEnv(mode, ".", ["PUBLIC_URL"]);
      return {
        base: PUBLIC_URL || "",
      };
    },
  };
}
```

--------------------------------

### Vite Plugin for Enabling Sourcemaps (JavaScript)

Source: https://github.com/bhbs/viject/blob/main/docs/release.md

A Vite plugin function (`sourcemapPlugin`) that enables or disables sourcemap generation for the build based on the `GENERATE_SOURCEMAP` environment variable, providing compatibility with Create React App's setting. It configures the `build.sourcemap` option. Requires Vite's `loadEnv`.

```js
function sourcemapPlugin() {
  return {
    name: "sourcemap-plugin",
    config(_, { mode }) {
      const { GENERATE_SOURCEMAP } = loadEnv(mode, ".", ["GENERATE_SOURCEMAP"]);
      return {
        build: {
          sourcemap: GENERATE_SOURCEMAP === "true",
        },
      };
    },
  };
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.