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:

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

Edit your vite.config.ts:

`typescript
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:

`typescript
///
`

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.

$3

`typescript
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
`

$3

`typescript
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) => {
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.

$3

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

`shell
mv public/index.html ./
`

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

$3

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

$3

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:

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