Building a React App in Catalyst

Create a URL shortener service, Cat.ly, as a single-page React application using various Catalyst components and automate its building process using Catalyst scripts

Configure the Client

We have created a React app "app" using the Catalyst React plugin zcatalyst-cli-plugin-react.

Now we will begin duplicating the Project directory to match the Client directory from the downloaded repository.

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

react_app_github_directory

The initialization of the Client as a React application has already been completed. The directory structure of the "app" is as follows:

react_app_catly_directory

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.

Note: You can ignore the travis.yml and the license files from the repository you downloaded. The travis.yml file is a configuration file of Travis CI that is used while implementing the CI/CD setup in Cat.ly, and it contains the contain build and test specifications.

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 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, and a .gitignore 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 on the webpage. 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 us now compile and test the React app.

PreviousNext
Configure the Advanced I/O FunctionTest the Application