This is just a small article, i will not write a long paras on why i did it, and what improvements i experience, i will just tell you how i did it.
About my previous create-react-app legacy code:
it is made in typescript and javascript
How i migrated:
first i installed these libraries
npm install vite @vitejs/plugin-react vite-tsconfig-paths
and create a vite.config.ts file
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
export default defineConfig({
// depending on your application, base can also be "/"
base: '',
plugins: [react(), viteTsconfigPaths()],
server: {
// this ensures that the browser opens upon server start
open: true,
// this sets a default port to 3000
port: 3000
}
});
Then i moved my index.html file to root directory, earlier it was on src folder
then i converted all my js file to jsx where i had some html inside
[note: only do this if you are getting error]
i used this script to convert all my js file to jsx file
it is a powershell script for windows, you can search for your os, just run this file in powershell
/.script.ps1
Get-ChildItem -Path "src" -Filter *.js -Recurse | ForEach-Object {
$newName = $_.FullName -replace '.js$','.jsx'
if (-Not (Test-Path $newName)) {
Rename-Item -Path $_.FullName -NewName $newName
} else {
Write-Host "Skipping renaming of $($_.FullName) as $newName already exists."
}
}
then in my .env file i replaced all REACT_APP_ to VITE_REACT_APP_
and in my code i replaced all process.env to import.meta.env.VITE_REACT_APP
i also made a vite-env.d.ts file and with this and placed it inside src as well as root directory.
/// <reference types="vite/client" />
and that's it. Thanks for reading.
so far my build time has reduced to more than half.
Top comments (0)