Configure the Client

As mentioned earlier, the client component is built as a single-page React application using the Yarn package manager.

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

Let’s create a React app to obtain an initial project structure for the client component and include Cat.ly’s code from the repository downloaded earlier. We will discuss the client directory files in detail after you have created the React app.

Follow the steps described below:

1. Create a folder named client in the root directory of your project.

2. Before you create the React app, copy the client-package.json file from the repository you downloaded earlier (cat.ly-master/client) and paste it in this client folder (CATALYST_CLIENT_HOME).

3. To create the React app, navigate to the client folder (catly/client) in your terminal and execute the following command:

This will execute the create-react-app module and create the boilerplate code structure of the React app in the client folder.

Once the React app is created, you can find its initial project structure inside the app folder in the client directory.

Let’s now include Cat.ly’s code in the client directory. To make this easy, simply replace the default React files in your project directory with the Cat.ly’s files from the repository that you downloaded, as described in the next few points.

4. Copy the package.json and the hidden .gitignore files from the downloaded repository and use them to replace the package.json and .gitignore files in your project directory.

5. Copy the files in the public folder folder from the downloaded repository and use them to replace the files in the public folder of your project directory.

6. Copy the src folder from the downloaded repository and use them to replace the files in the src folder of your project directory.

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

Working of Functions and Client

Let’s 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.

Let’s now compile the React app.