# NodeJS



--------------------------------------------------------------------------------
title: "Introduction"
description: "Configure a Catalyst Event Function and associate it with a Rule in Catalyst Signals that will send automated onboarding emails to the application users when they sign up."
last_updated: "2026-03-18T07:41:08.678Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/event-app/nodejs/introduction/"
service: "All Services"
related:
- Project Directory Structure (/en/cli/v1/project-directory-structure/introduction/)
- Node.js SDK (/en/sdk/nodejs/v2/overview/)

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



# Event App

### Introduction

This tutorial will help you build an application called **Event App** in the **Node.js** runtime. In this application, you will be employing an event-driven architecture using {{%link href="/en/signals/" %}}Catalyst Signals{{%/link%}}. Additionally, you will also be using the {{%link href="/en/serverless/" %}}Catalyst Serverless{{%/link%}} and {{%link href="/en/cloud-scale/" %}}Catalyst Cloud Scale{{%/link%}} services to handle other required functionalities expected of your application. The client components of the application are going to be a {{%link href="/en/cli/v1/initialize-resources/initialize-client/#basic-client-applications" %}}Basic Web app{{%/link%}}. 

The client application will appear in the following manner to the end-user.

<br />

The *Event App* utilizes components from the following Catalyst services:

1. {{%link href="/en/serverless/getting-started/introduction/" %}}**Catalyst Serverless**{{%/link%}}:
    - {{%link href="/en/serverless/help/functions/event-functions" %}}**Event Function**{{%/link%}}: The Event function coded is in the **Node.js** programming environment. It sends an automated onboarding email with a link to access the Event App to email addresses configured in Catalyst.

2. {{%link href="/en/cloud-scale/getting-started/introduction/" %}}**Catalyst Cloud Scale**{{%/link%}}:
    - {{%link href="/en/cloud-scale/help/authentication/introduction/" %}}**Authentication**{{%/link%}}: To set up an {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/introduction/" %}}Embedded Authentication type{{%/link%}} for this application that allows end-users to sign up and login to the app. You will also be configuring the {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-zoho-social-login" %}}Zoho Social Login{{%/link%}} to facilitate Single Sign-Ons.
    - {{%link href="/en/cloud-scale/help/mail/introduction" %}}**Mail**{{%/link%}}: To set up the sender email address. This email address will be used to send the required emails to the end-users.
    - {{%link href="/en/cloud-scale/help/web-client-hosting/introduction/" %}}**Web Client Hosting**{{%/link%}}: To host and manage the *Event App*.

3. {{%link href="/en/signals/" %}}**Catalyst Signals**{{%/link%}}: This service will allow you to apply an **event-driven architecture** to your application. We will be using this service to create a {{%link href="/en/signals/help/publishers/create-publisher/catalyst-publishers/" %}}Catalyst Publisher{{%/link%}}, and we will configure a Rule that will trigger a '*product tour*' email in the event a '*user confirmation*' action occurs.

  

You will use the {{%link href="https://console.catalyst.zoho.com/" %}}Catalyst web console{{%/link%}} and the {{%link href="https://docs.catalyst.zoho.com/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 Logic

The business logic we are going to be implementing using the *Event App* is as follows:

* The end-user will first be presented with the Sign Up/Login page implemented using Embedded Authentication.
* Once the end-user provides the required details and clicks the Get Started button, an email will be sent to their entered email address instructing them to confirm their account.
* Once the user clicks the link present in the email, and they set their password, their account will be confirmed, and they will be directed to a page in the application instructing them to check their email for a product tour.
* Once the User Confirmation event occurs, the event function will be triggered.
* The event function will then trigger the mail component, and a product tour email will be sent to the end-user's inbox.
* They can click the link in the second email, and they will be directed to the configured page.



--------------------------------------------------------------------------------
title: "Prerequisites"
description: "Configure a Catalyst Event Function and associate it with a Rule in Catalyst Signals that will send automated onboarding emails to the application users when they sign up."
last_updated: "2026-03-18T07:41:08.678Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/event-app/nodejs/prerequisites/"
service: "All Services"
related:
- CLI Command Reference (/en/cli/v1/cli-command-reference/)
- Install CLI (/en/getting-started/installing-catalyst-cli/)
- Login CLI (/en/cli/v1/login/login-from-cli/)

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


# Prerequisites

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

1. {{%bold%}}Catalyst CLI{{%/bold%}}: 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.<br /> You must perform these actions:
   1. {{%bold%}}Install Catalyst CLI{{%/bold%}}: 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.
   2. {{%bold%}}Login Catalyst CLI{{%/bold%}}: 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. {{%bold%}}Any IDE tool for Node.js and client code development{{%/bold%}}: Download and install an IDE of your choice in your system. You can use any IDE to work with the function and the client code. Some popular choices include Visual Studio Code, IntelliJ IDEA, and Sublime Text.

{{%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: "Configure a Catalyst Event Function and associate it with a Rule in Catalyst Signals that will send automated onboarding emails to the application users when they sign up."
last_updated: "2026-03-18T07:41:08.678Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/event-app/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's {{%link href="/en/getting-started/catalyst-projects" %}}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 {{%bold%}}Create a new Project{{%/bold%}}.
  <br />

2. Enter the project's name as "{{%bold%}}EventApp{{%/bold%}}", and click **Create**.
  <br />

3. Your project will be created and opened. You can access the project at any time by clicking **Access Project**.
  <br />


--------------------------------------------------------------------------------
title: "Configure Authentication"
description: "Configure a Catalyst Event Function and associate it with a Rule in Catalyst Signals that will send automated onboarding emails to the application users when they sign up."
last_updated: "2026-03-18T07:41:08.678Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/event-app/nodejs/configure-authentication/"
service: "All Services"
related:
- Catalyst Authentication (/en/cloud-scale/help/authentication/introduction/)
- Embedded Authentication (/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/introduction/)
- Social Logins (/en/cloud-scale/help/authentication/social-logins/introduction/)
- Public Signup (/en/cloud-scale/help/authentication/public-signup/)
- User Management (/en/cloud-scale/help/authentication/user-management/introduction/)
- Email Templates (/en/cloud-scale/help/authentication/social-logins/introduction/)
- Whitelisting (/en/cloud-scale/help/authentication/whitelisting/introduction/)

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


# Configure Authentication

Let's configure {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/introduction/" %}}Embedded Authentication{{%/link%}} to allow end-users to sign up to the application.

To configure Embedded Authentication:

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

2. Navigate to the **Authentication** component present under *Security & Identity* and click the **Set Up** button present in the **Native Catalyst Authentication** section.
    <br />

3. Select **Embedded Authentication** and click **Next**.
    <br />

4. We will be embedding these scripts in our HTML file, which we will cover in future steps. For now, to enable end-user sign ups, scroll down and click the **Public Signup** toggle.
    <br />

5. Click **Yes, Proceed** after going through the information presented in the pop-up.
    <br />

{{%note%}}{{%bold%}}Note:{{%/bold%}} You can learn more about Public Signup from this {{%link href="/en/cloud-scale/help/authentication/public-signup/" %}}help documentation{{%/link%}}.{{%/note%}}

6. Now, you will be able to enable **Social Logins**. This will allow your users to sign up to your application using their common social platform accounts. Click on the **Zoho social login**, and click **Enable** once you enter the application's name as the **EventApp**.
    <br />

{{%note%}}{{%bold%}}Notes:{{%/bold%}}<br />

* You can learn more about {{%bold%}}Social Logins{{%/bold%}} from this {{%link href="/en/cloud-scale/help/authentication/social-logins/introduction/" %}}help documentation{{%/link%}}.

* You can also find detailed steps you need to implement to generate the required {{%badge%}}Client ID{{%/badge%}} and {{%badge%}}Client Secret{{%/badge%}} credentials from this {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/" %}}help documentation{{%/link%}}.{{%/note%}}

7. Click **Next**.
    <br />

8. We do not require any of the configurations present in the *Additional Settings* section. Click **Finish** to enable Embedded Authentication for your application.
    <br />

{{%note%}}{{%bold%}}Note:{{%/bold%}} You can learn more about {{%bold%}}Whitelisting{{%/bold%}} from this {{%link href="/en/cloud-scale/help/authentication/whitelisting/introduction/" %}}help documentation{{%/link%}}.{{%/note%}}

Embedded Authentication has been enabled for your application.
<br />

{{%note%}}{{%bold%}}Notes:{{%/bold%}}<br />

* You can learn more about {{%bold%}}Embedded Authentication{{%/bold%}} from this {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/introduction/" %}}help documentation{{%/link%}}.

* The {{%bold%}}User Management{{%/bold%}}, {{%bold%}}Authentication Type{{%/bold%}}, {{%bold%}}Whitelisting{{%/bold%}}, and {{%bold%}}Email Templates{{%/bold%}} sections are not required for the purposes of this application. However, you can still learn all about them from the extensive documentation present {{%link href="/en/cloud-scale/help/authentication/introduction/" %}}here{{%/link%}}.{{%/note%}}

--------------------------------------------------------------------------------
title: "Configure Sender Email Address"
description: "Configure a Catalyst Event Function and associate it with a Rule in Catalyst Signals that will send automated onboarding emails to the application users when they sign up."
last_updated: "2026-03-18T07:41:08.678Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/event-app/nodejs/configure-email-address/"
service: "All Services"
related:
- Catalyst Mail (/en/cloud-scale/help/mail/introduction)

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




# Configure Sender Email Address

In this application, we are going to be sending the product tour emails from within the application to the end-user using the Catalyst Cloud Scale {{%link href="/en/cloud-scale/help/mail/introduction/" %}}Mail{{%/link%}} component.
You can configure the email address as follows:

To configure an appropriate sender email address:

1. Navigate to the **Mail** component present under the *Notify* section in the *Cloud Scale* section of the console.
  <br />

2. Enter the *Display Name* as **Onboarding**, and enter the email address you are going to use to send out emails to your end-users. Click **Add Email**.
  <br />

The email address will be added.
<br />
But, to use it and to ensure that the email address used is secure and valid, you will need to verify it.

3. Click the **Click to confirm** button, and enter the code sent to the entered email address.
  <br />

The email address will be confirmed.
<br />

Next step is to verify the domain.

4. Click the **Domain** tab, and click **Add Domain**.
  <br />

{{%note%}}{{%bold%}}Note:{{%/bold%}} If you are using a public email service provider such as {{%bold%}}Gmail{{%/bold%}} or {{%bold%}}Outlook{{%/bold%}} for your sender address, you can skip this process. Domain validation is required only when you use a sender email hosted on a private or custom domain. For more details, refer to the {{%link href="/en/cloud-scale/help/mail/domains/" %}}Help documentation{{%/link%}}.{{%/note%}}

5. Re-enter the email address you are going to be using to send out emails and click **Create**.
  <br />

Since the email address has already been confirmed, it will be automatically verified.
<br />

With the email address confirmed and the domain verified, the Mail component has been successfully configured for this application.
<br />

This email can now be used to send out the required mails to the end-users of your application.

{{%note%}}{{%bold%}}Note:{{%/bold%}} You can learn more about the {{%bold%}}Mail{{%/bold%}} component from this {{%link href="/en/cloud-scale/help/mail/introduction/" %}}help documentation{{%/link%}}.{{%/note%}}

--------------------------------------------------------------------------------
title: "Configure a Publisher"
description: "Configure a Catalyst Event Function and associate it with a Rule in Catalyst Signals that will send automated onboarding emails to the application users when they sign up."
last_updated: "2026-03-18T07:41:08.678Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/event-app/nodejs/configure-publisher/"
service: "All Services"
related:
- Catalyst Signals (/en/signals)
- Signals Publisher (/en/signals/help/publishers/create-publisher/catalyst-publishers/)
- Signals Events (/en/signals/help/events/)

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


# Configure a Publisher

Now, you will need to configure a {{%link href="/en/signals/help/publishers/create-publisher/catalyst-publishers/" %}}Catalyst Publisher{{%/link%}} in the {{%link href="/en/signals/help/events/" %}}Signals{{%/link%}} service to configure the user-confirmation action as the {{%link href="/en/signals/help/events/" %}}Event{{%/link%}}. Since this action is being handled through **Catalyst Authentication**, we are going to implement a **Catalyst Publisher**.

{{%note%}}{{%bold%}}Notes:{{%/bold%}}<br />

* You can learn more about {{%bold%}}Publishers{{%/bold%}} from this {{%link href="/en/signals/help/publishers/key-aspects/" %}}help documentation{{%/link%}}.

* You can learn more about implementing other types of Publishers from this {{%link href="/en/signals/help/publishers/create-publisher/zoho-publishers/" %}}help documentation{{%/link%}}.{{%/note%}}

To create a Catalyst Publisher:

1. Navigate to the *Catalyst Signals* service and click **Start Exploring**.
    <br />

2. Navigate to the **Publishers** component and click **Create Publisher**.
    <br />

3. Click the **Catalyst Publishers** tab, and select **CloudScale Authentication**.
    <br />

4. Choose your current organization from the **Organization** drop-down, and the **Publisher Name** and **API Name** fields will be auto-populated.
    <br />

{{%note%}}{{%bold%}}Note:{{%/bold%}} Ensure you select the organization in which you have created your project.{{%/note%}}

5. Select your current project from the **Project** drop-down.
    <br />

6. You can provide a suitable description and click **Save**.
    <br />

The required **Publisher** has been configured for your application. You will be able to see that Catalyst has automatically generated three events. Later, we will be configuring a rule for the **User Confirmation** event.
<br />

You can click the **Show Sample Payload** button present in the **User Confirmation** section to view the structure of the payload.
<br />

Similarly, you can click the **Show Schema** button to view the schema of the event.
<br />

--------------------------------------------------------------------------------
title: "Initialize The Project"
description: "Configure a Catalyst Event Function and associate it with a Rule in Catalyst Signals that will send automated onboarding emails to the application users when they sign up."
last_updated: "2026-03-18T07:41:08.679Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/event-app/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

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.

For this application, we will initialize an {{%link href="/en/serverless/help/functions/event-functions/" %}}Event Function{{%/link%}}, which will contain the logic of the action that is required to occur once the event happens, and a {{%link href="/en/cli/v1/initialize-resources/initialize-client/#basic-client-applications" %}}Basic web app{{%/link%}} as the client component.

{{%note%}}{{%bold%}}Note:{{%/bold%}} Ensure that you enter the function's package name or class name exactly as instructed, because the application's code contains the same name.{{%/note%}}

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

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

3. Navigate using the **arrow keys**, 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.
    <br />
{{%note%}}{{%bold%}}Note:{{%/bold%}} You can find out more about Catalyst’s multi-org portal feature from this {{%link href="/en/getting-started/catalyst-projects/#access-the-multi-org-portal" %}}help document{{%/link%}}.{{%/note%}}

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 **EventApp** from the list and press **Enter**.
    <br />

5. Navigate using the arrow keys and select **Functions**, **Client** using the space bar. Press **Enter** to initialize.
    <br />

6. The CLI will initiate the function setup. Select **Event** as the function type for your Event function.
    <br />

7. Select the latest runtime of *Node.js* as the function stack.
    <br />

8. Enter "{{%badge%}}event_app{{%/badge%}}" as the package name, "{{%badge%}}index.js{{%/badge%}}" as the entry point, and your email address as the author, then press **Enter**. Alternatively, you can 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.
    <br />

The CLI will now initiate the client setup.


9. Select **Basic web app** and press **Enter** to initialize your client as a {{%link href="/en/cli/v1/initialize-resources/initialize-client/#basic-client-applications" %}}basic web app{{%/link%}}.
    <br />

10. Enter a name for your client package and press **Enter**. For the purposes of this tutorial, we are naming our client package "{{%badge%}}EventAppClient{{%/badge%}}". You can use the same of provide a name of your choice.
    <br />

The Catalyst initialization is now complete.

The project directory 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="/en/cli/v1/project-directory-structure/catalyst-json/" %}}{{%badge%}}catalyst.json{{%/badge%}}{{%/link%}} configuration file and a hidden {{%badge%}}.catalystrc{{%/badge%}} file.

The structure of your project directory should now appear as shown below:
<br />




--------------------------------------------------------------------------------
title: "Code Your Event Function"
description: "Configure a Catalyst Event Function and associate it with a Rule in Catalyst Signals that will send automated onboarding emails to the application users when they sign up."
last_updated: "2026-03-18T07:41:08.679Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/event-app/nodejs/configure-function/"
service: "All Services"
related:
- Event Functions (/en/serverless/help/functions/event-functions/)
- Functions Directory Structure (/en/cli/v1/project-directory-structure/functions-directory)
- Web Client Hosting (/en/cloud-scale/help/web-client-hosting/introduction/)

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



# Code Your Event Function

Let's now configure the Event function, {{%badge%}}event_app{{%/badge%}}, that will send automated onboarding emails to the user with a link to a form. This form enables the user to provide their personal details to register for the client application. This function will be executed when the event listener triggers it.

The {{%link href="/en/cli/v1/project-directory-structure/functions-directory" %}}functions directory{{%/link%}}, {{%badge%}}functions/event_app{{%/badge%}} contains:

* The {{%badge%}}index.js{{%/badge%}} main function file
* The {{%badge%}}catalyst-config.json{{%/badge%}} configuration file
* Node modules
* {{%badge%}}{{%link href="https://docs.npmjs.com/files/package.json" %}}package.json{{%/link%}}{{%/badge%}} and {{%badge%}}{{%link href="https://docs.npmjs.com/configuring-npm/package-lock-json.html" %}}package-lock.json{{%/link%}}{{%/badge%}} dependency files

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

Copy the Node.js code and paste it in {{%badge%}}index.js{{%/badge%}} in the {{%badge%}}functions/event_app{{%/badge%}} directory of your project, and save the file. You can use any IDE of your choice to work with the application's files.

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

{{% panel_with_adjustment header="index.js" footer="button" class="language-javascript line-numbers" scroll="set-scroll" %}}const catalyst = require("zcatalyst-sdk-node");
const fs = require("fs");
const path = require("path");
module.exports = (event, context) => {
  try {
    const app = catalyst.initialize(context);
    let eventData = event.getRawData();
    let userEmailId = eventData.email;
    let email = app.email();
    let config = {
      from_email: "emmy@zylker.com", // Replace this with the email you configured
      to_email: userEmailId,
      subject: "We welcome you on board!",
      content: fs.readFileSync(path.join(__dirname, "invite.html")).toString(),
      html_mode: true,
    };
    let mailPromise = email.sendMail(config);
    mailPromise.then((mailObject) => {
      console.log(mailObject);
      context.closeWithSuccess();
    });
  } catch (err) {
    console.error(err);
    context.closeWithFailure();
  }
};

{{% /panel_with_adjustment %}} 

{{%note%}}{{%bold%}}Note:{{%/bold%}} Replace the value of {{%badge%}}from_email{{%/badge%}} in {{%bold class="bold-primary"%}}line 11{{%/bold%}} with the email address that you configured for your application through Catalyst Mail previously.{{%/note%}}

<br />


### Deploy Your Project

You need to deploy your project to the Catalyst console to ensure the event function and the application URL are available to use while configuring the {{%link href="/en/signals/help/rules/key-aspects/" %}}Rule{{%/link%}}.

{{%note%}}{{%bold%}}Note:{{%/bold%}} We will be deploying the entire project to the Catalyst console one more time once we configure the client for your application and complete testing the application.{{%/note%}}

To {{%link href="/en/cli/v1/deploy-resources/introduction/" %}}deploy the project to the console{{%/link%}}, enter the following command in your CLI and execute it.
{{%cli%}}catalyst deploy{{%/cli%}}

<br />

The project has been deployed to the console.

You can copy the application URL from the CLI, or you can copy it from the {{%link href="/en/cloud-scale/help/web-client-hosting/introduction/" %}}Web Client Hosting{{%/link%}} component.

<br />

{{%note%}}{{%bold%}}Note:{{%/bold%}} We will learn more about deploying your application to the console and to production when we reach {{%bold%}}Step 6{{%/bold%}} of the tutorial. You can also learn more about deploying catalyst resources to the console form this {{%link href="/en/cli/v1/deploy-resources/introduction/" %}}help documentation{{%/link%}}.{{%/note%}}


### Configure Your Product Tour

Now, create a html file in the {{%badge%}}functions/event_app{{%/badge%}} directory and name it {{%badge%}}invite.html{{%/badge%}}.

The {{%badge%}}invite.html{{%/badge%}} page will contain the product tour.

Copy the following code and paste it in the {{%badge%}}invite.html{{%/badge%}} file.

{{% panel_with_adjustment header="invite.html" footer="button" class="language-xml line-numbers" scroll="set-scroll" %}}<div class="mT" style="background-color: #f2f2f2;padding: 4%;">
    <div style="width: 100%;max-width: 750px; margin: 0px auto;padding-bottom:10px;">
        <img src="" alt="">
    </div>
    <div
        style="width: 100%;max-width: 750px;font-size: 16px; margin: 0 auto;background: #fff; font-family: lucida grande,lucida sans,lucida sans unicode,arial,helvetica,verdana,sans-serif;">
        <table style="display: table;width: 100%;" cellspacing="0" cellpadding="0">
            <tr>
                <td style="background-color: #e80f28;height: 2px;width:25%;"> </td>
                <td style="background-color: #e80f28;height: 2px;width:25%;"> </td>
                <td style="background-color: #e80f28;height: 2px;width:25%;"> </td>
                <td style="background-color: #e80f28;height: 2px;width:25%;"> </td>
            </tr>
        </table>
        <div style="padding: 8% 5%;border: 1px solid #f3f3f3;line-height: 1.625em;">
            <div style="font-size: 0.8125em;color: #3c3c3c;">Hey there!</div>
            <br />
            <div style="font-size: 0.8125em;color:#5d5d5d; line-height: 1.625em;padding-bottom: 20px;">
            </div>
            Welcome to Event App! We have a range of interesting and innovative features for you to explore. Please take the time to read through our product tour document.
            <div style="font-size: 0.8125em;color: #5d5d5d;line-height: 1.625em;padding-bottom: 20px;">
            <a href="https://eventapp-779513891.development.catalystserverless.com/app/tour.html">Take the tour!</a> <!-- Replace here -->
            </div>
            <div style="font-size: 0.8125em;color: #5d5d5d;line-height: 1.625em;padding-bottom: 20px;">
                If the link doesn't work, please copy the following address and paste it in your browser.
            </div>
            <div style="font-size: 0.8125em; line-height: 1.625em; width: 100%; padding:10px 0px; background-color: rgb(241,241,241);border: rgb(253,253,253) solid 1.0px;margin: 0.0px auto;">
                <div style="margin: 0.0px 10.0px;color: rgb(0,0,255);">
                 <a href="https://eventapp-779513891.development.catalystserverless.com/app/tour.html"> https://eventapp-779513891.development.catalystserverless.com/app/tour.html</a> <!-- Replace here -->
                </div>
            </div>
            <br />
            <div style="font-size: 0.8125em;color: #5d5d5d;line-height: 1.625em;">
                <div>Regards,</div>
                <div>EventApp Team</div>
            </div>
        </div>
    </div>
</div>

{{% /panel_with_adjustment %}} 

{{%note%}}{{%bold%}}Note:{{%/bold%}} Replace "{{%bold%}}https:<span>//eventapp-779513891.development.catalystserverless.com{{%/bold%}}" in the code with the Project Domain Name you generated for your project in {{%bold class="bold-primary"%}}lines 22 and 29{{%/bold%}}.{{%/note%}}

The Event function is now configured.

--------------------------------------------------------------------------------
title: "Code Your Client"
description: "Configure a Catalyst Event Function and associate it with a Rule in Catalyst Signals that will send automated onboarding emails to the application users when they sign up."
last_updated: "2026-03-18T07:41:08.679Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/event-app/nodejs/configure-client/"
service: "All Services"
related:
- Client Directory (/en/cli/v1/project-directory-structure/introduction)

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



# Code Your Client

Let’s now configure the client component. The client contains the signup page and the background script which obtains the data from the user and passes it on to Catalyst.

The {{%link href="/en/cli/v1/project-directory-structure/client-directory"%}}client directory{{%/link%}} by default contains:

* The {{%badge%}}index.html{{%/badge%}} file for the HTML code of the frontend application. It will also contain the Web SDK required to implement Embedded Authentication.
* The {{%badge%}}main.css{{%/badge%}} for the CSS code
* The {{%badge%}}main.js{{%/badge%}} file for the JavaScript code
* The {{%badge%}}client-package.json{{%/badge%}} configuration file
* We will be creating two new files in the {{%badge%}}EventApp/client/{{%/badge%}}:
    - {{%badge%}}tour.html{{%/badge%}}: Will contain the page that will be shown to your end-users once they confirm their account.
    - {{%badge%}}redirect.html{{%/badge%}}: Will contain the page that the end-users will be redirected to once they sign up.

We will be creating two new files in this directory.

We will be coding {{%badge%}}index.html{{%/badge%}}, {{%badge%}}main.js{{%/badge%}}, {{%badge%}}main.css{{%/badge%}}, {{%badge%}}tour.html{{%/badge%}}, and {{%badge%}}redirect.html{{%/badge%}} as well as the new files.

{{%note%}} {{%bold class="bold-primary"%}}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 in the respective files located in the {{%badge%}}client/{{%/badge%}} directory of your project using an IDE and save the files.

{{% panel_with_adjustment header="index.html" footer="button" class="language-xml line-numbers" scroll="set-scroll" %}}<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>signup - label</title>
    <script src="https://www.zoho.com/crm/js/js-lib-file.js"> </script>
   <script src="https://static.zohocdn.com/catalyst/sdk/js/4.5.0-beta/catalystWebSDK.js"> </script>
<script src="/__catalyst/sdk/init.js"> </script>
<script>
  catalyst.auth.signIn("login", {});
</script>
<style>
        *,
        *:before,
        *:after {
            box-sizing: border-box;
        }
        html {
            overflow-y: scroll;
        }
        body {
            background: #c1bdba;
            font-family: 'Titillium Web', sans-serif;
        }
        a {
            text-decoration: none;
            color: #1ab188;
            transition: .5s ease;
        }
        a:hover {
            color: #179b77;
        }
        .form {
            background: rgba(19, 35, 47, 0.9);
            padding: 40px;
            max-width: 600px;
            margin: 40px auto;
            border-radius: 4px;
            box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
        }
        .tab-group {
            list-style: none;
            padding: 0;
            margin: 0 0 40px 0;
        }
        .tab-group:after {
            content: "";
            display: table;
            clear: both;
        }
        .tab-group li a {
            display: block;
            text-decoration: none;
            padding: 12px;
            background: rgba(160, 179, 176, 0.25);
            color: #a0b3b0;
            font-size: 20px;
            float: left;
            width: 50%;
            text-align: center;
            cursor: pointer;
            transition: .5s ease;
        }
        .tab-group li a:hover {
            background: #179b77;
            color: #ffffff;
        }
        .tab-group .active a {
            background: #1ab188;
            color: #ffffff;
        }
        .tab-content>div:last-child {
            display: none;
        }
        h1 {
            text-align: center;
            color: #ffffff;
            font-weight: 600;
            margin: 0 0 30px;
        }
        label {
            position: absolute;
            -webkit-transform: translateY(6px);
            transform: translateY(6px);
            left: 13px;
            top: 8px;
            color: rgba(255, 255, 255, 0.5);
            transition: all 0.25s ease;
            -webkit-backface-visibility: hidden;
            pointer-events: none;
            font-size: 16px;
        }
        label .req {
            margin: 2px;
            color: #1ab188;
        }
        label.active {
            -webkit-transform: translateY(50px);
            transform: translateY(50px);
            left: 2px;
            font-size: 14px;
        }
        label.active .req {
            opacity: 0;
        }
        label.highlight {
            color: #ffffff;
        }
        input,
        textarea {
            font-size: 16px;
            display: block;
            width: 100%;
            /* height: 100%; */
            padding: 12px 10px;
            background: none;
            background-image: none;
            border: 1px solid #a0b3b0;
            color: #ffffff;
            border-radius: 0;
            box-sizing: border-box;
            transition: border-color .25s ease, box-shadow .25s ease;
        }
        input:focus,
        textarea:focus {
            outline: 0;
            border-color: #1ab188;
        }
        textarea {
            border: 2px solid #a0b3b0;
            resize: vertical;
        }
        .field-wrap {
            position: relative;
            margin-bottom: 40px;
        }
        .top-row:after {
            content: "";
            display: table;
            clear: both;
        }
        .top-row>div {
            float: left;
            width: 48%;
            margin-right: 4%;
        }
        .top-row>div:last-child {
            margin: 0;
        }
        .button {
            border: 0;
            outline: none;
            border-radius: 0;
            padding: 14px 0;
            font-size: 20px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .1em;
            background: #1ab188;
            color: #ffffff;
            transition: all 0.5s ease;
            -webkit-appearance: none;
        }
        .button:hover,
        .button:focus {
            background: #179b77;
        }
        .button-block {
            display: block;
            width: 100%;
        }
        .forgot {
            margin-top: -20px;
            text-align: right;
        }
        .h-65 {
            height: 65vh;
        }
</style>
</head>
<body>
    <div class="form">
        <ul class="tab-group">
            <li class="tab active"> <a href="#signup">Sign Up</a> </li>
            <li class="tab"> <a href="#login">Log In</a> </li>
        </ul>
        <div class="tab-content">
            <div id="signup">
                <h1>Sign up to Continue to EventApp</h1>
                <form>
                    <div class="top-row">
                        <div class="field-wrap">
                            <label> First Name<span class="req">*</span> </label>
                            <input id="firstname" type="text" required autocomplete="off" />
                        </div>
                        <div class="field-wrap">
                            <label> Last Name<span class="req">*</span> </label>
                            <input id="lastname" type="text" required autocomplete="off" />
                        </div>
                    </div>
                    <div class="field-wrap">
                        <label> Email Address<span class="req">*</span> </label>
                        <input id="email" type="email" required autocomplete="off" />
                    </div>
                    <button onclick="signupAction(this)" class="button button-block" />
                    Get Started
                    </button>
                </form>
            </div>
            <div id="login" class="h-65">
            </div>
        </div>
        <!-- tab-content -->
    </div>
    <!-- /form -->
    <script src="main.js"> </script>
    <script>
        $(document).ready(function () {
            $('.form').find('input, textarea').on('focus', function (e) {
                var $this = $(this),
                    label = $this.prev('label');
                label.addClass('active highlight');
            });
 
            $('.form').find('input, textarea').on('blur', function (e) {
                var $this = $(this),
                    label = $this.prev('label');
                if ($this.val() == '') {
                    label.removeClass('active highlight');
                } else {
                    label.removeClass('highlight');
                }
            });
            $('.tab a').on('click', function (e) {
                e.preventDefault();
                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active');
                target = $(this).attr('href');
                $('.tab-content > div').not(target).hide();
                $(target).fadeIn(600);
            });
        });
</script>
</body>
</html>

{{% /panel_with_adjustment %}}

<br />

{{% panel_with_adjustment header="main.js" footer="button" class="language-javascript line-numbers" scroll="set-scroll" %}}function signupAction(ele) {
    var firstName = document.getElementById("firstname").value;
    var lastName = document.getElementById("lastname").value
    var email = document.getElementById("email").value;
    var data = {
        "first_name": firstName,
        "last_name": lastName,
        "email_id": email,
        "platform_type": "web"
    };
    var auth = catalyst.auth;
    var signupPromise = auth.signUp(data);
    signupPromise
        .then((response) => {
            console.log(response.content);
        })
        .catch((err) => {
            console.log(err);
        });
}
{{% /panel_with_adjustment %}}

<br />

{{% panel_with_adjustment header="main.css" footer="button" class="language-css line-numbers" scroll="set-scroll" %}}html,
body {
    scroll-behavior: smooth;
    -webkit-scroll-behaviour: smooth;
}

.container {
    max-width: 960px;
}

.site-header {
    background-color: rgba(0, 0, 0, .85);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

.site-header a {
    color: #999;
    transition: ease-in-out color .15s;
}

.site-header a:hover {
    color: #fff;
    text-decoration: none;
}

.product-device {
    position: absolute;
    right: 10%;
    bottom: -30%;
    width: 300px;
    height: 540px;
    background-color: #333;
    border-radius: 21px;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

.product-device::before {
    position: absolute;
    top: 10%;
    right: 10px;
    bottom: 10%;
    left: 10px;
    content: "";
    background-color: rgba(255, 255, 255, .1);
    border-radius: 5px;
}

.product-device-2 {
    top: -25%;
    right: auto;
    bottom: 0;
    left: 5%;
    background-color: #e5e5e5;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

.flex-equal>* {
    -ms-flex: 1;
    -webkit-box-flex: 1;
    flex: 1;
}

@media (min-width: 768px) {
    .flex-md-equal>* {
        -ms-flex: 1;
        -webkit-box-flex: 1;
        flex: 1;
    }
}

.overflow-hidden {
    overflow: hidden;
}
{{% /panel_with_adjustment %}}

<br />

{{% panel_with_adjustment header="tour.html" footer="button" class="language-xml line-numbers" scroll="set-scroll" %}}<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
   <title>Welcome to Eventapp</title>
   <!-- Bootstrap core CSS -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <!-- Custom styles -->
  <link href="product.css" rel="stylesheet">
</head>
<body>
   <nav class="site-header sticky-top py-1">
      <div class="container d-flex flex-column flex-md-row justify-content-center">
         <a class="py-2 d-none d-md-inline-block" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="d-inline-block align-self-center">
          <circle cx="12" cy="12" r="10"> </circle>
          <line x1="14.31" y1="8" x2="20.05" y2="17.94"> </line>
          <line x1="9.69" y1="8" x2="21.17" y2="8"> </line>
          <line x1="7.38" y1="12" x2="13.12" y2="2.06"> </line>
          <line x1="9.69" y1="16" x2="3.95" y2="6.06"> </line>
          <line x1="14.31" y1="16" x2="2.83" y2="16"> </line>
          <line x1="16.62" y1="12" x2="10.88" y2="21.94"> </line>
        </svg>
      </a>
        </div>
     </nav>
   <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
      <div class="col-md-5 p-lg-5 mx-auto my-5">
         <h1 class="display-4 font-weight-normal">Welcome to Event App</h1>
         <p class="lead font-weight-normal">Your one-stop destination to create, organize, and manage events!</p>
         <a class="btn btn-outline-secondary" href="#features">Features</a>
        </div>
      <div class="product-device box-shadow d-none d-md-block"> </div>
      <div class="product-device product-device-2 box-shadow d-none d-md-block"> </div>
     </div>
   <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3" id="features">
      <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
         <div class="my-3 py-3">
            <h2 class="display-5">Trouble-free event management experience</h2>
            <p class="lead">Event App makes sure you have a seamless and an experience in organizing events by
          automating your tasks</p>
           </div>
         <div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
      </div>
        </div>
      <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
         <div class="my-3 p-3">
            <h2 class="display-5">Create and manage events of all types</h2>
            <p class="lead">Create events, group them in categories, customize them and add details as you need</p>
           </div>
         <div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"> </div>
        </div>
     </div>
   <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
      <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
         <div class="my-3 p-3">
            <h2 class="display-5">Invite people and keep track of their RSVPs</h2>
            <p class="lead">Invite people through various platforms to your events, record their RSVPs and obtain a
          final count of the attendees to your events</p>
           </div>
         <div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"> </div>
        </div>
      <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
         <div class="my-3 py-3">
            <h2 class="display-5">Customize your event invites in your own creative ways</h2>
            <p class="lead">Embedd images, videos, and links in your event invitations, and customize the designs of the
          event invites based on their contexts</p>
           </div>
         <div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
      </div>
        </div>
     </div>
   <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
      <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
         <div class="my-3 py-3">
            <h2 class="display-5">Integrate Event App with various social media platforms</h2>
            <p class="lead">Share your events on Facebook, Twitter, Instagram, Yelp, LinkedIn and other social media
          platforms</p>
           </div>
         <div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
      </div>
        </div>
      <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
         <div class="my-3 py-3">
            <h2 class="display-5">Track sales analytics and performances of your events</h2>
            <p class="lead">Event App also provides you reports and statistics of your event performances for your
          convenience</p>
           </div>
         <div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
      </div>
        </div>
     </div>
   <footer class="container-fluid py-5">
      <div class="row">
         <div class="col-md-7 p-lg-5 mx-auto text-center">
            <h3 class="display-6 font-weight-normal">Get started with Event App today!</h3>
           </div>
        </div>
     </footer>
</body>
</html>

{{% /panel_with_adjustment %}}

<br />


{{% panel_with_adjustment header="redirect.html" footer="button" class="language-xml line-numbers"scroll="set-scroll" %}}<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>redirect.html</title>
</head>
<body>
    <h2>Please check your email for a product tour</h2>
</body>
</html>

{{% /panel_with_adjustment %}}

<br />

Let us quickly discuss the client files:

* {{%badge%}}**index.html**{{%/badge%}}: Includes the web SDK to implement Embedded Authentication.

* {{%badge%}}**main.js**{{%/badge%}}: Contains the script for the sign-up page. This obtains the data from the form on the client page and passes it on to the event listener that listens for the user sign-up event.

* {{%badge%}}**tour.html**{{%/badge%}}: Contains the code of the page the user will be navigated to, from the onboarding email they receive.

* {{%badge%}}**redirect.html**{{%/badge%}} After the user completes setting up their password to access Event App, they will be redirected to this page.

<br />

You must now enable this redirection to {{%badge%}}redirect.html{{%/badge%}} by default. You can do this by configuring the {{%badge%}}client-package.json{{%/badge%}} configuration file in the {{%badge%}}/client{{%/badge%}} directory. 

Copy the code given below and replace it with the default code present in the {{%badge%}}**client-package.json**{{%/badge%}} file.

{{% panel_with_adjustment header="client-package.json" footer="button" class="language-json line-numbers" scroll="set-scroll" %}}{
  "name": "EventAppClient",
  "version": "0.0.1",
  "homepage": "index.html",
  "login_redirect": "redirect.html"
}
{{% /panel_with_adjustment %}}

<br />


The client component of your Catalyst project is now configured successfully.

### Deploy Your Project

We will be deploying the project once more to ensure the changes to code are available in the Catalyst console to successfully configure the required {{%link href="/en/signals/help/rules/key-aspects/" %}}Rule{{%/link%}}.

To {{%link href="/en/cli/v1/deploy-resources/introduction/" %}}deploy the project to the console{{%/link%}}, enter the following command in your CLI and execute it.
{{%cli%}}catalyst deploy{{%/cli%}}

<br />


--------------------------------------------------------------------------------
title: "Configure The Rule"
description: "Configure a Catalyst Event Function and associate it with a Rule in Catalyst Signals that will send automated onboarding emails to the application users when they sign up."
last_updated: "2026-03-18T07:41:08.680Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/event-app/nodejs/configure-rule/"
service: "All Services"
related:
- Catalyst Signals (/en/signals)
- Signals Publisher (/en/signals/help/publishers/create-publisher/catalyst-publishers/)
- Signals Events (/en/signals/help/events/)
- Signals Rules (/en/signals/help/rules/key-aspects/)

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



# Configure The Rule

To configure the required rule:

1. Navigate to the **Rules** component in the *Catalyst Signals* section of the console and click **Add Rule**.
  <br />

2. Provide a suitable name and description for your Rule.
  <br />

3. Click **Choose Event**, and select **Catalyst Publisher** to add the configured Publisher.
  <br />

4. Choose **User Confirmation** as the event that triggers this rule, and click **Done**.
  <br />

5. Click **Choose Target**.
  <br />

6. Provide a name for your **Target**, select **Function** as the *Consumer Type*, and select the **Event Function** you created from the drop-down.
  <br />

7. Set the *Dispatch Policy* as **Instant**, and enable the *Send as Single Event* option, and select **Transform** as the *Target Input*.
  <br />

8. Enter the text shown below in the *Template Compiler* section, and click **Generate Output**.
  {{%code class="json"%}}   {
      "email" : $.events[0].data.email_id
  }{{%/code%}}
   <br />

9. Click **Save** to apply your **Target** configurations, and click **Save** to create your **Rule**.
   <br />
  
The required **Rule** has been configured.
<br />

--------------------------------------------------------------------------------
title: "Test Your Application"
description: "Configure a Catalyst Event Function and associate it with a Rule in Catalyst Signals that will send automated onboarding emails to the application users when they sign up."
last_updated: "2026-03-18T07:41:08.681Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/event-app/nodejs/test-application/"
service: "All Services"
related:
- Serve Resources (/en/cli/v1/serve-resources/introduction/)
- Catalyst Signals (/en/signals)
- Catalyst Mail (/en/cloud-scale/help/mail/introduction)
- Catalyst Authentication (/en/cloud-scale/help/authentication/introduction/)

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



# Test Your Application

Before you deploy the application to the remote console, you can test the application 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 application is now served at default port {{%badge%}}3000{{%/badge%}}. 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%}}
<br />

You can now open the client component’s local URL in a browser to access the application. Provide any name to test in the form. Enter one of your email addresses for Catalyst to send the verification and onboarding emails to and click {{%bold%}}Get Started{{%/bold%}}.
<br />

A verification mail will be sent to your email. Click the link in the email to set up a password to access the client application.
<br />
{{%note%}}{{%bold%}}Note:{{%/bold%}} You can customize this verification email by navigating to {{%bold%}}Email Templates{{%/bold%}} in the {{%bold%}}Authentication{{%/bold%}} component in the Catalyst console. However, the default email template that Catalyst provides satisfies our needs. You can learn more about this in detail from the Email Templates {{%link href="/en/cloud-scale/help/authentication/email-templates/introduction/" %}}help page{{%/link%}}.{{%/note%}}

You will be redirected to a password setup page. Enter a password, confirm it, and click {{%bold%}}Confirm{{%/bold%}}.
<br />

When you click {{%bold%}}Confirm{{%/bold%}}, you will be redirected to _redirect.html_ that we configured earlier.


The Rule will now be triggered.

You can check the status of the event's processing from the **Logs** component present in the *Signals* section of the Catalyst console. Once the event is processed it will be labelled as {{%badge%}}Success{{%/badge%}}. 
<br />

If you click the **Logs** icon, you will be directed to the {{%link href="/en/devops/help/logs/introduction/" %}}Logs{{%/link%}} component present in the {{%link href="/en/devops/" %}}Catalyst DevOps{{%/link%}} service. Here, you will find detailed logs on the execution of the event.
<br />

You can check your email to view the onboarding mail.
<br />

Clicking the link will redirect you to the _tour.html_ page that we configured earlier.
<br />

The configuration is now functional and works without any errors.

--------------------------------------------------------------------------------
title: "Deploy Your App"
description: "Configure a Catalyst Event Function and associate it with a Rule in Catalyst Signals that will send automated onboarding emails to the application users when they sign up."
last_updated: "2026-03-18T07:41:08.681Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/event-app/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)

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



# Deploy Your App

The function and client files are now ready to be deployed to the Catalyst remote console. 

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 function is deployed first, followed by the client component. The URL endpoints of the components are displayed.
<br />

You can access the client application by opening the client's URL in a browser. You can also navigate to **Web Client Hosting** in the console and access the application URL from there.

<br />