https://github.com/douganderson444/ipfs-vite-svelte-kit
Using IPFS in SvelteKit with Vite
https://github.com/douganderson444/ipfs-vite-svelte-kit
Last synced: 2 months ago
JSON representation
Using IPFS in SvelteKit with Vite
- Host: GitHub
- URL: https://github.com/douganderson444/ipfs-vite-svelte-kit
- Owner: DougAnderson444
- Created: 2021-10-15T21:43:36.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-10-12T19:30:59.000Z (over 1 year ago)
- Last Synced: 2025-03-25T03:26:31.956Z (3 months ago)
- Language: JavaScript
- Homepage: https://douganderson444.github.io/ipfs-vite-svelte-kit/
- Size: 10.2 MB
- Stars: 17
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# IPFS and OrbitDB SvelteKit
Clone this directory and run it in the browser. Please see browser console for simple Orbit-DB logs.
## Steps to Reproduce (might not work anymore with Svelte4 and [email protected])
- Install SvelteKit
```
npm init svelte@next myIPFSexperiment
npm i
```
- Install IPFS-core
`npm i ipfs-core`
- Install process and util, as it comes in node but not the browser
`npm i process util`
- We also need some globals, save them to `src/node-globals.js`:
```js
// file: src/node-globals.js
export const Buffer = require('buffer').Buffer;
export const process = require('process/browser');
export const global =
typeof global !== 'undefined'
? global
: typeof globalThis !== 'undefined'
? globalThis
: typeof self !== 'undefined'
? self
: typeof window !== 'undefined'
? window
: {};
if (globalThis && globalThis.process && globalThis.process.env)
globalThis.process.env.LIBP2P_FORCE_PNET = false;
```
- We need to build ipfs-core for the browser, use esbuild to do so
`npm i -D esbuild`
- Add a shotcut for the above in package.json
```js
"scripts": {
"build:ipfs": "esbuild ./node_modules/ipfs-core --bundle --format=esm --sourcemap --main-fields=browser,module,main --inject:./src/node-globals.js --define:globalThis.process.env.NODE_ENV='\"production\"' --splitting --outdir=./src/modules/ipfs-core"
},
```
- run the esbuild script:
```
npm run build:ipfs
```
Results are now in
`src\modules\ipfs-core\ipfs-core.js`
- Import IPFS in the app. Need to do this inside svelte's onMount to ensure the DOM is loaded in the browser
```js
// src/routes/index.svelte
import { onMount } from 'svelte';
onMount(async () => {
// In Svelte, a hot module refresh can cause lockfile problems
// so we assign the ipfs node to globalThis to avoid lock file issues
if (!globalThis.ipfsNode) {
// no ipfs saved to globalThis, so load it up
const IPFSmodule = await import('../modules/ipfs-core/ipfs-core.js');
const IPFS = IPFSmodule.default;
ipfsNode = await IPFS.create();
globalThis.ipfsNode = ipfsNode;
} else {
ipfsNode = globalThis.ipfsNode;
}
});
```
- Run the app:
```
npm run dev
```
- Build the app:
Install the [adapater for static](https://github.com/sveltejs/kit/tree/master/packages/adapter-static) sites:
```
npm i -D @sveltejs/adapter-static@next
```
then add the adapter to your `svelte.config.js`:
```js
// svelte.config.js
import adapter from '@sveltejs/adapter-static';
export default {
kit: {
adapter: adapter()
}
};
```
and build
```
npm run build
```
and preview
```
npm run preview
```
open in localhost
## process.env.NODE_ENV in Svelte Dev
Note that in dev mode, sveltekit replaces `globalThis.process.env.NODE_ENV` with `globalThis."development"` thus screwing up the dev process. When we esbuild, to prevent sveltekit from doing this, we replace `globalThis.process.env.NODE_ENV` accordingly.
```cli
// package.json
"build:ipfs": "esbuild ... --define:globalThis.process.env.NODE_ENV='\"production\"' ... "
```
### DAG Building
The example usage is using ipfs.dag.put() with dag-pb to mimic what happens by default with ipfs.add()
### Thanks
Many credits go to Gozala's [https://github.com/Gozala/replicator](https://github.com/Gozala/replicator) for figuring much of this out.