Skip to main content

Setting Up Your Environment for React (Vite)

To build React applications for OP_NET, you must use Vite instead of Create React App (CRA), as CRA is outdated and doesn't provide the optimizations and compatibility required for modern development. This guide outlines the mandatory configurations for your development environment.


Why Vite?

Vite offers a modern, fast, and optimized bundler that integrates seamlessly with React. It ensures compatibility with OP_NET and significantly improves the development experience.


Mandatory Configurations

To ensure your React project works properly with OP_NET, the following configurations are required. Without these, your React project may fail to build or run.

1. ESLint Configuration

You must use ESLint version 9, no higher or lower versions are supported. Below is the required configuration file:

eslint.config.js

// @ts-check

import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";

export default tseslint.config(
{ ignores: ["dist"] },
{
extends: [
eslint.configs.recommended,
...tseslint.configs.recommended,
...tseslint.configs.strictTypeChecked,
],
files: ["**/*.{ts,tsx}"],
languageOptions: {
ecmaVersion: 2023,
globals: globals.browser,
parserOptions: {
projectService: true,
tsconfigDirName: import.meta.dirname,
},
},
plugins: {
// @ts-ignore
"react-hooks": reactHooks,
"react-refresh": reactRefresh,
},
// @ts-ignore
rules: {
...reactHooks.configs.recommended.rules,
"react-refresh/only-export-components": [
"warn",
{ allowConstantExport: true },
],
"no-undef": "off",
"@typescript-eslint/no-unused-vars": "off",
"no-empty": "off",
"@typescript-eslint/restrict-template-expressions": "off",
"@typescript-eslint/only-throw-error": "off",
"@typescript-eslint/no-unnecessary-condition": "off",
"@typescript-eslint/unbound-method": "warn",
"@typescript-eslint/no-confusing-void-expression": "off",
"@typescript-eslint/no-extraneous-class": "off",
"no-async-promise-executor": "off",
"@typescript-eslint/no-misused-promises": "off",
"@typescript-eslint/no-unnecessary-type-parameters": "off",
"@typescript-eslint/no-duplicate-enum-values": "off",
"prefer-spread": "off",
"@typescript-eslint/no-empty-object-type": "off",
},
},
{
files: ["**/*.js"],
...tseslint.configs.disableTypeChecked,
}
);

2. TypeScript Configuration

Using TypeScript is mandatory for OP_NET development. JavaScript may cause runtime issues and is not supported for production-level development.

Root tsconfig.json:

{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
}
]
}

App-specific tsconfig.app.json:

{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
}

Node-specific tsconfig.node.json:

{
"compilerOptions": {
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["vite.config.ts"]
}

3. Vite Configuration

Install the required plugins:

npm install vite@5 vite-plugin-node-polyfills vite-plugin-eslint2
IMPORTANT

Ensure you use vite@5 for compatibility with vite-plugin-eslint2.

Below is the required vite.config.ts file:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { nodePolyfills } from "vite-plugin-node-polyfills";

import eslint from "vite-plugin-eslint2";

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), nodePolyfills(), eslint()],
resolve: {
alias: {
// Polyfill `global`
global: "global",
},
},
build: {
rollupOptions: {
output: {
// Control chunk splitting behavior
manualChunks(id) {
if (id.includes("node_modules")) {
// Split vendor code (e.g., node_modules) into a separate chunk
return "vendor";
}
},
},
},
},
});
Best Practices
  • Using ESLint version 9 is mandatory. Any other version may cause linting errors.
  • TypeScript is required for OP_NET React development. Using JavaScript may lead to runtime issues and is strongly discouraged.
  • Ensure you configure your project with Vite, as Create React App is not supported.
  • Always use version 5 of Vite for compatibility with vite-plugin-eslint2.

Next Steps

Once your environment is configured, proceed to Interacting with an OP_NET Node for further guidance.