Huybn

Posted on May 5, 2021 • Edited on May 21, 2021

Add Vite to existing React project

#react #vite

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

Top comments (3)

Aagam Doshi • May 27 '21

Can you please help me to have a proper working application using lib

Below is my current vite config.js with build with lib configuration, it worked properly using your current build config

vite.config.js

`/* eslint-disable import/no-extraneous-dependencies */

import reactRefresh from '@vitejs/plugin-react-refresh';
import path from 'path';
import { Alias, defineConfig } from 'vite';
import * as tsconfig from './tsconfig.paths.json';

export default defineConfig({
build: {
lib: {
entry: path.resolve(__dirname, "src/main.tsx"),
name: "Aagam",
},
rollupOptions: {
external: ["react"],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
react: 'React',
},
},
},
minify: true,
sourcemap: false,
},
plugins: [reactRefresh()],
resolve: {
alias: readAliasFromTsConfig(),
},
css: {
modules: { localsConvention: 'camelCase' },
preprocessorOptions: {
scss: {
additionalData: $injectedColor: orange;
}
}
}
});

`

package.json

"name": "@cimpress-technology/reporting-ui-component",
"version": "1.0.0",
"files": [
"dist"
],
"typings": "./dist/reporting-ui-component.d.ts",
"main": "./dist/reporting-ui-component.umd.js",
"module": "./dist/reporting-ui-component.es.js",
"scripts": {
"dev": "vite",
"build": "tsc && vite build && tsc -P tsconfig.dts.json",
"serve": "vite preview",
"start": "npm run dev",
"lint:fix": "eslint src --ext .jsx,.js,.ts,.tsx --quiet --fix",
"lint:format": "prettier --loglevel warn --write \"./*/.{js,jsx,ts,tsx,css,md,json}\" ",
"lint": "yarn lint:format && yarn lint:fix ",
"type-check": "tsc",
"lint-staged": "npx lint-staged -r",
"validate": "npm run style",
"validate-commit": "npm run lint-staged",
"style": "npx -q eslint src --ext .ts,.tsx --fix"
}

tsconfig.dts.json

{
"extends": "./tsconfig.json",
"compilerOptions": {
"noEmit": false,
"declaration": true,
"declarationDir": "dist",
"emitDeclarationOnly": true
},
"include": ["src"]
}
It would be great if you could provide some solution to it?
I am getting error on running above config

Error: lib folder is generated properly but when loaded on localhost it says
Cannot GET/

Stackoverflow : stackoverflow.com/questions/677234...

Github Issue : github.com/huybn5776/liu-online-im...