README.md

• Running the example app
  • Setup script
  • Manual setup
• Available Commands

This project was bootstrapped with Create React App.

You can find the most recent version of the guide here.

This is an example app for the discovery-react-components library to demonstrate the various components available for consumption

Running the example app

The example app is a catalogue of the core components provided by this library. With little effort, you can see the functionality of each component using your real data. You can also modify the example code to see how you can customize Discovery Components to fit your needs.

Setup script

The runExampleApp.sh script provides prompts to help configure and run the example application. The script iterates through the following steps:

1. Verify all prerequisite programs are installed
2. Prompt you for necessary credential information
3. Configure the example application server
4. Build the React components
5. Ask you if you'd like to start the example application

Run the following command from the project root directory

./runExampleApp.sh

If you choose not to start the example application, all previous configuration steps will be left intact so the application can be run at another time by running

yarn workspace discovery-search-app run start

Manual setup

1. Install Yarn, as it is required to build the components locally.

2. Clone the repository

   git clone [email protected]:watson-developer-cloud/discovery-components.git
   

   or

   git clone https://github.com/watson-developer-cloud/discovery-components.git
   

3. Navigate into the project and install component dependencies

   cd discovery-components && yarn
   

4. Create an environment file

   Copy the examples/discovery-search-app/.env file to examples/discovery-search-app/.env.local file, and populate the following values from your Discovery project:

   REACT_APP_PROJECT_ID={REPLACE_ME}
   

   1. REACT_APP_PROJECT_ID is a guid contained in the URL (ex: 97ba736d-6563-4270-a489-c19d682b6369)
      • CP4D sample URL: https://zen-25-cpd-zen-25.apps.my-cluster-name.com/discovery/wd/projects/{REACT_APP_PROJECT_ID}/workspace)
      • Cloud sample URL: https://us-south.discovery.cloud.ibm.com/v2/instances/123/projects/{REACT_APP_PROJECT_ID}/workspace)
   

   Windows Only

   On Windows, the default SASS_PATH environment variable must be updated. Append the following to the .env.local file:

   SASS_PATH="./node_modules;./src"
   

5. After retrieving your credentials, either create a examples/discovery-search-app/ibm-credentials.env file or populate your environment with the following values:

   • CP4D:

     DISCOVERY_AUTH_TYPE=cp4d
     DISCOVERY_AUTH_URL={REPLACE_ME}
     DISCOVERY_AUTH_DISABLE_SSL=true
     DISCOVERY_URL={REPLACE_ME}
     DISCOVERY_USERNAME={REPLACE_ME}
     DISCOVERY_PASSWORD={REPLACE_ME}
     DISCOVERY_DISABLE_SSL=true
     

     where:
     • DISCOVERY_AUTH_URL is the URL to your base CP4D installation (ex. https://zen-25-cpd-zen-25.apps.my-cluster-name.com) plus the path /icp4d-api (ex. https://zen-25-cpd-zen-25.apps.my-cluster-name.com/icp4d-api)
     • DISCOVERY_URL is the API URL to your Discovery installation (ex. https://zen-25-cpd-zen-25.apps.my-cluster-name.com/discovery/wd/instances/1578610482214/api)
     • DISCOVERY_USERNAME the username used to login to DISCOVERY_AUTH_URL
     • DISCOVERY_PASSWORD the password used to login to DISCOVERY_AUTH_URL
   • Cloud:

     DISCOVERY_AUTH_TYPE=iam
     DISCOVERY_URL={REPLACE_ME}
     DISCOVERY_APIKEY={REPLACE_ME}
     

     where:
     • DISCOVERY_URL is the API URL to your Discovery instance (ex. https://api.us-south.discovery.cloud.ibm.com/instances/2386cfd4-a584-41d0-868d-671d8be819bc)
     • DISCOVERY_APIKEY the api key associated with DISCOVERY_URL
   

6. Build the React components:

   yarn workspace @ibm-watson/discovery-react-components run build
   

7. Start the example server:

   yarn workspace discovery-search-app run server
   

8. In a separate terminal window, start the example app:

   yarn workspace discovery-search-app run start
   

9. Go to localhost:3000 in your browser. If everything is working, you should see something like this:

   

For more information on how each component can be customized and configured, check out our hosted storybook.

Available Commands

The following commands can be run from the Example app directory (examples/discovery-search-app)

Command	Description
yarn start	runs the client and runs the express server without configuring first
yarn start:client	runs the client at http://localhost:3000/
yarn build	creates a production build of the example project
yarn cypress	opens the cypress application for feature testing
yarn lint	runs eslint on src and cypress
yarn server	configures and runs an express server
yarn server:setup	configures express server only
yarn server:run	runs an express server without configuring first
yarn test:e2e	starts the server and runs cypress headless