# Node.js


--------------------------------------------------------------------------------
title: "Introduction"
description: "Create a single-page serverless web application using Catalyst Advanced I/O Function and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.669Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city/nodejs/introduction/"
service: "All Services"
related:
- Project Directory Structure (/en/cli/v1/project-directory-structure/introduction/)
- Java SDK (/en/sdk/java/v1/overview/)
- Node.js SDK (/en/sdk/nodejs/v2/overview/)
- Python SDK (/en/sdk/python/v1/overview/)

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


# Alien City

### Introduction

This tutorial will help you build a simple web application, titled **Alien City**, that allows you to report and look up alien encounters in a city. Alien City is built as a single-page serverless application using Catalyst.

The client application will appear as follows:


You can access a working application and test its functioning here:
{{%link href=&#34;https://alien-city.catalystserverlessapp.com/app/&#34;%}}Try the App!{{%/link%}}

The Alien City application utilizes components from the following Catalyst Services:

{{%link href=&#34;/en/serverless/getting-started/introduction/&#34; %}}**Catalyst Serverless**{{%/link%}}:

* {{%link href=&#34;/en/serverless/help/functions/advanced-io/&#34; %}}**Advanced I/O Function**{{%/link%}}: The Advanced I/O function is a component you can use to code your business logic in either {{%link href=&#34;/en/sdk/java/v1/overview/&#34; %}}Java{{%/link%}}, {{%link href=&#34;/en/sdk/nodejs/v2/overview/&#34; %}}Node.js{{%/link%}}, or {{%link href=&#34;/en/sdk/python/v1/overview/&#34; %}}Python{{%/link%}} platform. It contains APIs that enable the user to report or check for an alien encounter in a city.


{{%link href=&#34;/en/cloud-scale/getting-started/introduction/&#34; %}}**Catalyst Cloud Scale**{{%/link%}}:

* **Web Client**: The frontend of the application that is hosted on Catalyst through {{%link href=&#34;/en/cloud-scale/help/web-client-hosting/introduction/&#34; %}}Web Client Hosting{{%/link%}}.

* {{%link href=&#34;/en/cloud-scale/help/data-store/introduction/&#34;%}}**Data Store**{{%/link%}}: To store the database of the cities where alien encounters have been reported.

* {{%link href=&#34;/en/cloud-scale/help/zcql/introduction/&#34; %}}**ZCQL**{{%/link%}}: To fetch data from the Data Store through querying.

We will use the {{%link href=&#34;https://console.catalyst.zoho.com/&#34; %}}Catalyst web console{{%/link%}} and the {{%link href=&#34;/en/cli/v1/cli-command-reference/&#34; %}}Catalyst Command Line Interface{{%/link%}} (CLI) to build this application.

You will be given the code for the files to be included in the function and client components in this tutorial. You will just need to copy the code given here and paste it into the appropriate files as directed.

### Application Architecture

The Alien City application’s functioning can be described as follows:

* **Reporting an alien encounter**&lt;br /&gt;A user enters the name of a city where they experienced an alien encounter. If the city had already been reported previously, the client displays a message notifying the user of it. If the city has never been reported, the data will be added to a table in the Data Store identifying the city.

* **Checking for an alien encounter**&lt;br /&gt;A user checks for a record of an alien encounter in a particular city by providing its name. If a record of that city exists in the Data Store, the client will display a positive response. Otherwise, it will display a negative response.

&lt;br /&gt;

--------------------------------------------------------------------------------
title: "Prerequisites"
description: "Create a single-page serverless web application using Catalyst Advanced I/O Function and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.670Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city/nodejs/prerequisites/"
service: "All Services"
related:
- Catalyst CLI Documentation (/en/cli/v1/cli-command-reference/)

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


# Prerequisites

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

1. {{%link href=&#34;/en/cli/v1/cli-command-reference/&#34; %}}**Catalyst CLI**{{%/link%}}&lt;br /&gt;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.&lt;br /&gt;&lt;br /&gt;You must perform the following actions:

    * **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.

    * **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.

2. **Any IDE tool for Node.js function and client code development**&lt;br /&gt;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.

{{%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 single-page serverless web application using Catalyst Advanced I/O Function and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.670Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city/nodejs/create-project/"
service: "All Services"
related:
- Catalyst Console (/en/getting-started/catalyst-projects/)

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


# Create a Project

Let’s {{%link href=&#34;/en/getting-started/catalyst-projects/#creating-a-catalyst-project&#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 New Project**.
&lt;br /&gt;

2. Enter the project’s name as &#34;**AlienCity**&#34; in the pop-up window, and click **Create**.
&lt;br /&gt;

Your project will be created then opened.

You can access the project later, by clicking **Access Project**.
&lt;br /&gt;

&lt;br /&gt;

--------------------------------------------------------------------------------
title: "Create a Table"
description: "Create a single-page serverless web application using Catalyst Advanced I/O Function and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.671Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city/nodejs/create-table/"
service: "All Services"
related:
- Data Store (/en/cloud-scale/help/data-store/introduction/)

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


# Create a Table

Let’s now create a table in the Data Store of the **AlienCity** project. This table is used to store records of city names where aliens were sighted.

To create a table:

1. Navigate to the *Cloud Scale* section of the console, then click **Start Exploring**.
&lt;br /&gt;

2. Navigate to **Data Store** under *Storage* and click **Create a New Table**.
&lt;br /&gt;

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

{{%note%}}{{%bold%}}Note:{{%/bold%}} Ensure that you enter the name exactly as instructed, because the application&#39;s code contains the same name.{{%/note%}}

The table is now created.

Next, let’s create a column in the table to store the names of the cities.

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

2. Enter the column’s name as &#34;**CityName**&#34;. Select the data type as **Var Char** and enter the max length as &#34;**100**&#34;. Click the **Is Unique** toggle switch to enable it.
&lt;br /&gt;

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

{{%note%}}{{%bold%}}Note:{{%/bold%}} Ensure that you enter the name exactly as instructed, because the application&#39;s code contains the same name.{{%/note%}}

3. Click **Create**.

The column is now created and listed in the *Schema View* section.
&lt;br /&gt;

&lt;br /&gt;

--------------------------------------------------------------------------------
title: "Initialize the Project"
description: "Create a single-page serverless web application using Catalyst Advanced I/O Function and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.671Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city/nodejs/initialize-project/"
service: "All Services"
related:
- Initialize CLI 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 this from the {{%link href=&#34;https:/en/cli/v1/project-directory-structure/introduction/&#34; %}}Project Directory Structure 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%}}.

For the Alien City application, we will initialize the client and the {{%link href=&#34;/en/serverless/help/functions/advanced-io/&#34; %}}Advanced I/O function{{%/link%}}. The Advanced I/O function will be initialized in the {{%link href=&#34;/en/sdk/python/v1/overview/&#34; %}}Python{{%/link%}} platform. However, as mentioned {{%link href=&#34;/en/tutorials/alien-city/python/introduction&#34; %}}earlier{{%/link%}}, you can also initialize it in the {{%link href=&#34;/en/sdk/java/v1/overview/&#34;%}}Java{{%/link%}} or {{%link href=&#34;/en/sdk/nodejs/v2/overview/&#34;%}}Node.js{{%/link%}} platforms. 

1. Create a folder for the project on your local machine and navigate to it from the terminal.

2. Initialize a project by executing the following command from that directory:
{{%cli%}}catalyst init {{%/cli%}}

3. Navigate using the **arrow keys** and select your preferred portal and press the **Enter** key. If you have no other organizations associated with the account, then the default one will be selected automatically.
&lt;br /&gt;
You can find out more about Catalyst&#39;s multi-org portal feature from this {{%link href=&#34;/en/getting-started/catalyst-organizations/#access-the-multi-org-portal&#34; %}}help document{{%/link%}}.

4. The CLI will now ask you to associate a Catalyst project with the directory. Associate it with the project that we created earlier from the console. Select **AlienCity** from the list and press **Enter**.
&lt;br /&gt;

5. Select **Client** and **Functions** using the **space-bar**, then press the **Enter** key to initialize.
&lt;br /&gt;

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

7. Select the latest runtime of **NodeJS** as the programming environment.
&lt;br /&gt;

8. Enter &#34;**alien_city_function**&#34; as the package name and &#34;**index.js**&#34; as the entry point, then press **Enter**. You can also just press **Enter** to use the default names generated by Catalyst, or enter any name of your preference.
&lt;br /&gt;

9. The CLI will now initiate the client set up. Select **Basic web app** as your client type.
&lt;br /&gt;

10. Enter &#34;**ALcity**&#34; as the name for the client package and press **Enter**. You can also enter any name you prefer. 
&lt;br /&gt;

The client directory will be created in the standard structure. Catalyst initialization is now complete.

Your {{%link href=&#34;/en/cli/v1/project-directory-structure/introduction/&#34; %}}project directory{{%/link%}} is now set up with the client directory and the functions directory along with configuration files and dependencies. The project directory also contains the {{%link href=&#34;/en/cli/v1/project-directory-structure/catalyst-json/&#34; %}}{{%badge%}}catalyst.json{{%/badge%}}{{%/link%}} configuration file and a hidden {{%badge%}}.catalystrc{{%/badge%}} file.

This is the structure of the AlienCity project’s directory, if the Advanced I/O function is of the Python platform, and the client is set up as a Basic web app.
&lt;br /&gt;

&lt;br /&gt;

--------------------------------------------------------------------------------
title: "Configure the Advanced I/O Function"
description: "Create a single-page serverless web application using Catalyst Advanced I/O Function and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.671Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city/nodejs/configure-advio-function/"
service: "All Services"
related:
- Functions (/en/serverless/help/functions/introduction/)
- 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

Let&#39;s begin coding the Alien City application by configuring the function component. 

The Node.js function directory ( {{%badge%}}{{%link href=&#34;/en/cli/v1/project-directory-structure/functions-directory/&#34;%}} functions/alien_city_function {{%/link%}}{{%/badge%}} ) contains the following files: 
* The {{%badge%}}index.js{{%/badge%}} main function file
* The {{%badge%}}catalyst-config.json{{%/badge%}} configuration file
* Node modules
* {{%badge%}}{{%link href=&#34;https://docs.npmjs.com/files/package.json&#34;%}}package.json{{%/link%}}{{%/badge%}} and {{%badge%}}{{%link href=&#34;https://docs.npmjs.com/configuring-npm/package-lock-json.html&#34;%}}package-lock.json{{%/link%}}{{%/badge%}} dependency files


You will be adding code in the {{%badge%}}index.js{{%/badge%}} main function file.

The two APIs in the Advanced I/O function that handle the routing between the server and the Data Store are:

* **{{%badge%}}GET /alien{{%/badge%}}**: To check whether aliens are present in a city
* **{{%badge%}}POST /alien{{%/badge%}}**: To report an alien presence in a city


&lt;br&gt;

#### Install Express Node.js Framework 

For the Node.js function, you will be using the {{%link href=&#34;https://expressjs.com/&#34;%}}Express Node.js framework{{%/link%}}. To import the Express package in the code, you must install the Express dependencies in your system.

To install {{%badge%}}Express.js{{%/badge%}} in your local machine, navigate to the Node function&#39;s directory ({{%badge%}}functions/alien_city_function{{%/badge%}}) in your terminal and execute the following command:

{{%cli%}}npm install express --save{{%/cli%}}

This will install the Express module and save the dependencies. 


This information will also be updated in the package.json file.


Let&#39;s now add the code in the function file. 

&lt;br&gt;
Copy the code given below and paste it in the {{%badge%}}index.js{{%/badge%}} in the {{%badge%}}functions/alien_city_function{{%/badge%}} directory of your project, and save the file. You can use any IDE of your choice to work with the application&#39;s files. 
&lt;br&gt;
&lt;br&gt;

{{%note%}}{{%bold class=&#34;bold-primary&#34;%}}Note:{{%/bold%}} Please go through the code in this section to make sure you fully understand it. {{%/note%}}


{{% panel_with_adjustment class=&#34;language-javascript line-numbers&#34; header=&#34;index.js&#34; footer=&#34;button&#34; scroll=&#34;set-scroll&#34; %}}&#39;use strict&#39;;
var express = require(&#39;express&#39;);
var app = express();
var catalyst = require(&#39;zcatalyst-sdk-node&#39;);
app.use(express.json());
const tableName = &#39;AlienCity&#39;; // The table created in the Data Store
const columnName = &#39;CityName&#39;; // The column created in the table
// The POST API that reports the alien encounter for a particular city
app.post(&#39;/alien&#39;, (req, res) =&gt; {
    var cityJson = req.body;
    console.log(cityJson);
    // Initializing Catalyst SDK
    var catalystApp = catalyst.initialize(req);
    // Queries the Catalyst Data Store table and checks whether a row is present for the given city
    getDataFromCatalystDataStore(catalystApp, cityJson.city_name).then(cityDetails =&gt; {
        if (cityDetails.length == 0) { // If the row is not present, then a new row is inserted
            console.log(&#34;Alien alert!&#34;); //Written to the logs. You can view this log from Logs under the Monitor section in the console
            var rowData = {}
            rowData[columnName] = cityJson.city_name;
            var rowArr = [];
            rowArr.push(rowData);
            // Inserts the city name as a row in the Catalyst Data Store table
            catalystApp.datastore().table(tableName).insertRows(rowArr).then(cityInsertResp =&gt; {
                res.send({
                    &#34;message&#34;: &#34;Thanks for reporting!&#34;
                });
            }).catch(err =&gt; {
                console.log(err);
                sendErrorResponse(res);
            })
        } else { // If the row is present, then a message is sent indicating duplication
            res.send({
                &#34;message&#34;: &#34;Looks like you are not the first person to encounter aliens in this city! Someone has already reported an alien encounter here!&#34;
            });
        }
    }).catch(err =&gt; {
        console.log(err);
        sendErrorResponse(res);
    })
});
// The GET API that checks the table for an alien encounter in that city 
app.get(&#39;/alien&#39;, (req, res) =&gt; {
    var city = req.query.city_name;
    // Initializing Catalyst SDK
    var catalystApp = catalyst.initialize(req);
    // Queries the Catalyst Data Store table and checks whether a row is present for the given city
    getDataFromCatalystDataStore(catalystApp, city).then(cityDetails =&gt; {
        if (cityDetails.length == 0) {
            res.send({
                &#34;message&#34;: &#34;Hurray! No alien encounters in this city yet!&#34;,
                &#34;signal&#34;: &#34;negative&#34;
            });
        } else {
            res.send({
                &#34;message&#34;: &#34;Uh oh! Looks like there are aliens in this city!&#34;,
                &#34;signal&#34;: &#34;positive&#34;
            });
        }
    }).catch(err =&gt; {
        console.log(err);
        sendErrorResponse(res);
    })
});
/**
 * Checks whether an alien encounter is already reported for the given city by querying the Data Store table
 * @param {*} catalystApp 
 * @param {*} cityName 
 */
function getDataFromCatalystDataStore(catalystApp, cityName) {
    return new Promise((resolve, reject) =&gt; {
        // Queries the Catalyst Data Store table
        catalystApp.zcql().executeZCQLQuery(&#34;SELECT * FROM AlienCity WHERE CityName = &#39;&#34; &#43; cityName &#43; &#34;&#39;&#34;).then(queryResponse =&gt; {
            resolve(queryResponse);
        }).catch(err =&gt; {
            reject(err);
        })
    });
}
/**
 * Sends an error response
 * @param {*} res 
 */
function sendErrorResponse(res) {
    res.status(500);
    res.send({
        &#34;error&#34;: &#34;Internal server error occurred. Please try again in some time.&#34;
    });
}
module.exports = app;
{{% /panel_with_adjustment %}}

The functions directory is now configured. We will discuss the architecture of the function and the client in the next section. 


--------------------------------------------------------------------------------
title: "Configure the Client"
description: "Create a single-page serverless web application using Catalyst Advanced I/O Function and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.671Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city/nodejs/configure-client/"
service: "All Services"
related:
- Client Directory Structure (/en/cli/v1/project-directory-structure/client-directory/)
- Web Client Hosting (/en/cloud-scale/help/web-client-hosting/introduction/)

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


# Configure the Client

Now, let&#39;s configure the client component. The {{%link href=&#34;/en/cli/v1/project-directory-structure/client-directory/&#34;%}}client directory{{%/link%}} contains:

* The {{%badge%}}index.html{{%/badge%}} file that contains the HTML code for the front-end application
* The {{%badge%}}main.css{{%/badge%}} file that contains the CSS code for the front-end application
* The {{%badge%}}main.js{{%/badge%}} file that contains the JavaScript code 
* The {{%badge%}}client-package.json{{%/badge%}} configuration file

&lt;br&gt;
We will be coding {{%badge%}}index.html{{%/badge%}} and {{%badge%}}main.js{{%/badge%}}.
&lt;br&gt;
&lt;br&gt;
{{%note%}}{{%bold class=&#34;bold-primary&#34;%}}Note:{{%/bold%}} Please go through the code in this section to make sure you fully understand it.{{%/note%}}
&lt;br&gt;
Copy the code below and paste it into the respective files located in the {{%badge%}}client/directory{{%/badge%}} of your project using an IDE and save the files. 
&lt;br&gt;
&lt;br&gt;

{{% panel_with_adjustment header=&#34;index.html&#34; footer=&#34;button&#34; scroll=&#34;set-scroll&#34; class=&#34;language-xml line-numbers&#34; %}}&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset=&#34;utf-8&#34; /&amp;gt;
    &amp;lt;meta http-equiv=&#34;X-UA-Compatible&#34; content=&#34;IE=edge&#34;&amp;gt;
    &amp;lt;title&amp;gt;AlientCityAppClient&amp;lt;/title&amp;gt;
    &amp;lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1&#34;&amp;gt;
    &amp;lt;link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; media=&#34;screen&#34; href=&#34;main.css&#34; /&amp;gt;
    &amp;lt;link rel=&#34;stylesheet&#34; href=&#34;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&#34;
        integrity=&#34;sha384-ggOyR0iXCbMQv3Xipma34MD&#43;dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&#34; crossorigin=&#34;anonymous&#34;&amp;gt;
    &amp;lt;script src=&#34;https://code.jquery.com/jquery-3.4.1.min.js&#34;
        integrity=&#34;sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=&#34; crossorigin=&#34;anonymous&#34;&amp;gt;&amp;lt;/script&amp;gt;
    &amp;lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&#34;
        integrity=&#34;sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1&#34; crossorigin=&#34;anonymous&#34;&amp;gt;
    &amp;lt;/script&amp;gt;
    &amp;lt;script src=&#34;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&#34;
        integrity=&#34;sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM&#43;B07jRM&#34; crossorigin=&#34;anonymous&#34;&amp;gt;
    &amp;lt;/script&amp;gt;
    &amp;lt;script src=&#34;main.js&#34;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
    &amp;lt;br&amp;gt;
    &amp;lt;br&amp;gt;
    &amp;lt;center&amp;gt;
        &amp;lt;h1&amp;gt;ALIEN CITY&amp;lt;/h1&amp;gt;
    &amp;lt;/center&amp;gt;
    &amp;lt;div class=&#34;container&#34;&amp;gt;
        &amp;lt;ul class=&#34;nav nav-tabs&#34; id=&#34;myTab&#34; role=&#34;tablist&#34;&amp;gt;
            &amp;lt;li class=&#34;nav-item&#34;&amp;gt;
                &amp;lt;a class=&#34;nav-link active&#34; id=&#34;check-tab&#34; data-toggle=&#34;tab&#34; href=&#34;#check&#34; role=&#34;tab&#34;
                    aria-controls=&#34;check&#34; aria-selected=&#34;true&#34;&amp;gt;Check My City&amp;lt;/a&amp;gt;
            &amp;lt;/li&amp;gt;
            &amp;lt;li class=&#34;nav-item&#34;&amp;gt;
                &amp;lt;a class=&#34;nav-link&#34; id=&#34;report-tab&#34; data-toggle=&#34;tab&#34; href=&#34;#report&#34; role=&#34;tab&#34; aria-controls=&#34;report&#34;
                    aria-selected=&#34;false&#34;&amp;gt;Report Alien Encounter&amp;lt;/a&amp;gt;
            &amp;lt;/li&amp;gt;
        &amp;lt;/ul&amp;gt;
        &amp;lt;div class=&#34;tab-content&#34; id=&#34;myTabContent&#34;&amp;gt;
            &amp;lt;div class=&#34;tab-pane fade show active&#34; id=&#34;check&#34; role=&#34;tabpanel&#34; aria-labelledby=&#34;check-tab&#34;&amp;gt;
                &amp;lt;br&amp;gt;
                &amp;lt;br&amp;gt;
                &amp;lt;form&amp;gt;
                    &amp;lt;div class=&#34;form-group&#34;&amp;gt;
                        &amp;lt;label for=&#34;city-get-input&#34;&amp;gt;&amp;lt;b&amp;gt;Check if your city has aliens:&amp;lt;/b&amp;gt;&amp;lt;/label&amp;gt;
                        &amp;lt;input type=&#34;text&#34; class=&#34;form-control&#34; id=&#34;city-get-input&#34; aria-describedby=&#34;checkCity&#34;
                            placeholder=&#34;Enter City Name&#34;&amp;gt;
                    &amp;lt;/div&amp;gt;
                    &amp;lt;button type=&#34;submit&#34; class=&#34;btn btn-primary&#34;
                        onclick=&#34;getAlienEncounter();return false;&#34;&amp;gt;Check&amp;lt;/button&amp;gt;
                &amp;lt;/form&amp;gt;
                &amp;lt;br&amp;gt;
                &amp;lt;br&amp;gt;
                &amp;lt;div id=&#34;result-container&#34;&amp;gt;
                    &amp;lt;div id=&#34;result-text&#34;&amp;gt;
                    &amp;lt;/div&amp;gt;
                    &amp;lt;br&amp;gt;
                    &amp;lt;div id=&#34;result-image&#34;&amp;gt;
                    &amp;lt;/div&amp;gt;
                &amp;lt;/div&amp;gt;
                &amp;lt;div id=&#34;loader&#34; style=&#34;display: none;&#34;&amp;gt;
                        &amp;lt;div class=&#34;spinner-border&#34; role=&#34;status&#34;&amp;gt;
                            &amp;lt;span class=&#34;sr-only&#34;&amp;gt;Loading...&amp;lt;/span&amp;gt;
                        &amp;lt;/div&amp;gt;
                    &amp;lt;/div&amp;gt;
            &amp;lt;/div&amp;gt;
            &amp;lt;div class=&#34;tab-pane fade&#34; id=&#34;report&#34; role=&#34;tabpanel&#34; aria-labelledby=&#34;report-tab&#34;&amp;gt;
                &amp;lt;br&amp;gt;
                &amp;lt;br&amp;gt;
                &amp;lt;form&amp;gt;
                    &amp;lt;div class=&#34;form-group&#34;&amp;gt;
                        &amp;lt;div class=&#34;city-post-input&#34;&amp;gt;
                            &amp;lt;label for=&#34;exampleInputEmail1&#34;&amp;gt;&amp;lt;b&amp;gt;Enter the name of the city where you encountered an alien:&amp;lt;/b&amp;gt;&amp;lt;/label&amp;gt;
                            &amp;lt;input type=&#34;text&#34; class=&#34;form-control&#34; id=&#34;city-post-input&#34; aria-describedby=&#34;cityPost&#34;
                                placeholder=&#34;Enter City Name&#34;&amp;gt;
                        &amp;lt;/div&amp;gt;
                    &amp;lt;/div&amp;gt;
                    &amp;lt;button type=&#34;submit&#34; class=&#34;btn btn-primary&#34;
                        onclick=&#34;postAlienEncounter();return false;&#34;&amp;gt;Report&amp;lt;/button&amp;gt;
                &amp;lt;/form&amp;gt;
            &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
{{% /panel_with_adjustment %}}

{{% panel_with_adjustment class=&#34;language-javascript line-numbers&#34; header=&#34;main.js&#34; footer=&#34;button&#34; scroll=&#34;set-scroll&#34; %}}/* Fires an API call to the server and adds the reported city as an alien city
  */
function postAlienEncounter() {
    var city = $(&#34;#city-post-input&#34;).val();
    // Fires an Ajax call to the URL defined in the index.js function file
// All URLs to the Advanced I/O function will be of the pattern: /server/{function_name}/{url_path}
    $.ajax({
        url: &#34;/server/alien_city_function/alien&#34;, 
        type: &#34;post&#34;,
        contentType: &#34;application/json&#34;,
        data: JSON.stringify({
            &#34;city_name&#34;: city
        }),
        success: function (data) {
            alert(data.message);
        },
        error: function (error) {
            alert(error.message);
        }
    });
}
/**
 * Fires an API call to the server to check whether the given city is alien city or not
 */
function getAlienEncounter() {
    showLoader();
    var positive = &#34;https://media.giphy.com/media/Y1GYiLui9NHcxVKhdo/giphy.gif&#34;;
    var negative = &#34;https://media.giphy.com/media/fsPcMdeXPxSP6zKxCA/giphy.gif&#34;;
    var city = $(&#34;#city-get-input&#34;).val();
  // Fires an Ajax call to the URL defined in the index.js function file
 // All URLs to the Advanced I/O function will be of the pattern: /server/{function_name}/{url_path}
    $.ajax({
        url: &#34;/server/alien_city_function/alien?city_name=&#34; &#43; city, 
        type: &#34;get&#34;,
        success: function (data) {
            console.log(data);
            $(&#34;#result-text&#34;).text(&#34;&#34;);
            $(&#34;#result-text&#34;).text(data.message);
            var imagesrc = negative;
            if (data.signal == &#39;positive&#39;) {
                imagesrc = positive;
            }
            $(&#34;#result-image&#34;).html(&#34;&#34;);
            $(&#34;#result-image&#34;).html(&#34;&amp;lt;img src=&#39;&#34; &#43; imagesrc &#43; &#34;&#39; /&amp;gt;&#34;);
            hideLoader();
        },
        errror: function (error) {
            alert(error.message);
        }
    });
}
function showLoader()
{
    $(&#34;#result-container&#34;).hide();
    $(&#34;#loader&#34;).show();
}
function hideLoader()
{
    $(&#34;#loader&#34;).hide();
    $(&#34;#result-container&#34;).show();
}
{{% /panel_with_adjustment %}}

&lt;br&gt;

The client directory is now configured.

Let us quickly go through the working of the function and client components of the application:

{{%list class=&#34;bold&#34;%}} 1. **GET operation** 
&lt;br&gt;
 * When you enter a city name in the client to check for a record of previous alien encounter, the {{%badge%}}onClick{{%/badge%}} event for the **Check** button in {{%badge%}}index.html{{%/badge%}} triggers the {{%badge%}}getAlienEncounter(){{%/badge%}} function defined in {{%badge%}}main.js{{%/badge%}}. 
&lt;br&gt;
 * This fires an Ajax call to the URL route defined in the Advanced I/O function. The {{%badge%}}GET{{%/badge%}} API defined in {{%badge%}}index.js{{%/badge%}} then invokes the {{%badge%}}getDataFromCatalystDataStore{{%/badge%}} function and passes the request query. 
&lt;br&gt;
 * This function searches for the data in the *AlienCity* table in the Data Store by executing a ZCQL query.
&lt;br&gt;
 * If a record matching the city name is found in the table, a {{%badge%}}positive{{%/badge%}} signal is sent as the response. Otherwise, a {{%badge%}}negative{{%/badge%}} signal is sent as the response. 
 &lt;br&gt;
 * The client then displays the message that matches the response. A GIF matching the response defined in {{%badge%}}main.js{{%/badge%}} is also displayed. 
{{%/list%}}
&lt;br&gt;


{{%list class=&#34;bold&#34;%}} 2. **POST operation** 
&lt;br&gt;
* When you enter a city name in the client to report an alien encounter, the {{%badge%}}onClick{{%/badge%}} event for the **Report** button in {{%badge%}}index.html{{%/badge%}} triggers the {{%badge%}}postAlienEncounter(){{%/badge%}} function defined in {{%badge%}}main.js{{%/badge%}}.
&lt;br&gt;
 * This fires an Ajax call to the URL route defined in the Advanced I/O function. The {{%badge%}}POST{{%/badge%}} API defined in {{%badge%}}index.js{{%/badge%}} then invokes the {{%badge%}}getDataFromCatalystDataStore{{%/badge%}} function and passes a request query to check if a record with the same city name already exists.
&lt;br&gt;
 * This function searches for the data in the *AlienCity* table in the Data Store by executing a ZCQL query. If the record already exists, a response is sent, which enables the client to display an appropriate message to the user.
&lt;br&gt;
 * If there are no records for the city name, a new row is created in the *AlienCity* table for the city name entered by the user. A pop-up box is displayed in the client confirming the insertion of the record in the Data Store. An appropriate message is also pushed to the logs which can be checked from *Logs* under the *Monitor* section in the console. 
 {{%/list%}}
 

--------------------------------------------------------------------------------
title: "Test the Application"
description: "Create a single-page serverless web application using Catalyst Advanced I/O Function and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.672Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city/nodejs/test-application/"
service: "All Services"
related:
- Serve CLI Resources (/en/cli/v1/serve-resources/introduction/)

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


# Test the Application

Before you deploy the application to the remote console, you can {{%link href=&#34;/en/cli/v1/serve-resources/introduction/&#34; %}}test the application{{%/link%}} on a local server and check if everything works fine using the Catalyst CLI. 

To serve the Catalyst project locally, execute the following command from your project directory:
{{%cli%}}catalyst serve{{%/cli%}}

This Alien City application is now served at default port 3000. The local endpoint URLs of the components are displayed.

{{%note%}}{{%bold%}}Note:{{%/bold%}} Every time you access the home page or any of the sub-pages of your client, or the function, the CLI will display a live log of the URL accessed, along with the HTTP request method.{{%/note%}}

&lt;br /&gt;

You can now open the client component’s local URL in a browser to access the Alien City application.

&lt;br /&gt;

Let’s test the application by entering a city’s name and checking for the history of an alien encounter in the city. Since we have not reported an alien encounter in a city yet, the result should be negative. 

Enter a city name in the text box and click **Check**.

&lt;br /&gt;

Since a matching record for this city is not found in the Data Store, the client displays a negative response.

&lt;br /&gt;

Now, let’s report an alien encounter. Click the *Report Alien Encounter* tab. Enter a city name and click **Report**. We have entered &#34;**Amsterdam**&#34; in our application.

&lt;br /&gt;

The application will display a pop-up box confirming that the data is added to the Data Store.

&lt;br /&gt;

You can verify this by opening your Catalyst console and navigating to **Data Store** under *Storage* **&gt;** *CloudScale*. Click the **Data View** tab to view the record that was just inserted.

&lt;br /&gt;

Next, let&#39;s search for this city in the client and check if it fetches this record from the Data Store. Click *Check My City* in the client application and enter the name of the city that you just reported. Here, we enter &#34;**Amsterdam**&#34;. Click **Check**.

&lt;br /&gt;

The client displays a positive response.

You can also check if the client displays the duplication message by reporting the same city again.

&lt;br /&gt;

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

&lt;br /&gt;

--------------------------------------------------------------------------------
title: "Deploy the Project"
description: "Create a single-page serverless web application using Catalyst Advanced I/O Function and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.672Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city/nodejs/deploy-project/"
service: "All Services"
related:
- Deploy CLI Resources (/en/cli/v1/deploy-resources/introduction/)
- Web Client Hosting (/en/cloud-scale/help/web-client-hosting/introduction/&#39;)

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


# Deploy the Project

To {{%link href=&#34;/en/cli/v1/deploy-resources/introduction/&#34; %}}deploy your Catalyst project{{%/link%}} from the CLI, run the following command in your terminal from your project directory:
{{%cli%}}catalyst deploy{{%/cli%}}

The function is deployed first, followed by the client component. The production URLs of the components are displayed.

&lt;br /&gt;

You can now open the client component’s URL in a browser to access the deployed application. Alien City can be accessed now from its {{%link href=&#34;/en/cloud-scale/help/web-client-hosting/key-concepts/#default-web-application-url&#34; %}}web app URL{{%/link%}}.

&lt;br /&gt;