import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Guides/Installation/Applications" />

# Installation: Applications

This guide applies to both client-side and server-side rendered React applications.

## Packages

Our packages are available in the [npm](https://www.npmjs.com/search?q=%40preply) registry under the `@preply` namespace.

```
yarn add @preply/ds-web-lib @preply/ds-web-root
```

- `@preply/ds-web-root` provides a single entry point to instantiate all the necessary resources in your application.
- `@preply/ds-web-lib` provides the collection of components documented for the web platform.

## Add the global styles

In the `index.html` file, as close as possible to the start of the `<head>` tag, add:

```html
<!-- Preply DS Global Style https://ds.preply.org/latest/?path=/story/guides-installation-applications--page -->
<link rel="preconnect" href="https://static.preply.com" />
<link rel="preload" href="https://static.preply.com/ds/global.css" as="style" />
<link
    rel="preload"
    href="https://static.preply.com/ds/fonts/en/PreplyInter.var.woff2"
    as="font"
    type="font/woff2"
    crossorigin
/>
<link rel="stylesheet" href="https://static.preply.com/ds/global.css" />
```

This CSS resource contains:

- `@font-face` declarations for loading `PreplyInter`. See [Guides / Assets / Fonts](/story/guides-assets-fonts--page)
- global `font-family` declarations

**Notes:**

- In the future, this global stylesheet will also contain generic reset rules.
- If your app is rendered server side with dynamic `<head>` content, follow the instructions in the [Installation: SSR](/story/guides-installation-ssr--page) guide instead.

## Add `RootProvider`

The `<RootProvider/>` wraps all the other providers and makes sure the CSS classes are added to your DOM. You will need to wrap your code with it.

The `target` prop determines where to inject the CSS classes and you can provide the DOM element `document.body` in order to have the CSS classes in scope for components rendered anywhere in the page, including _portals_ outside of `<div id="root">`.

```tsx
import { RootProvider } from '@preply/ds-web-root';

ReactDOM.render(
    <React.StrictMode>
        <RootProvider target={document.body} theme="tokyo-ui">
            <App />
        </RootProvider>
    </React.StrictMode>,
    document.getElementById('root'),
);
```

**Note:** If your app is rendered server side, continue with the instructions in the [Installation: SSR](/story/guides-installation-ssr--page) guide.
