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:

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.

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

• The root directory of the client contains a client-package.json 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 dependency file, a .gitignore file, and a 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/ 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:

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.