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',
},
},
});
Top comments (3)
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';
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({
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
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...
any message in command console? Usually, if you see "Cannot GET/" then you will also see another error message in console that run dev server.
Wow,Thanks I really learn a lot