# NodeJS



--------------------------------------------------------------------------------
title: "Introduction"
description: "Create an application and host it on Catalyst using the Catalyst AppSail service and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.666Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city-appsail/express/introduction/"
service: "All Services"
related:
- Project Directory Structure (/en/cli/v1/project-directory-structure/introduction/)
- Catalyst SDK for AppSail (/en/serverless/help/appsail/key-concepts/catalyst-configurations/#implementing-catalyst-sdk-in-appsail/)

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


# Alien City Using AppSail

### Introduction

This tutorial will help you build a Node.js Express web application called Alien City, and host it using Catalyst's serverless offering, AppSail. AppSail is a highly scalable PaaS component that allows you to code your application in any programming framework of your choice, independent of any Catalyst-specific coding structures, and host it on Catalyst with ease.

Alien City is a fun application that allows you to search for and report alien encounters in a city. 

The web application will appear as follows:

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

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

1. {{%link href="/en/serverless/getting-started/introduction/" %}}**Catalyst Serverless**{{%/link%}}:
    - {{%link href="/en/serverless/help/appsail/introduction/" %}}AppSail{{%/link%}}: To host the independent Node.js Express application. We will be building the front-end of the app as well as the backend logic, and bundling them together to deploy on AppSail.

2. {{%link href="/en/cloud-scale/getting-started/introduction/" %}}**Catalyst Cloud Scale**{{%/link%}}:
    - {{%link href="/en/cloud-scale/help/data-store/introduction/" %}}Data Store{{%/link%}}: To store the database of the cities where alien encounters have been reported.
    - {{%link href="/en/cloud-scale/help/zcql/introduction/" %}}ZCQL{{%/link%}}: To fetch data from the Data Store through querying.

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

You will be given the code for the files to be included in the application in this tutorial. You will just need to copy the code 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**<br />A user enters the name of a city where they experienced an alien encounter. If the city had already been reported previously, the app 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**<br />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 app will display a positive response. Otherwise, it will display a negative response.
<br />



--------------------------------------------------------------------------------
title: "Prerequisites"
description: "Create an application and host it on Catalyst using the Catalyst AppSail service and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.666Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city-appsail/express/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="/en/cli/v1/cli-command-reference/" %}}Catalyst CLI{{%/link%}}<br />Catalyst CLI contains a host of tools that allow 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.<br /> 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="/en/getting-started/installing-catalyst-cli/" %}}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="/en/cli/v1/login/login-from-cli/" %}}CLI Login help page{{%/link%}} for the steps to log in from Catalyst CLI and the various options available for it.

2. **Any IDE tool for application development for HTML and JavaScript**<br />You can use any IDE to code your application. 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="/images/tutorials/todo-list/vscode.png"%}}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="/en/catalyst-extensions/vs-code-extension/introduction/" %}}help section{{%/link%}}.{{%/info%}}

--------------------------------------------------------------------------------
title: "Create a Project"
description: "Create an application and host it on Catalyst using the Catalyst AppSail service and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.666Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city-appsail/express/create-project/"
service: "All Services"
related:
- Catalyst Console (/en/getting-started/catalyst-projects/)

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


# Create a Project

Let’s {{%link href="/en/getting-started/catalyst-projects/#creating-a-catalyst-project" %}}create a Catalyst project{{%/link%}} from the Catalyst console.

1. Log in to the {{%link href="https://console.catalyst.zoho.com/baas/index" %}}Catalyst console{{%/link%}} and click **Create New Project**.
<br />

2. Enter the project’s name as "**AlienCity**" in the pop-up window, and click **Create**.


Your project will be created, then opened.

<!-- You can access the project later by clicking **Access Project**.
<br /> -->

--------------------------------------------------------------------------------
title: "Create a Table"
description: "Create an application and host it on Catalyst using the Catalyst AppSail service and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.666Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city-appsail/express/create-table/"
service: "All Services"
related:
- Data Store (/en/cloud-scale/help/data-store/introduction/)

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


# Create a Table

Now let’s create a table in the {{%link href="/en/cloud-scale/help/data-store/introduction/" %}}Data Store{{%/link%}} of the **Alien City** project. This table is used to store records of city names where aliens were seen.

To create a table:

1. Navigate to the *Cloud Scale* section of the console, then click **Start Exploring**.
<br />

2. Navigate to **Data Store** under *Storage* and click **Create a New Table**.
<br />

3. Enter the table’s name as "**Alien City**" and click **Create**.
<br />

{{%note%}}{{%bold%}}Note:{{%/bold%}} Ensure that you enter the name exactly as instructed, because the application'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.
<br />

2. Enter the column’s name as "**CityName**". Select the data type as **Var Char** and enter the max length as "**100**". Click the **Is Unique** toggle switch to enable it.
<br />

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

3. Click **Create**.
<br />

The column is now created and listed in the *Schema View* section.

<br />

--------------------------------------------------------------------------------
title: "Initialize Your Catalyst Project"
description: "Create an application and host it on Catalyst using the Catalyst AppSail service and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.666Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city-appsail/express/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 Your Catalyst Project

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="/en/cli/v1/project-directory-structure/introduction/" %}}Project Directory Structure help page{{%/link%}}. You can learn about initializing a project in detail from the {{%link href="/en/cli/v1/initialize-resources/introduction/" %}}CLI help documentation{{%/link%}}.

For this application, you will be initializing the AppSail component. The AppSail component will be initialized in the Node.js programming stack.

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%}}

Navigate using the **arrow keys** and select your preferred portal and click **Enter**. If you have no other organizations associated with the account, then the default will be selected automatically.

You can find out more about Catalyst’s multi-org portal feature in this {{%link href="/en/getting-started/catalyst-organizations/#access-the-multi-org-portal" %}}help document{{%/link%}}.

3. 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 click **Enter**.


4. Select **AppSail** using the *space bar*, then click **Enter** to initialize.


5. The CLI will prompt you to choose between {{%link href="/en/serverless/help/appsail/catalyst-managed-runtimes/key-concepts/" %}}Catalyst-Managed Runtime{{%/link%}} and {{%link href="/en/serverless/help/appsail/custom-runtimes/container-registry-services/" %}}Docker Image{{%/link%}}. Because you are creating this project from one of the Catalyst-Managed Runtime, select **Catalyst-Managed Runtime** and click **Enter**. 


6. The CLI will initiate the AppSail service:<br />
    * Because you are creating your own project, type "**n**" and click **Enter** for the prompt asking if you wish to get started with a list of recommended projects.
    * Because you have initialized the project in the {{%badge%}}Alien City/{{%/badge%}} directory created specifically for this application, enter "**Y**" and click **Enter** for the prompt asking you to confirm if this the directory you wish to initialize your AppSail service.


7. Next, we will begin configuring our AppSail service. Enter "**AlienCity**" as the name of your AppSail service.

8. Select your current directory as the build path of your AppSail service, and choose the latest runtime of **NodeJS** as the programming stack, and click **Enter**.


The AppSail service has been initialized for your Alien City project.


The directory will be created in the standard structure, and it will contain the {{%link href="/en/serverless/help/appsail/key-concepts/catalyst-configurations/#the-app-configjson-file" %}}{{%badge%}}app-config.json{{%/badge%}}{{%/link%}} file which includes the configuration of your AppSail service , along with the standard project configuration files such as the {{%link href="/en/cli/v1/project-directory-structure/catalyst-json/" %}}{{%badge%}}catalyst.json{{%/badge%}}{{%/link%}} file and a hidden {{%badge%}}.catalystrc{{%/badge%}} file.

This is the structure of the Alien City project’s directory initialized with the AppSail service.
<br />

--------------------------------------------------------------------------------
title: "Initialize Node Modules, Catalyst Node.js SDK, and the Express Package"
description: "Create an application and host it on Catalyst using the Catalyst AppSail service and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.667Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city-appsail/express/initialize-modules/"
service: "All Services"
related:
- Catalyst SDK for AppSail (/en/cli/v1/initialize-resources/introduction/)

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


# Initialize Node Modules, Catalyst Node.js SDK, and  the Express Package

To run the application on a Node.js Express framework, let's initialize Node modules, and Express package for your application.

Enter the following command in your CLI in your project directory {{%badge%}}/Alien City{{%/badge%}} to initialize the Node modules:
{{%cli%}}npm init{{%/cli%}}


Enter "**aliencity**" as the package name, and "**index.js**" as the entry point. You can also just click **Enter** to use the default names generated by NPM, or enter any name of your preference.

Click **Enter** for the rest of the prompts, and complete the initialization. Your preferences will be stored in a {{%link href="https://docs.npmjs.com/cli/v10/configuring-npm/package-json" %}}{{%badge%}}package.json{{%/badge%}}{{%/link%}} file. You can review your options in the terminal, and confirm your preferences by entering "**yes**."


Create a new file in your project directory and name it "**index.js**." If you have provided a different name for your entry point, ensure you provide the same name here.

Install the Express package in your project's root folder using the following command:
{{%cli%}}npm install express{{%/cli%}}


We will utilize Catalyst components such as Data Store and ZCQL queries in this app. To use them, you will also need to install the Catalyst Node.js SDK package in your project's root folder using the following CLI command:
{{%cli%}}npm install zcatalyst-sdk-node{{%/cli%}}



Now your directory will contain the {{%badge%}}node_modules{{%/badge%}} folder, the {{%badge%}}package.json{{%/badge%}}, {{%badge%}}package-lock.json{{%/badge%}}, and the {{%badge%}}index.js{{%/badge%}} file, in addition to the existing files.


<br />

--------------------------------------------------------------------------------
title: "Code Your Application"
description: "Create an application and host it on Catalyst using the Catalyst AppSail service and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.667Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city-appsail/express/code-app/"
service: "All Services"
related:
- Catalyst SDK for AppSail (/en/cli/v1/initialize-resources/introduction/)

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


# Code Your Application

You have created the "**index.js**" file in your project's root directory, and this will contain the backend logic of your application.

Create a folder in your project's root directory and name it "**public**." This folder will contain the files for your front-end logic. Create the following files inside your public folder ({{%badge%}}Alien City/public/{{%/badge%}}):

* **index.html**: The file that contains the HTML code for the front-end of the application.
* **main.js**: The file that contains the JavaScript code that connects the front-end and backend.

This is the final folder structure of the **Alien City** project.


You will be coding the {{%badge%}}index.js{{%/badge%}}, {{%badge%}}index.html{{%/badge%}}, and {{%badge%}}main.js{{%/badge%}} files. You will also be updating the {{%badge%}}app-config.json{{%/badge%}} file.

{{%note%}}{{%bold%}}Note:{{%/bold%}} Please go through the code in this section to make sure you fully understand it.{{%/note%}}

Copy the code below and paste it into the respective files of your project using an IDE and save the files.

{{%panel_with_adjustment class="language-javascript line-numbers" header="index.js" footer="button" scroll="set-scroll" %}}var express = require('express');
var app = express();
var catalyst = require('zcatalyst-sdk-node');
app.use(express.json());
app.use(express.static('public'));
const tableName = 'AlienCity'; // The table created in the Data Store
const columnName = 'CityName'; // The column created in the table
app.post('/alien', (req, res) => {
    var cityJson = req.body;
    console.log(req.body)
    var catalystApp = catalyst.initialize(req);
    getDataFromCatalystDataStore(catalystApp, cityJson.city_name).then(cityDetails => {
        if (cityDetails.length == 0) {
            console.log("Alien alert!");
            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 => {
                res.send({
                    "message": "Thanks for reporting!"
                });
            }).catch(err => {
                console.log(err);
                sendErrorResponse(res);
            })
        } else {
            res.send({
                "message": "Looks like you are not the first person to encounter aliens in this city! Someone has already reported an alien encounter here!"
            });
        }
    }).catch(err => {
        console.log(err);
        sendErrorResponse(res);
    })
});
app.get('/alien', (req, res) => {
    var city = req.query.city_name;
    // Initializing Catalyst SDK
    var catalystApp = catalyst.initialize(req);
    getDataFromCatalystDataStore(catalystApp, city).then(cityDetails => {
        if (cityDetails.length == 0) {
            res.send({
                "message": "Hurray! No alien encounters in this city yet!",
                "signal": "negative"
            });
        } else {
            res.send({
                "message": "Uh oh! Looks like there are aliens in this city!",
                "signal": "positive"
            });
        }
    }).catch(err => {
        console.log(err);
        sendErrorResponse(res);
    })
});
function getDataFromCatalystDataStore(catalystApp, cityName) {
    return new Promise((resolve, reject) => {
        // Queries the Catalyst Data Store table
        catalystApp.zcql().executeZCQLQuery("Select * from " + tableName + " where " + columnName + "='" + cityName + "'").then(queryResponse => {
            resolve(queryResponse);
        }).catch(err => {
            reject(err);
        })
    });
}
function sendErrorResponse(res) {
    res.status(500);
    res.send({
        "error": "Internal server error occurred. Please try again in some time."
    });
}
app.listen(process.env.X_ZOHO_CATALYST_LISTEN_PORT || 9000, () => {
})
module.exports = app;
{{%/panel_with_adjustment%}}
{{%panel_with_adjustment class="language-xml line-numbers" header="index.html" footer="button" scroll="set-scroll" %}}<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AlientCityAppClient</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"> </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
    <script src="main.js"> </script>
</head>
<body>
    <br>
    <br>
    <center>
        <h1>ALIEN CITY</h1>
    </center>
    <div class="container">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="check-tab" data-toggle="tab" href="#check" role="tab"
                    aria-controls="check" aria-selected="true">Check My City</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="report-tab" data-toggle="tab" href="#report" role="tab" aria-controls="report"
                    aria-selected="false">Report Alien Encounter</a>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="check" role="tabpanel" aria-labelledby="check-tab">
                <br>
                <br>
                <form>
                    <div class="form-group">
                        <label for="city-get-input"> <b>Check if your city has aliens:</b> </label>
                        <input type="text" class="form-control" id="city-get-input" aria-describedby="checkCity"
                            placeholder="Enter City Name">
                    </div>
                    <button type="submit" class="btn btn-primary"
                        onclick="getAlienEncounter();return false;">Check</button>
                </form>
                <br>
                <br>
                <div id="result-container">
                    <div id="result-text">
                    </div>
                    <br>
                    <div id="result-image">
                    </div>
                </div>
                <div id="loader" style="display: none;">
                        <div class="spinner-border" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
            </div>
            <div class="tab-pane fade" id="report" role="tabpanel" aria-labelledby="report-tab">
                <br>
                <br>
                <form>
                    <div class="form-group">
                        <div class="city-post-input">
                            <label for="exampleInputEmail1"> <b>Enter the name of the city where you encountered an alien:</b> </label>
                            <input type="text" class="form-control" id="city-post-input" aria-describedby="cityPost"
                                placeholder="Enter City Name">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary"
                        onclick="postAlienEncounter();return false;">Report</button>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
{{%/panel_with_adjustment%}}

{{%panel_with_adjustment class="language-javascript line-numbers" header="main.js" footer="button" scroll="set-scroll" %}}function postAlienEncounter() {
    debugger;
    var city = $("#city-post-input").val();
    $.ajax({
        url: "/alien",
        type: "post",
        contentType: "application/json",
        data: JSON.stringify({
            "city_name": city
        }),
        success: function (data) {
            alert(data.message);
        },
        error: function (error) {
            alert(error.message);
        }
    });
}
function getAlienEncounter() {
    showLoader();
    var positive = "https://media.giphy.com/media/Y1GYiLui9NHcxVKhdo/giphy.gif";
    var negative = "https://media.giphy.com/media/fsPcMdeXPxSP6zKxCA/giphy.gif";
    var city = $("#city-get-input").val();
    $.ajax({
        url: "/alien?city_name=" + city,
        type: "get",
        success: function (data) {
            console.log(data);
            $("#result-text").text("");
            $("#result-text").text(data.message);
            var imagesrc = negative;
            if (data.signal == 'positive') {
                imagesrc = positive;
            }
            $("#result-image").html("");
            $("#result-image").html("<img src='" + imagesrc + "' />");
            hideLoader();
        },
        error: function (error) {
            alert(error.message);
        }
    });
}
function showLoader()
{
    $("#result-container").hide();
    $("#loader").show();
}
function hideLoader()
{
    $("#loader").hide();
    $("#result-container").show();
}
{{%/panel_with_adjustment%}}

Update the value of the key {{%badge%}}**command**{{%/badge%}} as "**node index.js**" in the {{%badge%}}app-config.json{{%/badge%}} file. This is the {{%link href="/en/serverless/help/appsail/key-concepts/appsail-execution/#startup-commands" %}}startup command{{%/link%}} that is specific for this programming stack and framework.

{{%panel_with_adjustment class="language-json line-numbers" header="app-config.json" footer="button" scroll="set-scroll" %}}{
    "command": "node index.js",
    "buildPath": "/Users/amelia-426/Catalyst/Alien City", // provide your build path
    "stack": "node18",
    "env_variables": {},
    "memory": 256,
    "scripts": {}
}
{{%/panel_with_adjustment%}}

Let’s quickly go through the working of the application:

1. **GET Operation**
    * When you enter a city name in the application to check for a record of previous alien encounters, the onClick event for the **Check** button in {{%badge%}}index.html{{%/badge%}} triggers the {{%badge%}}getAlienEncounter(){{%/badge%}} function defined in {{%badge%}}main.js{{%/badge%}}.
    * This fires an Ajax call to the URL route defined in the {{%badge%}}index.js{{%/badge%}} function.
    * The **GET API** defined in {{%badge%}}index.js{{%/badge%}} then invokes the {{%badge%}}getDataFromCatalystDataStore(){{%/badge%}} function and passes the request query.
    * This function searches for the data in the **Alien City** table in the Data Store by executing a ZCQL query.
    * If a record matching the city name is found in the table, a *positive* signal is sent as the response. Otherwise, a *negative* signal is sent as the response.
    * The client then displays the message that matches the response. A GIF matching the response defined in {{%badge%}}main.js{{%/badge%}} is also displayed.

2. **POST Operation**
    * When you enter a city name in the client to report an alien encounter, the onClick event for the **Report** button in {{%badge%}}index.html{{%/badge%}} triggers the {{%badge%}}postAlienEncounter(){{%/badge%}} function defined in {{%badge%}}main.js{{%/badge%}}.
    * This fires an Ajax call to the URL route defined in the {{%badge%}}index.js{{%/badge%}} function. The POST 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.
    * This function searches for the data in the **Alien City** table in the Data Store by executing a ZCQL query. If the record already exists, a response is sent, which enables the application to display a message the city name is already added.
    * If there are no records for the city name, a new row is created in the **Alien City** 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 the *Logs* component present in the {{%link href="/en/dev-ops" %}}Catalyst DevOps{{%/link%}} service.

<br />

--------------------------------------------------------------------------------
title: "Test the Application"
description: "Create an application and host it on Catalyst using the Catalyst AppSail service and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.667Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city-appsail/express/test-app/"
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="/en/cli/v1/serve-resources/introduction/" %}}test the application{{%/link%}} on a local server and check if everything works 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 {{%badge%}}3001{{%/badge%}}.

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



You can now open the application's localhost URL in a browser to access the Alien City application.


Let’s test the application by entering a city’s name and checking for the history of an alien encounter in the city. Because 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**.


A matching record for this city will not be found in the Data Store, and the application displays a negative response.


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


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


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


Next, let’s search for this city in the application and check if it fetches this record from the Data Store. Click the **Check My City** tab in the application and enter the name of the city that you just reported. Here, we enter "**Monaco**." Click **Check**.


The application displays a positive response.

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


If this setup is working correctly, you can deploy the application.

<br />

--------------------------------------------------------------------------------
title: "Deploy the Application"
description: "Create an application and host it on Catalyst using the Catalyst AppSail service and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.667Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city-appsail/express/deploy-app/"
service: "All Services"
related:
- Deploy CLI Resources (/en/cli/v1/deploy-resources/introduction/)
- AppSail (/en/serverless/help/appsail/introduction/)

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


# Deploy the Application

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

The URL of the AppSail service generated by Catalyst is displayed.


The application is now deployed to the Catalyst console.

Now, if you navigate to the *AppSail* component located under the *Serverless* section, you will see your service has been deployed.


Click the **Alien City service** and you will be able to view the access URL generated by Catalyst. In this section you will also have access to a live dashboard denoting the number of instances the Alien City service has spawned at any given moment. Using this section you will also be able configure and manage the AppSail service. You can find out more about this {{%link href="/en/serverless/help/appsail/console/introduction/" %}}here{{%/link%}}.


You can now access the application using the AppSail URL generated by Catalyst.


<br />