How i migrated my create-react-app legacy code to vite for faster build and compile time

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.