# NodeJS


--------------------------------------------------------------------------------
title: "Introduction"
description: "Create a URL shortener service, Cat.ly, as a single-page React application built using Catalyst&#39;s React plugin and various Catalyst components."
last_updated: "2026-03-18T07:41:08.673Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/catly/nodejs/introduction/"
service: "All Services"
related:
- Project Directory Structure (/en/cli/v1/project-directory-structure/introduction/)
- Node.js SDK (/en/sdk/nodejs/v2/overview/)
-  Catalyst React Plugin (/en/cli/v1/initialize-resources/initialize-client/#react-applications)

--------------------------------------------------------------------------------


# Catly

### Introduction

In this tutorial, we will build a simple URL shortener application which will allow you to instantly trim lengthy URLs into easily shareable ones. We will build this application as a single page React application using {{%link href=&#34;/en/cli/v1/initialize-resources/initialize-client/#react-applications&#34;%}}Catalyst&#39;s React plugin{{%/link%}} and by leveraging a few other Catalyst services. 

The final look of the client application will resemble this screen:


You can access a working application and test its functioning here: {{%link href=&#34;https://catlynodejs-860829830.development.catalystserverless.com/app/index.html&#34;%}}Try the App!{{%/link%}}

We will name this application **Cat.ly**, and it will be built using the following Catalyst components:

1. {{%link href=&#34;/en/serverless/getting-started/introduction/&#34; %}}**Catalyst Serverless**{{%/link%}}:
    - **{{%link href=&#34;/en/serverless/help/functions/introduction/&#34;%}}Functions{{%/link%}}** : A **Node.js** function (of the type {{%link href=&#34;/en/serverless/help/functions/advanced-io/&#34;%}}Advanced I/O{{%/link%}}) will contain the logic to shorten the given URL. 

2. {{%link href=&#34;/en/cloud-scale/getting-started/introduction/&#34; %}}**Catalyst Cloud Scale**{{%/link%}}:
    - **{{%link href=&#34;/en/cloud-scale/help/data-store/introduction/&#34;%}}Data Store{{%/link%}}** : Used to store the original URLs and their shortened versions. 
    - **{{%link href=&#34;/en/cloud-scale/help/zcql/introduction/&#34;%}}ZCQL{{%/link%}}** : Retrieves original URLs from the Data Store through queries when their shortened versions are accessed. 
    - **{{%link href=&#34;/en/cloud-scale/help/cache/introduction/&#34;%}}Cache{{%/link%}}** : Stores the frequently accessed URLs along with their shortened versions to enable faster retrieval and rendering.
    - **{{%link href=&#34;/en/cloud-scale/help/web-client-hosting/introduction/&#34;%}}Web Client Hosting{{%/link%}}** : Hosts the front end of the application. The client will be built in the React framework using Catalyst&#39;s React plugin ({{%badge%}}zcatalyst-cli-plugin-react{{%/badge%}}). This plugin contains certain node modules and library files that handle several operations involved in the development and testing of the React app internally. This allows for a faster and efficient application building process.

We have provided the source code of the application in {{%link href=&#34;https://github.com/catalystbyzoho/tutorial-cat.ly-node&#34;%}}this GitHub repository{{%/link%}}.

You can download the code from this repository to your local system. We will be providing step by step instructions to work on the code in the repository&#39;s files and build the final deployable application in the next sections.

The final Cat.ly application will contain the following {{%link href=&#34;/en/cli/v1/project-directory-structure/introduction&#34;%}}directory structure{{%/link%}}:


Before we dive deep into the code, we will first look into the overall architecture of the application and the usage of each of the Catalyst components. 

### Application Architecture

The Cat.ly application&#39;s architecture can be described as follows:


1. A user enters a URL to be shortened in a text box in the application&#39;s client.
2. The Advanced I/O function checks if the entered URL is valid. If the URL is valid, a short ID, which is the ID part of the shortened version of the URL, is generated.
3. The original URL and the short ID of the URL are saved in a Catalyst Cloud Scale Cache segment for easier access. They are also saved on a table in the Catalyst Cloud Scale Data Store.
4. The original URL and its shortened version are displayed in the client application. A count variable is incremented to display the number of URLs shortened using the application.
5. When the user clicks on the shortened URL from the client, a ZCQL query is executed to fetch its original URL from the cache segment. If the cache item has expired, the data is fetched from the table in the Data Store instead and re-persisted to the cache. The cache item is overwritten every time the URL is accessed, and its expiry is updated each time.
6. A redirect signal is fired to the browser to open the original URL in a new tab.


--------------------------------------------------------------------------------
title: "Prerequisites"
description: "Create a URL shortener service, Cat.ly, as a single-page React application built using Catalyst&#39;s React plugin and various Catalyst components."
last_updated: "2026-03-18T07:41:08.674Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/catly/nodejs/prerequisites/"
service: "All Services"
related:
- CLI Command Reference (/en/cli/v1/cli-command-reference/)

--------------------------------------------------------------------------------


# Prerequisites

Before you begin building the application, you must have the following prerequisites installed on your system:

{{%list class=&#34;bold&#34;%}}1. **Catalyst CLI**
\
\
Catalyst CLI contains a host of tools that enable you to initialize, develop, test, and deploy the components of your application from your local machine. We will be working with Catalyst CLI in this tutorial.
\
\
You must perform the following actions:

   1.  **Install Catalyst CLI:** Catalyst CLI is installed through NPM. You must therefore have NPM and Node.js installed on your system before you install the CLI. Refer to the {{%link href=&#34;/en/getting-started/installing-catalyst-cli/&#34; %}}**Install Catalyst CLI help page**{{%/link%}} for details on the pre-requisites and the steps to install it.

   2. **Log in to Catalyst CLI:** After you install Catalyst CLI, you must authenticate the CLI with your Catalyst account before using it. Refer to the {{%link href=&#34;/en/cli/v1/login/login-from-cli/&#34; %}}**CLI Login help page**{{%/link%}} for the steps to login from Catalyst CLI and the various options available for it.
 &lt;br&gt;
 &lt;br&gt;
{{%/list%}}

{{%list class=&#34;bold&#34;%}}2. **Any IDE tool for Node.js function and client code development**
\
\
You can use any IDE to work with the Advanced I/O function and the client code. Some popular choices include Visual Studio Code, IntelliJ IDEA, Eclipse, and Sublime Text. Download and install an IDE of your choice on your system.{{%/list%}}

{{%info image=&#34;/images/tutorials/todo-list/vscode.png&#34;%}}If you are a Visual Studio Code IDE user, you can install the {{%bold%}}Catalyst Tools{{%/bold%}} extension, and use your IDE itself in place of the CLI. You can find more details about the Catalyst VS Code extension from this {{%link href=&#34;/en/catalyst-extensions/vs-code-extension/introduction/&#34; %}}help section{{%/link%}}.{{%/info%}}

--------------------------------------------------------------------------------
title: "Create a project"
description: "Create a URL shortener service, Cat.ly, as a single-page React application built using Catalyst&#39;s React plugin and various Catalyst components."
last_updated: "2026-03-18T07:41:08.674Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/catly/nodejs/create-project/"
service: "All Services"
related:
- Project Directory (/en/cli/v1/project-directory-structure/introduction)
- Set up Catalyst Projects (/en/getting-started/catalyst-projects)

--------------------------------------------------------------------------------


# Create a Project

Let&#39;s {{%link href=&#34;/en/getting-started/catalyst-projects&#34;%}}create a Catalyst Project{{%/link%}} from the Catalyst console.

1. Log in to the {{%link href=&#34;https://console.catalyst.zoho.com/baas/index&#34;%}}Catalyst Console{{%/link%}} and click **Create a new Project**.


2. Enter the project&#39;s name as &#34;**Catly**&#34; in the pop-up window and click Create.


Your project will be created and opened automatically. 


--------------------------------------------------------------------------------
title: "Create a table"
description: "Create a URL shortener service, Cat.ly, as a single-page React application built using Catalyst&#39;s React plugin and various Catalyst components."
last_updated: "2026-03-18T07:41:08.674Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/catly/nodejs/create-table/"
service: "All Services"
related:
- Data Store (/en/cloud-scale/help/data-store/introduction)

--------------------------------------------------------------------------------


# Create a Table in the Data Store

We will create a table in the Catly project’s Data Store to hold the original URLs submitted by users, along with the corresponding short IDs generated by the application. This table is queried only when the required data isn’t found in the cache.

To create a table, please make sure to follow the below steps:

1. Navigate to the **Catalyst Cloud Scale** service and click **Start Exploring**. 
 &lt;br /&gt;

2. Select **Data Store** component under **Storage** and click **Create a new Table**. 
 &lt;br /&gt;

3. Enter the table&#39;s name as &#34;**UrlShorten**&#34; and click **Create**.
 &lt;br /&gt;

{{%note%}} {{%bold class=&#34;bold-primary&#34;%}}Note{{%/bold%}}: Ensure that you enter the name exactly as instructed, because the application&#39;s code that you will download from the GitHub repository contains the same name.{{%/note%}}

The table is now created as shown in the screenshot below.


### Create Columns for the Table

Let&#39;s now create two columns in the table for the original URL and its short ID.

{{%note%}}{{%bold class=&#34;bold-primary&#34;%}}Note{{%/bold%}}: Ensure that you enter the name exactly as instructed.{{%/note%}}

1. Click **New Column** in the {{%italics%}}Schema View{{%/italics%}} section for the table.
 &lt;br /&gt;

2. Enter the column&#39;s name as &#34;**originalUrl**&#34;. Select the data type as **Var Char** and enter the max length as &#34;100&#34;. Enable the {{%italics%}}Is Unique{{%/italics%}} and {{%italics%}}Is Mandatory{{%/italics%}} toggle switches and click **Create**.
 &lt;br /&gt;

You can learn about the various data types supported by Catalyst and the other properties of a column from the {{%link href=&#34;/en/cloud-scale/help/data-store/introduction&#34;%}}Data Store help page{{%/link%}}.

Similarly, create the second column named **&#34;urlCode&#34;**. Select the data type as **Var Char** and enter the max length as **&#34;100&#34;**. Enable the **Is Unique** and **Is Mandatory** toggle switches.

Both the columns will be displayed in the **Schema View** section as shown in the screenshot below.


The data is automatically populated in this table each time the user shortens a URL. You can view the records from the **Data View** section after you shorten a URL.

--------------------------------------------------------------------------------
title: "Create a Cache segment"
description: "Create a URL shortener service, Cat.ly, as a single-page React application built using Catalyst&#39;s React plugin and various Catalyst components."
last_updated: "2026-03-18T07:41:08.684Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/catly/nodejs/create-cache/"
service: "All Services"
related:
- Cache (/en/cloud-scale/help/cache/introduction)

--------------------------------------------------------------------------------


# Create a Cache Segment

Let&#39;s now create a {{%link href=&#34;/en/cloud-scale/help/cache/introduction&#34;%}}cache segment{{%/link%}} in the **Catly** project. The cache segment is used to store the original URL and its short ID for easier access.

To create a cache segment, please follow the below-listed steps:

1. Navigate to the **Cache** component under **Storage** and click **Create Segment** in the **Segments** page.
 &lt;br /&gt;

2. Enter the Segment Name as &#34;**shortUrl**&#34; in the pop-up window and click **Create**
 &lt;br /&gt;

{{%note%}} {{%bold class=&#34;bold-primary&#34;%}}Note{{%/bold%}}: Ensure that you enter the name exactly as instructed, because the application&#39;s code that you will download from the GitHub repository contains the same name.{{%/note%}}

The segment is created and listed in the **Segments** page.


When a URL is shortened by the user, the original URL and its short ID are automatically populated as a cache item in the form of a key-value pair. The short ID is the key, and the value contains a string of details like the original URL, short ID, and the table details.

You can learn more about cache segments from {{%link href=&#34;/en/cloud-scale/help/cache/key-concepts/&#34;%}}this help page{{%/link%}}.


--------------------------------------------------------------------------------
title: "Initialize the project"
description: "Create a URL shortener service, Cat.ly, as a single-page React application built using Catalyst&#39;s React plugin and various Catalyst components."
last_updated: "2026-03-18T07:41:08.684Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/catly/nodejs/initialize-project/"
service: "All Services"
related:
- Initialize Resources (/en/cli/v1/initialize-resources/introduction/)
- Project Directory Structure (/en/cli/v1/project-directory-structure/introduction/)

--------------------------------------------------------------------------------


# Initialize the Project from the CLI

You can now begin working on your Catalyst project from the CLI. The first step is to initialize the project in an empty directory. This will be the home directory of your project and all of the project files will be saved in it.

You can learn more about the project directory structure from {{%link href=&#34;/en/cli/v1/project-directory-structure/introduction&#34;%}}this help page{{%/link%}}. You can learn about initializing a project in detail from the {{%link href=&#34;/en/cli/v1/initialize-resources/introduction&#34;%}}CLI help documentation{{%/link%}}.

In this tutorial we will initialize the project followed by the function and client components:

1. Create a folder for the project on your local machine and navigate to it from the terminal. Initialize a project by executing the following command from that directory:

{{%cli%}}catalyst init{{%/cli%}}

2. The CLI will now ask you to select the organization in which your Catalyst project that we created earlier in the console resides. Select the organization and press **Enter**. 
 &lt;br/&gt;

3. Select the project in the organization from the list and press **Enter**.
&lt;br/&gt;

4. Select **Functions** and **Client** using the space bar. Press **Enter** to initialize the components. 
&lt;br/&gt;

5. The CLI will first initiate the function setup. Select AdvancedIO as the function type.
&lt;br/&gt;

6. Select the latest runtime of **Node.js** as the function stack.
&lt;br/&gt;

7. Enter **&#34;catly&#34;** as the package name, **&#34;index.js&#34;** as the entry point, and your email address as the author and press **Enter**. You can alternatively press Enter without entering inputs to fill in the default values. The CLI will prompt the initialization of the Node dependencies. Press **Y** to confirm the installation, and press **Enter** to confirm your choice. The Node modules will be installed.
&lt;br/&gt;

8. The CLI will now initialize the client set up. Choose **&#34;React web app&#34;**, which will initialize the client as a React application using the Catalyst React plugin ({{%badge%}}zcatalyst-cli-plugin-react{{%/badge%}}).  
&lt;br/&gt;

9. Choose **&#34;TypeScript&#34;** as they type of React application. 
&lt;br/&gt;

10. Provide the name of your React application as **&#34;app&#34;** and press **Enter**. 
The project initialization along with the function and client components is now complete and a {{%link href=&#34;/en/cli/v1/project-directory-structure/catalyst-json&#34;%}}{{%badge%}}catalyst.json{{%/badge%}}{{%/link%}} file and a {{%badge%}}.catalystrc{{%/badge%}} hidden file containing your project details will be created in your project directory. 
&lt;br/&gt;


--------------------------------------------------------------------------------
title: "Configure the Advanced I/O function"
description: "Create a URL shortener service, Cat.ly, as a single-page React application built using Catalyst&#39;s React plugin and various Catalyst components."
last_updated: "2026-03-18T07:41:08.684Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/catly/nodejs/configure-advancedio/"
service: "All Services"
related:
- Advanced I/O Functions (/en/serverless/help/functions/advanced-io/)
- Functions Directory Structure (/en/cli/v1/project-directory-structure/functions-directory)

--------------------------------------------------------------------------------


# Configure the Advanced I/O Function

The Advanced I/O function contains the logic that will shorten the URL that the user provides and handles the routing in the application. You can learn more about this function type from {{%link href=&#34;/en/serverless/help/functions/advanced-io&#34;%}}this help page{{%/link%}}. 

We have already provided the entire code of this application hosted in our GitHub repository in the Introduction section of the tutorial. In case you have missed it, you can now download the code from {{%link href=&#34;https://github.com/catalystbyzoho/tutorial-cat.ly-node&#34;%}}this link{{%/link%}}. 

We will be adding files from this downloaded repository to our project directory. 

Let us first discuss the function component in detail. 

{{%note%}}{{%bold class=&#34;bold-primary&#34;%}}Note{{%/bold%}}: Please go through the code in the files provided while you read the points below.{{%/note%}}

* The {{%badge%}}urlshorten.js{{%/badge%}} in {{%badge%}}/catly/routers{{%/badge%}} performs the major routing and shortening operations.
  There are two npm packages that are included in this file to perform the required tasks:
     - {{%badge%}}**valid-url**{{%/badge%}}: {{%link href=&#34;https://www.npmjs.com/package/valid-url&#34;%}}The valid URL module{{%/link%}} 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.
     - {{%badge%}}**shortid**{{%/badge%}}: {{%link href=&#34;https://www.npmjs.com/package/shortid&#34;%}}The shortid module{{%/link%}} 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:
     - {{%badge%}}**/item/all**{{%/badge%}}: To fetch all data from the Data Store.
     - {{%badge%}}**/:code**{{%/badge%}}: To redirect to the original URL for a particular shortened URL
     - {{%badge%}}**/item**{{%/badge%}}: To insert the original URL and generate its short ID
  We access the cache when we use {{%badge%}}**/:code**{{%/badge%}} and {{%badge%}}**/item**{{%/badge%}} to retrieve data, for faster processing. However, a new URL entered by the user is persisted to the Data Store first.

* The {{%badge%}}helper.js{{%/badge%}} file in {{%badge%}}/catly/utils{{%/badge%}} defines the procedures to access the Data Store and the cache, to fetch data from them or to persist data in them. It executes {{%link href=&#34;/en/cloud-scale/help/zcql/introduction&#34;%}}ZCQL queries{{%/link%}} to fetch data from the table in the Data Store.

* The {{%badge%}}constants.js{{%/badge%}} file in {{%badge%}}/catly/utils{{%/badge%}} 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 {{%badge%}}index.js{{%/badge%}} is the main file of the server which defines the request and response parameters, and imports the {{%link href=&#34;https://expressjs.com/&#34;%}}Node.js express framework{{%/link%}} and the {{%link href=&#34;https://www.npmjs.com/package/body-parser&#34;%}}npm body-parser middleware{{%/link%}}.

* Besides these files, the functions directory contains {{%link href=&#34;https://docs.npmjs.com/files/package.json&#34;%}}{{%badge%}}package.json{{%/badge%}}{{%/link%}} and {{%link href=&#34;https://docs.npmjs.com/configuring-npm/package-lock-json.html&#34;%}}{{%badge%}}package-lock.json{{%/badge%}}{{%/link%}} in the {{%badge%}}catly{{%/badge%}} folder. The {{%badge%}}catalyst-config.json{{%/badge%}} file in the function&#39;s root contains the configuration of the function. You can learn more about these files from the {{%link href=&#34;/en/cli/v1/project-directory-structure/introduction&#34;%}}project directory structure help page{{%/link%}}.

Now we will replace the functions folder in the root of the project directory functions folder in the downloaded repository. 

Your project directory should now contain the following structure:


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

The repository you downloaded does not contain the node modules required for the application. Therefore, you must install NPM in the {{%badge%}}catly{{%/badge%}} folder.

1. Navigate to {{%badge%}}functions/catly{{%/badge%}} from your CLI and execute the following command:

{{%cli%}}npm install express body-parser valid-url shortid{{%/cli%}}

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

2. Now, open the {{%badge%}}package.json{{%/badge%}} file using any IDE and replace the value of author (which is emma@zylker.com) with your email address. 

{{%note%}}{{%bold class=&#34;bold-primary&#34;%}}Note{{%/bold%}}: This is an optional step, as the author information will not affect the execution of the Cat.ly application.{{%/note%}}

3. Open {{%badge%}}utils/constants.js{{%/badge%}} and replace the value of {{%badge%}}short_url_segment{{%/badge%}} with the **Segment ID** of the cache segment you created in the {{%italics%}}Catly{{%/italics%}} project.


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


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.


--------------------------------------------------------------------------------
title: "Configure the client"
description: "Create a URL shortener service, Cat.ly, as a single-page React application built using Catalyst&#39;s React plugin and various Catalyst components."
last_updated: "2026-03-18T07:41:08.684Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/catly/nodejs/configure-client/"
service: "All Services"
related:
- Client (/en/cli/v1/project-directory-structure/client-directory)

--------------------------------------------------------------------------------


# Configure the Client

We have created a React app named **&#34;app&#34;** 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&#39;s code in the client directory. To make this easy, simply replace the **&#34;app&#34;** directory in your project directory with the Cat.ly&#39;s files from the downloaded repository.

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

1. The {{%badge%}}package.json{{%/badge%}} file.
2. The hidden {{%badge%}}.gitignore{{%/badge%}} file.
3. The {{%badge%}}public{{%/badge%}} folder.
4. The {{%badge%}}src{{%/badge%}} folder

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

{{%note%}}{{%bold class=&#34;bold-primary&#34;%}}Note{{%/bold%}}: Please go through the code in the files provided while you read the points below.{{%/note%}}

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

* The root directory of the client contains a {{%link href=&#34;/en/cli/v1/project-directory-structure/client-directory&#34;%}}{{%badge%}}client-package.json{{%/badge%}}{{%/link%}} file which is a configuration file defining the name, version, and default homepage of the client component.

* The {{%badge%}}**app**{{%/badge%}} folder contains two subfolders as per the default project structure of a React app.

    - The {{%badge%}}**public**{{%/badge%}} 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 {{%badge%}}index.html{{%/badge%}}.
    - The {{%badge%}}**src**{{%/badge%}} folder contains the application&#39;s source files that will be included in the {{%badge%}}build{{%/badge%}} folder when we compile the React app.

The {{%badge%}}app{{%/badge%}} folder also contains the {{%link href=&#34;https://docs.npmjs.com/files/package.json&#34;%}}{{%badge%}}package.json{{%/badge%}}{{%/link%}} dependency file, a {{%link href=&#34;https://git-scm.com/docs/gitignore&#34;%}}{{%badge%}}.gitignore{{%/badge%}}{{%/link%}} file, and a {{%link href=&#34;https://legacy.yarnpkg.com/en/docs/yarn-lock/&#34;%}}{{%badge%}}yarn.lock{{%/badge%}}{{%/link%}} file.

- The {{%badge%}}public{{%/badge%}} folder includes:

    - {{%badge%}}**index.html**{{%/badge%}}: The default entry point of Cat.ly
    - {{%badge%}}**manifest.json**{{%/badge%}}: Contains information about the web application including the {{%badge%}}start_url{{%/badge%}} which is set to &#34;.&#34;. This enables every shortened version of the URL the user enters to originate from the base URL {{%link href=&#34;/en/cloud-scale/help/web-client-hosting/key-concepts/#default-web-application-url&#34;%}}{{%italics%}}Catalyst_web_app_URL/app/{{%/italics%}}{{%/link%}} when the app is hosted. We will discuss this in the final step of the tutorial.
    - {{%badge%}}**error.html**{{%/badge%}}: The page that Cat.ly redirects the user to, if they enter an invalid URL to shorten.

- The {{%badge%}}src{{%/badge%}} folder contains: 

    - The JavaScript and CSS files for the client component. The {{%badge%}}App.js{{%/badge%}} 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.

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

    - {{%badge%}}**utils**{{%/badge%}}: This sub-folder contains {{%badge%}}constants.js{{%/badge%}} to store the constant values of the three routes used by {{%badge%}}App.js{{%/badge%}}.

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 {{%badge%}}/app{{%/badge%}} from your CLI and execute the following command:

{{%cli%}}npm install zcatalyst-cli-plugin-react{{%/cli%}}

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. 

--------------------------------------------------------------------------------
title: "Test the application"
description: "Create a URL shortener service, Cat.ly, as a single-page React application built using Catalyst&#39;s React plugin and various Catalyst components."
last_updated: "2026-03-18T07:41:08.684Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/catly/nodejs/test-application/"
service: "All Services"
related:
- Serve Resources (/en/cli/v1/serve-resources/introduction)

--------------------------------------------------------------------------------


# Test the Application

Before deploying the project, you can automatically compile and test the React app on a local server using the below command:

To ensure that the project **&#34;Catly&#34;** executes locally, execute the following command from the root of your project directory:

{{%cli%}}catalyst serve{{%/cli%}}

The **Catly** application will now be served as a React application using the **Catalyst React** plugin. React applications implement the **{{%link href=&#34;https://webpack.js.org/concepts/hot-module-replacement/&#34;%}}Hot Module Replacement(HMR){{%/link%}}** feature that updates and reloads specific modules, without recompiling and reloading the entire project, when changes are made during a serve session. HMR is enabled when you serve the application through the Catalyst CLI by default.


You can now open the client component&#39;s local URL in a browser to access the Cat.ly application. 

Let us test the application by shortening a URL. Enter the URL in the text box and click **Shrink**. Cat.ly will shrink the URL and display its shortened version (/server/catly/short ID) on the web page along with the original URL if the setup is working correctly. The URL count is increased to 1.


Let us check if the original URL and its short ID were added to the Data Store and Cache components. 

Open the Data Store of the Catly project in your Catalyst console. You should find the record populated in the UrlShorten table.


Now open the cache component in your Catalyst console. You should find the cache item automatically created in the segment.


As explained earlier, the cache item&#39;s key is the short ID and its value is a string of the short ID, original URL, and the meta details of the table. The cache item&#39;s expiry is set to the default expiry of two days. 

The cache item is overwritten every time a {{%badge%}}GET{{%/badge%}} operation is performed to fetch the original URL. A new expiry time is written to the cache item through a POST operation and the expiry is set to two days by default after the most recent time it was accessed. This means that every time the URL is accessed, the cache item is stored in the shortUrl segment for two more days until it expires.

If a URL is not accessed for two days, it is deleted from the cache. If it is accessed after the two days are up, the data is fetched from the **UrlShorten** table in the Data Store and it is written to the cache again as a new cache item. 

Let us now access the URL and verify the redirection. 

Click the arrow next to the shortened version or anywhere over the list item in the Cat.ly&#39;s front-end. The browser will be redirected to the original URL by Catalyst.

If this setup is working correctly, we can deploy the application to production.


--------------------------------------------------------------------------------
title: "Deploy the project"
description: "Create a URL shortener service, Cat.ly, as a single-page React application built using Catalyst&#39;s React plugin and various Catalyst components."
last_updated: "2026-03-18T07:41:08.685Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/catly/nodejs/deploy-application/"
service: "All Services"
related:
- Deploy Resources (/en/cli/v1/deploy-resources/introduction/)

--------------------------------------------------------------------------------


# Deploy the Project

To deploy your Catalyst project from the CLI, run the following command in your terminal from your project directory:

{{%cli%}}catalyst deploy{{%/cli%}}

This will initialize the call of the Catalyst React plugin to compile the React application, followed by the deployment of functions first and finally the client component. 

A folder named {{%badge%}}build{{%/badge%}} will be created inside the app folder during the build process, with the contents of the {{%badge%}}public{{%/badge%}} folder in its root along with other required configuration and dependency files. The application&#39;s source files from the {{%badge%}}src{{%/badge%}} folder are compiled and included inside a folder named {{%badge%}}static{{%/badge%}} in the {{%badge%}}build{{%/badge%}} directory. The required node modules are also added.

The final access URLs of the components are displayed. 


You can now open the client component&#39;s URL in a browser to access the deployed Cat.ly application. Cat.ly can be accessed now from its {{%link href=&#34;/en/cloud-scale/help/web-client-hosting/introduction/#Implementation&#34;%}}web app URL{{%/link%}}. 


Cat.ly displays the shortened URLs in descending order of how frequently they are accessed. 

We have successfully completed our tutorial, and the Catly app is now functional and will work without any errors.