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 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
$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.
and that’s it. Thanks for reading.
so far my build time has reduced to more than half.
