Viject

Viject supports a wide range of features commonly used in Create React App environments.

Styles and Assets

• Supported: Stylesheets (Standard, CSS Modules, Sass), Post-Processing CSS, Images, Fonts, Files, the public folder, and Code Splitting.
• Partial/Experimental Support: CSS Reset, Loading .graphql files.

Build and Development

• Supported: Bootstrap, TypeScript, Routers, Custom Environment Variables, Performance Measurement, and Production Builds.
• Partial/Experimental Support: Flow, Relay, and Progressive Web Apps (PWA).
• Testing: For migrating tests, refer to the Vitest migration guide.

Back-End Integration

• Supported: Proxying API requests in development and fetching data with AJAX requests.

Viject is a tool designed to perform a one-shot migration of React applications from react-scripts (Create React App) to Vite. It automates the heavy lifting by rewriting npm scripts, adding necessary dependencies, moving index.html, transforming .js files containing JSX into .jsx, and generating a vite.config.(js|ts) file that includes plugins to maintain CRA compatibility. This allows for a gradual migration where differences are absorbed by the Vite configuration.

cd <YOUR_APP>
npx viject

Viject handles several environment variables used in CRA to ensure compatibility during the migration.

Fully Supported Variables:

• BROWSER
• HOST
• PORT
• HTTPS
• PUBLIC_URL
• BUILD_PATH
• GENERATE_SOURCEMAP
• FAST_REFRESH

Partially Supported Variables:

• BROWSER_ARGS
• INLINE_RUNTIME_CHUNK
• IMAGE_INLINE_SIZE_LIMIT
• TSC_COMPILE_ON_ERROR
• ESLINT_NO_DEV_ERRORS
• DISABLE_ESLINT_PLUGIN

Not Supported:

• WDS_SOCKET_HOST
• WDS_SOCKET_PATH
• WDS_SOCKET_PORT
• CI
• REACT_EDITOR
• CHOKIDAR_USEPOLLING
• DISABLE_NEW_JSX_TRANSFORM

The convertJS2JSX function automates the process of renaming .js files to .jsx within the src directory. It recursively scans the src folder, reads the content of every .js file, and uses an AST parser to detect if the file contains JSX syntax. If JSX is detected, the file is renamed by appending an x to the extension (e.g., file.js becomes file.jsx).

import { convertJS2JSX } from './path/to/convert';

// This will scan the 'src' directory and rename files containing JSX
convertJS2JSX();

Call getOptions() to automatically detect the project's configuration. It scans the filesystem for specific configuration files and package settings to return an Options object.

Detected features include:

• jsConfig: Presence of a JavaScript configuration file.
• tsConfig: Presence of a TypeScript configuration file.
• svg: Presence of any .svg files within the source directory.
• proxy: The proxy key defined in package.json.
• setupProxy: Presence of a proxy setup file.
• setupTestsJs: Presence of a JavaScript test setup file.
• setupTestsTs: Presence of a TypeScript test setup file.

import { getOptions } from './src/options.js';

const options = getOptions();
console.log(options.tsConfig); // true if tsconfig.json exists

The use object in the Playwright configuration defines default settings for every test. In Viject, these are configured to point to the local development server.

use: {
	actionTimeout: 0,
	baseURL: "http://localhost:3000/PUBLIC_URL/",
	trace: "on-first-retry",
}

Viject defines three browser projects to ensure cross-browser compatibility. Each project uses specific device descriptors from Playwright.

projects: [
	{
		name: "chromium",
		use: { ...devices["Desktop Chrome"] },
	},
	{
		name: "firefox",
		use: { ...devices["Desktop Firefox"] },
	},
	{
		name: "webkit",
		use: { ...devices["Desktop Safari"] },
	},
],

The Options type defines the configuration state detected within a project. These options determine which features (like TypeScript support, SVG handling, or proxy settings) are active based on the presence of specific files or configuration keys in the project structure.

export type Options = {
	jsConfig: boolean;
	tsConfig: boolean;
	svg: boolean;
	proxy: boolean;
	setupProxy: boolean;
	setupTestsJs: boolean;
	setupTestsTs: boolean;
};