Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Example open-source apps and cjs note #149

Merged
merged 2 commits into from
Aug 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions docs/react_native_tutorials/react_native_1_setup_identifiers.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,12 @@ Some libraries that we will be depending on make use of the node `crypto` packag
browsers. These are not yet available to react-native/expo environments out of the box, so there is a bit of ceremony to
bundle everything properly.

Also, the metro bundler that react-native uses doesn't yet support the `cjs` file extension (
see [facebook/metro#535](https://github.com/facebook/metro/issues/535)) which is used by some libraries in the stack, so
Also, the metro bundler that react-native uses doesn't support the `cjs` file extension until v0.72.0 (see [facebook/metro#535](https://github.com/facebook/metro/issues/535)) which is used by some libraries in the stack, so
we have to configure these too.

#### `cjs` extension
> ℹ️ **Note:** In case you run into issues check out the [Troubleshooting](../troubleshooting.md) page for some options and example open-source React Native apps using Veramo.

#### Support for ESM-only modules

Create `metro.config.js` file and make sure it looks like this:

Expand All @@ -66,9 +67,11 @@ const { getDefaultConfig } = require('expo/metro-config')

const config = getDefaultConfig(__dirname);

config.resolver.sourceExts.push('cjs');
config.resolver.unstable_enablePackageExports = true;

// For React Native below v0.72.0 you need to also add:
config.resolver.sourceExts.push('cjs');

module.exports = config;
```

Expand Down Expand Up @@ -259,7 +262,7 @@ export const agent = createAgent<IDIDManager & IKeyManager & IDataStore & IDataS
})
```

### What we have so far.
### What we have so far

Let's take a moment to understand what's going on here.
We created an `agent` object using the `createAgent` method and an array of `plugins`.
Expand Down Expand Up @@ -427,7 +430,7 @@ In this guide we:
- used that agent to create some DIDs and show them in a basic UI.

These `did:peer` identifiers we created
are [Decentralized Identifiers(DIDs)](https://www.w3.org/TR/did-core/#a-simple-example) that use the `peer` DID method.
are [Decentralized Identifiers(DIDs)](https://www.w3.org/TR/did-core/#a-simple-example) that use the `peer` DID method.
You can read more about how this works by going through
the [`did:peer` spec](https://identity.foundation/peer-did-method-spec/).

Expand Down
13 changes: 11 additions & 2 deletions docs/troubleshooting.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,17 +46,18 @@ dependencies:
```

Different package managers use different configurations for such overrides:

* [npm overrides](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#overrides)
* [yarn v2+ resolutions](https://yarnpkg.com/configuration/manifest#resolutions)
* [yarn v1 resolutions](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/)
* [pnpm resolutions](https://pnpm.io/package_json#resolutions)

See [this issue for more details](https://github.com/decentralized-identity/veramo/issues/1407)

### Expo apps
### React Native / Expo apps

If your project is a react-native app, then you will also benefit from replacing `isomorphic-webcrypto` with the [fork
made by Sphereon](https://github.com/Sphereon-Opensource/isomorphic-webcrypto):
maintained by Sphereon](https://github.com/Sphereon-Opensource/isomorphic-webcrypto):

```json5
// filename: package.json
Expand All @@ -67,3 +68,11 @@ made by Sphereon](https://github.com/Sphereon-Opensource/isomorphic-webcrypto):
}
}
```

#### Example React Native open-source production apps using Veramo

Checkout the following projects to see how they have successfully configured their production-level React Native apps using Veramo:

* [Sphereon mobile wallet](https://github.com/Sphereon-Opensource/mobile-wallet)
* [Tonomy ID](https://github.com/Tonomy-Foundation/Tonomy-ID)
mirceanis marked this conversation as resolved.
Show resolved Hide resolved