Migrate from CRA to Vite

[bgins]

This PR shows how to convert the CRA version of this app to use Vite.

Here are the steps needed to make the switch:

Install vite and update scripts

Install vite and @vitejs/plugin-react-refresh as dev dependencies and remove react-scripts

npm install vite @vitejs/plugin-react-refresh --save-dev
npm remove react-scripts

Update npm scripts in package.json to use vite instead of react-scripts.

After removing react-scripts, this should look like

  "scripts": {
    "start": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },

Rename Files

Rename all files with React components from .js to .jsx.

Move index.html and reference the entry point

Move index.html to the root of the project and add

<script type="module" src="./src/index.jsx"></script>

right before </body> towards the end of the file.

Remove %PUBLIC_URL%

Remove all %PUBLIC_URL% in index.html. For example

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

should be changed to

<link rel="apple-touch-icon" href="/logo192.png" />

Add Vite config

Add a vite.config.ts. Make sure to set build.target to es2020.

Update build directory

Update .gitignore to ignore /dist instead of /build.

Update build in fission.yaml from ./build to ./dist.