Configure the Advanced I/O Function

Let’s begin by configuring the function component.

Advanced I/O functions in Catalyst are used to handle native HTTP requests and responses, and to build routing mechanisms. The function here contains the API that will shorten the URL that the user provides, and handles the routing in the application.

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

react_app_github_directory

The function is named catly. This directory contains the main files of the function in a folder named server.

Let’s discuss the function component in detail.

Note: Please go through the code in the files provided while you read the points below.
  • The urlshorten.js in /server/router performs the major routing and shortening operations. There are two npm packages that are included in this file to perform the required tasks:

    • valid-url: The valid URL module is used to check the validity of the original URL entered by the user. If the URL is found to be invalid, it will not be shortened.
    • shortid: The shortid module is used to generate a short browser-friendly unique ID for the original URL entered by the user.

    There are three routes defined in this file for the client component to pursue:

    • /item/all: To fetch all data from the Data Store.
    • /:code: To redirect to the original URL for a particular shortened URL
    • /item: To insert the original URL and generate its short ID We access the cache when we use /:code and /item to retrieve data, for faster processing. However, a new URL entered by the user is persisted to the Data Store first.
  • The helper.js file in /server/utils defines the procedures to access the Data Store and the cache, to fetch data from them or to persist data in them. It executes ZCQL queries to fetch data from the table in the Data Store.

  • The constants.js file in /server/utils is used to store the constant values used by the other files, such as the ID of the cache segment and the name of the table that stores the original URLs and their short IDs. It also defines the error page to load when the URL is found to be invalid from the client directory.

  • The index.js is the main file of the server which defines the request and response parameters, and imports the Node.js express framework and the npm body-parser middleware.

  • The handler.js in the function’s root is the entry point file for the function and it references the server folder here.

  • Besides these files, the functions directory contains package.json and package-lock.json in the server folder. The catalyst-config.json file in the function’s root contains the configuration of the function. You can learn more about these files from the Project Directory Structure help page.

To duplicate the final functions directory of the Cat.ly application, follow the steps below:

  1. Copy the functions folder in cat.ly-master/ from the repository. Paste the folder in the root of the project directory (CATALYST_PROJECT_HOME) that you initialized for the Catly project.

Your project directory should now contain the following structure: react_app_local_directory

  1. The repository you downloaded does not contain the node modules required for the application. Therefore, you must install NPM in the server directory.

Navigate to functions/catly/server from your CLI and execute the following command in the server directory:

copy
$
npm install

This will install the node modules required for the application in the server directory and update the dependency files.

  1. Now, open the package.json file using any IDE and replace the value of author (which is emma@zylker.com) with your email address. react_app_json
Note: This is an optional step, as the author information will not affect the execution of the Cat.ly application.
  1. Open constants.js and replace the value of short_url_segment with the Segment ID of the cache segment you created in the Catly project. react_app_short_url_segment_json

You can find the Segment ID of your cache segment from the Segments page by navigating to Cache under Develop in your Catalyst console. react_app_view_all_cache

This is essential, since the original URL and the short ID received from the Cat.ly application must get stored in, or be fetched from, a valid cache segment.

The functions directory is now properly configured.

Last Updated 2023-12-15 18:54:08 +0530 +0530