Update to vite

[dvkam]

Hey, I thought I might update the template. The App works still the same and looks the same.
Here is a list of the changes I did:

• Replaced CRA with Vite as bundler. For context, the React documentation removed CRA as it is not longer recommended to start a react project this way and some reasoning behind this to read here Replace Create React App recommendation with Vite reactjs/react.dev#5487 (comment)

• removed unused dependencies and updated to current versions e.g. taquito to v17

• changed disableDefaultEvents to false in ConnectWallet component and removed the event handlers that were added back. The reason for this is that the beacon popup window did not disappeared automatically after the wallet was already connected/paired(Establishing Connection dialog does not clear after pairing wallet). (Maybe because of v4?) But with disableDefaultEvents: false the flow works just as intended.

• added an anchor element for the displayed userAddress so its clickable to and redirects the user to tzkt to see his operations. Just like it works with the contract address already.

• adapted the README file e.g. instead of npm run start its now npm run dev. And added short info how to build the app.

• when running the build with Vite it didnt work because of the error in console require is not defined, to solve this the transformMixedEsModules was added to the vite.config

Let me know what you think.

[dsawali]

Hello @dvkam, can you also provide some screenshots to inform how the template will run for a new user? As well as post your local Node and NPM versions for future reference? Thank you!

[dvkam]

Hello @dsawali sure, so my Node and NPM versions are:

Desktop:
Node: v19.0.1
NPM: v8.19.2

Laptop:
Node: v16.13.2
NPM: v9.3.0

[dvkam]

Hi Davis. I updated the Readme file with more information and pointed the merge into the new branch as you asked.

[dsawali]

@dvkam thank you! I'll merge your work into said branch and check it out locally

[dvkam]

Hi, I believe the following issues can be closed with the merge of this PR:

#9 - can be closed as there is no react scripts usage anymore. So this error wont happen.
In order to run https in dev environment with a local certificate:

The Vite documentation suggest using their official package instead: @vitejs/plugin-basic-ssl
Install: npm i -D @vitejs/plugin-basic-ssl

Add to your Vite config:

import basicSsl from '@vitejs/plugin-basic-ssl'

export default {
  plugins: [
    basicSsl()
  ]
}

Run: npm run dev -- --https

---

#11 - uses latest beacon version. And Umami wallet interaction with the template works. I tested it myself.

---

#8 - is resolved, I believe this was due to the fact that in ConnectWallet.tsx the disableDefaultEvents was set to true, I have set it to false and the beacon flow works as it should since then.