---
title: "Configure the client"
url: https://docs.catalyst.zoho.com/en/tutorials/catly/nodejs/configure-client/
description: "Create a URL shortener service, Cat.ly, as a single-page React application built using Catalyst's React plugin and various Catalyst components."
last_updated: 2026-08-17T12:16:04Z
service: All Services
type: tutorial
related_links:
  - name: "Client"
    url: /en/cli/v1/project-directory-structure/client-directory
---

# Configure the Client

We have created a React app named **"app"** using the Catalyst React plugin already. Now we will add the required code for the app from the downloaded repository. 

The GitHub repository that you downloaded contains the following client directory structure:

![client-dir](https://catalyst-docs-development.zohostratus.in/images/tutorials/react/client-dir.webp)

Let us now include Cat.ly's code in the client directory. To make this easy, simply replace the **"app"** directory in your project directory with the Cat.ly's files from the downloaded repository.

Ensure you confirm that the following files and directories are duplicated:

1. The `package.json` file.
2. The hidden `.gitignore` file.
3. The `public` folder.
4. The `src` folder

Your project directory should now contain all the client files in the same structure as the downloaded repository.

> **Note**: Please go through the code in the files provided while you read the points below.

Let us now look at the files in the client directory in detail.

* The root directory of the client contains a [`client-package.json`](https://docs.catalyst.zoho.com/en/cli/v1/project-directory-structure/client-directory) file which is a configuration file defining the name, version, and default homepage of the client component.

* The `app` folder contains two subfolders as per the default project structure of a React app.

    - The `public` folder is generally used to hold files that can be openly accessed by browsers through public URLs, such as icon files of the web app or `index.html`.
    - The `src` folder contains the application's source files that will be included in the `build` folder when we compile the React app.

The `app` folder also contains the [`package.json`](https://docs.npmjs.com/files/package.json) dependency file, a [`.gitignore`](https://git-scm.com/docs/gitignore) file, and a [`yarn.lock`](https://legacy.yarnpkg.com/en/docs/yarn-lock/) file.

- The `public` folder includes:

    - `index.html`: The default entry point of Cat.ly
    - `manifest.json`: Contains information about the web application including the `start_url` which is set to ".". This enables every shortened version of the URL the user enters to originate from the base URL [*Catalyst_web_app_URL/app/*](https://docs.catalyst.zoho.com/en/cloud-scale/help/web-client-hosting/key-concepts/#default-web-application-url) when the app is hosted. We will discuss this in the final step of the tutorial.
    - `error.html`: The page that Cat.ly redirects the user to, if they enter an invalid URL to shorten.

- The `src` folder contains: 

    - The JavaScript and CSS files for the client component. The `App.js` facilitates the behavior of the front end of the application. It handles the change and shrink events, and posts and obtains data using the three routes defined earlier. The other files are involved in rendering the DOM and defining the appearance of the web page.

    - `input`: This sub-folder contains the code to handle the input from the user. The `Header.js` enables increasing the URL count by one every time a new URL is shortened and displayed in the web page. The `InputForm.js` handles the input text bar and the submit button. The `List.js` enables the URLs that were shortened to be displayed as a list.

    - `utils`: This sub-folder contains `constants.js` to store the constant values of the three routes used by `App.js`.

Please follow the below steps to complete the function configuration process : 

The repository you downloaded does not contain the React plugin dependency required for the application. Therefore, you must install the plugin in the app folder.

Navigate to `/app` from your CLI and execute the following command:

```sh
npm install zcatalyst-cli-plugin-react
```

This will install the Catalyst React plugin required for the application and update the dependency files.
 
Let us now compile and test the React app.