mirror of
				https://github.com/Xahau/xahau.js.git
				synced 2025-11-04 04:55:48 +00:00 
			
		
		
		
	Add vite setup steps to README (#2143)
* Add to README with vite steps * Add ws to config
This commit is contained in:
		
							
								
								
									
										66
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										66
									
								
								README.md
									
									
									
									
									
								
							@@ -169,6 +169,72 @@ If you want to use `xrpl.js` with React Native you will need to install shims fo
 | 
			
		||||
  import './shim'
 | 
			
		||||
  ...
 | 
			
		||||
  ```
 | 
			
		||||
### Using xrpl.js with Vite React
 | 
			
		||||
 | 
			
		||||
Similar to above, to get xrpl.js to work with Vite you need to set up a couple aliases in the vite.config.ts file. 
 | 
			
		||||
 | 
			
		||||
1. If it's a fresh project you can use `npm create vite@latest` then choose the React and TypeScript options.
 | 
			
		||||
 | 
			
		||||
2. Copy these settings into your `vite.config.ts` file.
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
import { defineConfig } from 'vite'
 | 
			
		||||
import react from '@vitejs/plugin-react'
 | 
			
		||||
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
 | 
			
		||||
import polyfillNode from 'rollup-plugin-polyfill-node'
 | 
			
		||||
 | 
			
		||||
// https://vitejs.dev/config/
 | 
			
		||||
export default defineConfig({
 | 
			
		||||
  plugins: [react()],
 | 
			
		||||
  define: {
 | 
			
		||||
    'process.env': {}
 | 
			
		||||
  },
 | 
			
		||||
  optimizeDeps: {
 | 
			
		||||
    esbuildOptions: {
 | 
			
		||||
 | 
			
		||||
        define: {
 | 
			
		||||
          global: 'globalThis',
 | 
			
		||||
        },
 | 
			
		||||
        plugins: [
 | 
			
		||||
            NodeGlobalsPolyfillPlugin({
 | 
			
		||||
                process: true,
 | 
			
		||||
                buffer: true,
 | 
			
		||||
            }),
 | 
			
		||||
        ],
 | 
			
		||||
    },
 | 
			
		||||
},
 | 
			
		||||
build: {
 | 
			
		||||
  rollupOptions: {
 | 
			
		||||
      plugins: [
 | 
			
		||||
          polyfillNode(),
 | 
			
		||||
      ]
 | 
			
		||||
  }
 | 
			
		||||
},
 | 
			
		||||
resolve: {
 | 
			
		||||
  alias: {
 | 
			
		||||
    events: 'events',
 | 
			
		||||
    crypto: 'crypto-browserify',
 | 
			
		||||
    stream: 'stream-browserify',
 | 
			
		||||
    http: 'stream-http',
 | 
			
		||||
    https: 'https-browserify',
 | 
			
		||||
    ws: 'xrpl/dist/npm/client/WSWrapper',
 | 
			
		||||
  },
 | 
			
		||||
}})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
3. Install the config dependencies and xrpl (e.g. using this command)
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
npm install --save-dev @esbuild-plugins/node-globals-polyfill \
 | 
			
		||||
		rollup-plugin-polyfill-node \
 | 
			
		||||
		&& npm install
 | 
			
		||||
		events \
 | 
			
		||||
		crypto-browserify \
 | 
			
		||||
		stream-browserify \
 | 
			
		||||
		stream-http \
 | 
			
		||||
		https-browserify \
 | 
			
		||||
		xrpl
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
### Using xrpl.js with Deno
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user