Migrate from cra to vite

dvkam commented 1 year ago

Hey, I migrated the first training from CRA to Vite bundler. Related to issue #6 Tested the app and it all works on my end.

removed unused dependencies due to the migration and updated to current versions e.g. taquito to v17
removed unused files now that were related to CRA and replaced with needed Vite files e.g. Vite config
in Vite its import.meta.env.VITE_ instead of process.env.
added a key in map to remove the unique key prop warning in console
added conversion of the userBalance so its displayed in Tez instead od mutez
made changes in the README so it reflects the updated code

Please let me know if anything needs to change.

zamrokk commented 1 year ago

I need to finish some trainings with current config this week and next one, end of next week, I will be able to have a look and merge Also, applying the same to all others trainings at same time

dvkam commented 1 year ago

Sure whenever you get the time, I am happy to migrate all the other trainings too. So all are on the same tech stack.

dvkam commented 1 year ago

The flow to start it is similar like with CRA:

Install dependencies:

npm i

Start development server:

npm run dev

Building the App

npm run build

After you have build the app you can run it locally:

npm run preview

And In case you wonder about the flow regarding the config-overrides.js in CRA how it works with Vite:

In order to not get polyfill issues (because of stream-browserify, buffer etc), this is what I did with Vite config:

Installed the dependencies. Same with CRA. Then created a new file nodeSpecific.ts in the src folder of the project and added:

import { Buffer } from 'buffer'

globalThis.Buffer = Buffer

Then opened the index.html file and added the following script in the body. It should look like this:

<body>
  <div id="root"></div>
   <script type="module" src="/src/nodeSpecific.ts"></script> //add this line
   <script type="module" src="/src/main.tsx"></script>
 </body>

Finally open the vite.config.ts file and added the resolve:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

 // https://vitejs.dev/config/
 export default defineConfig({
   define: {
     global: {},
   },
   plugins: [react()],
   resolve: {
     alias: {
       stream: 'stream-browserify',
       os: 'os-browserify/browser',
       util: 'util',
       process: 'process/browser',
       buffer: 'buffer',
     },
   },
 })

Now we can run the app. Same process applied to all the other CRA -> Vite migrations

marigold-dev / training-dapp-1

Migrate from cra to vite #7