providers/.docs/content/2.essentials/0.usage-on-x.md

68 lines
2.2 KiB
Markdown

# How to use on X
The library can run in many environments, so it can be tricky to figure out how to set it up.
Here is a checklist. For more specific environments, keep reading below:
- When requests are very restricted (like browser client-side). Configure a proxied fetcher.
- When your requests come from the same device on which it will be streamed (not compatible with proxied fetcher). Set `consistentIpForRequests: true`.
- To set a target. Consult [Targets](./1.targets.md).
To make use of the examples below, check out the following pages:
- [Quick start](../1.get-started/1.quick-start.md)
- [Using streams](../2.essentials/4.using-streams.md)
## NodeJs server
```ts
import { makeProviders, makeStandardFetcher, targets } from '@movie-web/providers';
const providers = makeProviders({
fetcher: makeStandardFetcher(fetch),
target: chooseYourself, // check out https://movie-web.github.io/providers/essentials/targets
})
```
## Browser client-side
Using the provider package client-side requires a hosted version of simple-proxy.
Read more [about proxy fetchers](./2.fetchers.md#using-fetchers-on-the-browser).
```ts
import { makeProviders, makeStandardFetcher, targets } from '@movie-web/providers';
const proxyUrl = "https://your.proxy.workers.dev/";
const providers = makeProviders({
fetcher: makeStandardFetcher(fetch),
proxiedFetcher: makeSimpleProxyFetcher(proxyUrl, fetch),
target: target.BROWSER,
})
```
## React native
To use the library in a react native app, you would also need a couple of polyfills to polyfill crypto and base64.
1. First install the polyfills:
```bash
npm install @react-native-anywhere/polyfill-base64 react-native-quick-crypto
```
2. Add the polyfills to your app:
```ts
// Import in your entry file
import '@react-native-anywhere/polyfill-base64';
```
And follow the [react-native-quick-crypto documentation](https://github.com/margelo/react-native-quick-crypto) to set up the crypto polyfill.
3. Then you can use the library like this:
```ts
import { makeProviders, makeStandardFetcher, targets } from '@movie-web/providers';
const providers = makeProviders({
fetcher: makeStandardFetcher(fetch),
target: target.NATIVE,
consistentIpForRequests: true,
})
```