react-scripts-vite

An almost drop-in replacement for react-scripts, but based on Vite.

Features

• svgr
• TypeScript paths
• TypeScript type checking
• ESLint linting
• PWA support
• process.env
• Vitest

Getting Started

Install @promoboxx/react-scripts-vite:

npm install --save-dev @promoboxx/react-scripts-vite

Edit your vite.config.ts:

import { viteConfig } from '@promoboxx/react-scripts-vite'

export default viteConfig

If you're using TypeScript, you'll want to load the client types. This will clear up any errors when accessing import.meta.hot, or when importing an image.

Put this in src/react-scripts-vite.d.ts:

/// <reference types="@promoboxx/react-scripts-vite/dist/client" />

Customization

react-scripts-vite exports both a viteConfig function and an pluginOptions object. The pluginOptions object lets you customize the included plugins. And if you'd like to add your own plugins, or change any of the vite config, you're free to do so.

Changing included plugin options

import { viteConfig, pluginOptions } from '@promoboxx/react-scripts-vite'

// Setting one of the properties to `false` turns off the plugin entirely.
pluginOptions.react = false
pluginOptions.pwa = {
  registerType: 'autoUpdate',
}

export default viteConfig

Changing included vite config

import { defineConfig } from 'vite'
import { viteConfig, pluginOptions } from '@promoboxx/react-scripts-vite'

// Disable SVGR.
pluginOptions.svgr = false
// Change PWA config.
pluginOptions.pwa = {
  registerType: 'autoUpdate',
}

export default defineConfig(async (env) => {
  // await is needed so the type isn't `UserConfig | Promise<UserConfig>`
  const config = await viteConfig(env)

  config.plugins = [
    ...(config.plugins || []),
    // Add whatever plugins you want.
    YourVitePlugin(),
  ]

  config.build = {
    ...config.build,
    // Turn off sourcemaps.
    sourcemap: false,
  }

  return config
})

Migrating from react-scripts

Should be very straightforward. For application code, everything should be supported out of the box.

index.html

Vite expects your index.html to live at the root directory, not in public/

mv public/index.html ./

Remove any references to %PUBLIC_URL%, vite correctly sets the base path for you.

Sass

Sass isn't included as per Vite's recommendation. You can add pre-processors to your projects if you wish.

Tests

react-scripts-vite uses Vitest instead of Jest. Vitest has a jest-compatible interface, accessible via vi.

The path to the test setup file has changed:

mkdir -p src/test/
mv src/setupTests.ts src/test/setup.ts