Walkthrough: Setting up the React project

This walkthrough is the part one of the Developing the UI walkthrough series.

You will learn how to:

Install JS SDK and UI Components for React.
Retrieve credentials.
Authenticate with credentials.

Install JS SDK and UI Components for React

Developers can install Sitecore Discover JS SDK and UI Components packages into their projects. In your React code, import classes, functions, and objects from these packages, just as you would from other JS packages.

To install the latest JS SDK and UI Components for React:

To add Discover JS SDK for React to your project, run the following in your project:
RequestResponse
```
npm install --save @sitecore-discover/react
```
To add Discover UI Components for React to your project, run the following in your project:
RequestResponse
```
npm install --save @sitecore-discover/ui
```

In the Root component of your React project, import the WidgetsProvider component as shown in the following:

RequestResponse

import { WidgetsProvider } from "@sitecore-discover/react";

const Root = () => {
    return (
        <WidgetsProvider>
        </WidgetsProvider>
)};

Retrieve Discover credentials

It is crucial that your application authenticates with Discover before making any requests.

To retrieve your Discover credentials:

Log in to the CEC with your personal credentials.
On the menu bar, click Developer Resources.
From the API Keys pane on the right, copy the key for data requests.

Authenticate with credentials

You can send authentication credentials in or before the first request. After successfully authenticating, the JS SDK takes care of using authentication information in future requests.

We recommend you include the credentials in the Root or App component of your React application.

To authenticate when your subdomain is set up:

In the Root component of your React project, add the WidgetsProvider component with the correct credentials for authentication, as shown in the following code block.

RequestResponse

import { WidgetsProvider } from "@sitecore-discover/react";

const Root = () => {
    return (
        <WidgetsProvider
                env='<environment>'
                customerKey='<customer key>'
                apiDomain='<api domain>'
                useToken=false
            >
            <MyApp />
        </WidgetsProvider>
)};

Note

Credentials depend on how your domain is set up with Sitecore. For instructions on authenticating when your subdomain is not set up with Discover, refer to Authenticate without domain set up.

Do you have some feedback for us?

If you have suggestions for improving this article,