Merge pull request #15 from dvkam/update-to-vite

Update to vite
ecadlabs · Jul 11, 2023 · 5a44e1e · 5a44e1e
2 parents 8a2ff62 + accf92f
commit 5a44e1e
Show file tree

Hide file tree

Showing 20 changed files with 1,985 additions and 31,638 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,23 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -12,15 +12,82 @@ A minimal React setup for starting developing Tezos DApps quickly with Taquito.
 
    `git clone <YOUR_REPOSITORY_URL>`
 
-3. Change your current working directory to the newly cloned repository directory.
-4. Install dependencies:
+4. Change your current working directory to the newly cloned repository directory.
+5. Install dependencies:
 
    `npm install`
 
-5. Start development server:
+6. Start development server:
 
-   `npm run start`
+   `npm run dev`
 
-6. Open https://localhost:3000 in your browser to see a sample application.
+7. Open http://localhost:5173/ in your browser to see a sample application.
+
+## Building the App
+
+1. Run the command:
+
+   `npm run build`
+
+2. After you have build the app you can run it locally:
+
+   `npm run preview`
+
+3. Open http://localhost:4173/ in your browser to see the production build. 
+
+   For more information read the [Vite Guide](https://vitejs.dev/guide/static-deploy.html)
 
 [logo]: https://raw.githubusercontent.com/ecadlabs/taquito-boilerplate/master/assets/built-with-taquito.png "Built with Taquito"
+
+> ## Polyfill
+>
+> Before we start we need to add the following dependencies in order to not get polyfill issues. The reason for this step is that certain required dependencies are Node APIs, thus not included in Browsers. But still needed for communication and interaction with Wallets and Smart Contracts.
+> For a better understanding here are the steps described. 
+>
+> You do not need to do the steps as it is already configured.
+>
+> Run `npm install buffer stream-browserify util events process`
+>
+> Then create a new file `nodeSpecific.ts` in the src folder of the project and add:
+> ```js
+> import { Buffer } from 'buffer'
+>
+> globalThis.Buffer = Buffer
+> ```
+>
+> Then open the `index.html` file and add the following script in the body. 
+> It should look like this:
+>
+> ```js
+> <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 add the `resolve` part:
+>
+> ```js
+> 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. 
diff --git a/config-overrides.js b/config-overrides.js
diff --git a/index.html b/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
+    integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
+    crossorigin="anonymous"
+  />
+    <title>Taquito Boilerplate</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/nodeSpecific.ts"></script>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>