Add Vite to existing React project

Huybn — Wed, 05 May 2021 07:10:26 +0000

Speed up your dev server with change build tool from webpack to Vite.

Steps

Install packages.

npm i -D vite @vitejs/plugin-react-refresh

Create a vite config file: vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

export default defineConfig({
  plugins: [reactRefresh()]
})

Edit package.json

// package.json
{
  "scripts": {
    "start": "vite",
    "build": "vite build"
    // if you need to run eslint and tsc
    "build": "eslint src && tsc && vite build",
  },
}

Move index.html from /public to your project root, remove all %PUBLIC_URL%, and add a <script> tag to referehce /src/index.tsx, or /src/index.jsx if is JavaScript project.

<!-- index.tsx or index.jsx -->

<!-- before -->
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<!-- after -->
+ <link rel="icon" href="/favicon.ico" />
+ <link rel="apple-touch-icon" href="/logo192.png" />
+ <link rel="manifest" href="/manifest.json" />

  <div id="root"></div>
+ <script type="module" src="/src/index.tsx"></script>

That is all, run npn run start and check if anything is ok.

Other settings

If your project have those dependency, than you need to do more setup for Vite.

SCSS

Just replace node-sass package with sass.

npm i -D sass
npm un node-sass

CSS module localsConvention

Reference css class that is naming with dahs-case .css-class-name { ... } with camelCase className={styles.cssClassName} in code.

// vite.config.ts
export default defineConfig({
  css: { modules: { localsConvention: 'camelCase' } },
});

Path alias

Shorten your import statements. for example:

// SomeComponent.tsx
- import { ApiService } from '../../../services/api-serivce';
+ import { ApiService } from '@serivces/api-serivce';

Setup

// tsconfig.json or jsconfig.json
{
  "extends": "./tsconfig.paths.json", // or "./jsconfig.paths.json"
}

// tsconfig.paths.json or jsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@services/*": ["src/services/*"],
    }
  }
}

Read tsconfig.paths.json from vite.config.ts

// vite.config.ts
import path from 'path';

import { Alias, defineConfig } from 'vite';

import * as tsconfig from './tsconfig.paths.json';

function readAliasFromTsConfig(): Alias[] {
  const pathReplaceRegex = new RegExp(/\/\*$/, '');
  return Object.entries(tsconfig.compilerOptions.paths).reduce(
    (aliases, [fromPaths, toPaths]) => {
      const find = fromPaths.replace(pathReplaceRegex, '');
      const toPath = toPaths[0].replace(pathReplaceRegex, '');
      const replacement = path.resolve(__dirname, toPath);
      aliases.push({ find, replacement });
      return aliases;
    },
    [] as Alias[],
  );
}

export default defineConfig({
  resolve: {
    alias: readAliasFromTsConfig(),
  },
});

Proxy

// vite.config.ts
import reactRefresh from '@vitejs/plugin-react-refresh';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [reactRefresh()],
  server: {
    proxy: {
      '/api': 'https://your-api-server.com',
    },
  },
});

References

Issue comment of Vite creator

Commit of my side project

Comparing the New Generation of Build Tools

DEV Community: Huybn