# NodeJS -------------------------------------------------------------------------------- title: "Introduction" description: "Create a React web app that detects and extracts data from input documents, and processes it using OCR, Barcode Scanner, and Identity Scanner of Zia Services." last_updated: "2026-09-08T11:23:57.299Z" source: "https://docs.catalyst.zoho.com/en/tutorials/document-processor/nodejs/introduction/" service: "All Services" related: - Advanced I/O Function (/en/serverless/help/functions/advanced-io/) - Catalyst Extensions (/en/catalyst-extensions/vs-code-extension/introduction/) -------------------------------------------------------------------------------- # Document Processor ### Introduction This tutorial will help you build a Document Processor React application in Catalyst that implements AI/ML capabilities to detect, process, and extract specific data from scanned documents and images. The Document Processor application built in this tutorial will be able to do the following: 1. Recognize handwritten or printed text in scanned digital documents or images, and convert them to a machine-readable format (a JSON response). 2. Scan printed barcodes (1D and 2D formats), and extract the encoded information in them. 3. Scan and process digital ID proof such as PAN, AADHAAR, and other documents including passbooks and cheques, and extract the field records from those documents. Also note that PAN and AADHAAR are identity proof documents specific to the India region. Note : PAN and AADHAAR are identity proof documents specific to the India region. The client application will appear as follows: You can access a working application and test its functionality here: Try the App! The Document Processor application leverages the following Catalyst services and their components: 1. **Catalyst Serverless** - **Functions**: We will be coding an Advanced I/O function in **Node.js**. It contains the logic that enables you to process and extract data from the input documents or images. We have leveraged the Catalyst Zia Services Node.js SDK package for this purpose. 2. **Catalyst Cloud Scale** - **Web Client Hosting** : We will be creating and initializing the web client as a React application in this tutorial using in-built Catalyst plugins. The client application will be hosted in Catalyst using Web Client Hosting. 3. **Catalyst Zia Services** - **OCR** : This component helps you detect and recognize textual characters in your input digital documents or images, and convert them to machine-encoded text. Catalyst OCR can recognize texts in 10 major languages. - **Barcode Scanner** : This component allows you to scan barcodes and extract the encoded information in them. You can learn more about the supported barcode formats from this page. - **Identity Scanner** : The Identity Scanner component enables you to scan and extract data from common ID proof documents such as AADHAAR cards, PAN cards, bank passbooks, and cheques. Refer to this page to learn more about the supported languages, file formats, and file sizes. We will use the Catalyst web console and the Catalyst Command Line Interface (CLI) to build this application. You can fetch the tutorial's code from this git repo. You will have to replace the files in the project directory as directed in the function and client configuration sections of this tutorial. -------------------------------------------------------------------------------- title: "Prerequisites" description: "Create a Catalyst web application that detects, processes and extracts data from input digital documents using the components of Catalyst Zia Services." last_updated: "2026-09-08T11:23:57.299Z" source: "https://docs.catalyst.zoho.com/en/tutorials/document-processor/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. Catalyst CLI: Catalyst CLI contains a host of tools that enable you to initialize, develop, test, and deploy the components of your application from your local machine. We will be working with Catalyst CLI in this tutorial. You must perform these actions: 1. Install Catalyst CLI: Catalyst CLI is installed through NPM. You must therefore have NPM and Node.js installed on your system before you install the CLI. Refer to the **Install Catalyst CLI help page** for details on the pre-requisites and the steps to install it. 2. Login Catalyst CLI: After you install Catalyst CLI, you must authenticate the CLI with your Catalyst account before using it. Refer to the **CLI Login help page** for the steps to log in from Catalyst CLI and the various options available for it. 2. Any IDE tool for client code development: You can use any IDE to work with the client code. Some popular choices include Visual Studio Code, IntelliJ IDEA, and Sublime Text. Download and install an IDE of your choice on your system. If you are a Visual Studio Code IDE user, you can install the Catalyst Tools extension, and use your IDE itself in place of the CLI. You can find more details about the Catalyst VS Code extension from this help section. -------------------------------------------------------------------------------- title: "Create a project" description: "Create a React web app that detects and extracts data from input documents, and processes it using OCR, Barcode Scanner, and Identity Scanner of Zia Services." last_updated: "2026-09-08T11:23:57.299Z" source: "https://docs.catalyst.zoho.com/en/tutorials/document-processor/nodejs/create-a-project/" service: "All Services" related: - JavaScript SDK (/en/sdk/javascript/v1/zia-services/ocr/) - Catalyst Project Creation (/en/getting-started/catalyst-projects/#create-a-catalyst-project) -------------------------------------------------------------------------------- # Create a project Let's first create a Catalyst project from the Catalyst console. 1. Log in to the Catalyst console and click Create new Project. <br /> 2. Enter the project's name as **"ZiaServices"** in the pop-up window that appears. <br /> 3. Click Create. Your project will be created and opened. We will be implementing the components of Zia Services in this tutorial using the Catalyst Zia Services SDK package. -------------------------------------------------------------------------------- title: "Initialize the project" description: "Create a Catalyst web application that detects, processes and extracts data from input digital documents using the components of Catalyst Zia Services." last_updated: "2026-09-08T11:23:57.299Z" source: "https://docs.catalyst.zoho.com/en/tutorials/document-processor/nodejs/initialize-project/" service: "All Services" related: - Initialize Resources (/en/cli/v1/initialize-resources/introduction) - Project Directory Structure (/en/cli/v1/project-directory-structure/introduction/) -------------------------------------------------------------------------------- # Initialize the Project from the CLI You can now begin working on your Catalyst project from the CLI. The first step is to initialize the project in an empty directory. This will be the home directory of your project, in which all of your project files will be saved. You can learn more about this from the Project Directory Structure help page. You can learn about initializing a project in detail from the CLI help documentation. For the Document Processor application, we will initialize the client and the Advanced I/O function components. In this tutorial, we will code the Advanced I/O function in the **Node.js** platform. Please follow the steps listed to initialize the project and create the function and client components required for the application: 1. Create a folder for the project on your local machine and navigate to it from the CLI terminal. 2. To initialize the project, execute the following command: catalyst init 3. The CLI will now ask you to select the default Catalyst organization. Select the organization in which you created the project in the first step of this tutorial, then press **Enter**. Note : To find out the organization in which your project is present in, please access the multi-org portal from your Catalyst console. 4. You can associate the current project directory with the Catalyst project you created in this organization. Select **Ecommerce** and press **Enter**. 5. Select **Functions** and **Client** by pressing **space**, then press **Enter** to confirm your choice and initialize your project. 6. The CLI will initiate the function setup. Select **AdvancedIO** as the function type. 7. Select the latest runtime of **Node.js** as the function stack. 8. Provide the package name as "zia_services_function" for your Node function when prompted and press **Enter**. You must also define the entry point as index.js and provide the author details in this step. You can alternatively press **Enter** without entering inputs to fill in the default values. The CLI will prompt the initialization of the Node dependencies. Press **Y** to confirm the installation, and press **Enter** to confirm your choice. The Node modules will be installed. Note : Ensure that you enter the function's package name exactly as instructed, because the application's code contains the same name. 9. The CLI will now initiate the client set up. Select **React web app** and choose **JavaScript** from the option and press **Enter** to initialize your client as a React web app. 10. Enter **"app"** as the name of your client package and press **Enter**. You can also provide any name of your choice. 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 catalyst.json configuration file and a hidden .catalystrc file. The structure of your project directory should appear as shown below: -------------------------------------------------------------------------------- title: "Configure the Advanced I/O function" description: "Create a React web app that detects and extracts data from input documents, and processes it using OCR, Barcode Scanner, and Identity Scanner of Zia Services." last_updated: "2026-09-08T11:23:57.300Z" source: "https://docs.catalyst.zoho.com/en/tutorials/document-processor/nodejs/configure-advancedio/" service: "All Services" related: - Functions Directory Structure (/en/cli/v1/project-directory-structure/functions-directory) - Advanced I/O Function (/en/serverless/help/functions/advanced-io/) -------------------------------------------------------------------------------- # Configure the Advanced I/O Function Next, we will begin coding the Document Processor application by configuring the functions component. The functions directory you initialized, functions/zia_services_function, contains: * The index.js main function file * The catalyst-config.json configuration file * node_modules * package.json and package-lock.json dependency files In addition to this directory, we will need to add a few sub-directories and files in the functions/zia_services_function directory. We have the tutorial's code in this git repository. Download it as a ZIP file and extract its contents. Replace the index.js file in your project's functions/zia_services_function directory with the one in the extracted zip. The functions/zia_services_function directory from the downloaded ZIP will contain the sub-directories and files mentioned below, in addition to the default function files and dependencies. * constants.js file * services directory * pojos directory * handlers directory * errors directory Extract these files and add them to your project's function's directory. You can use any IDE of your choice to work with the application’s files. Note : Please go through the code in this section to make sure you fully understand it. ### Install Express and Multer Frameworks for Node.js The Node.js function requires two frameworks to be installed for this application. You must install these frameworks to import their packages in your code. #### express This framework is used to enable communication between the client and server end via HTTP requests. To install Express.js, navigate to the Node function’s directory (functions/zia_services_function) in your terminal and execute the following command: npm install express This will install the Express module and save the dependencies. #### multer Multer is middleware used to handle file upload operations from the client end. To install multer.js, navigate to the Node function’s directory (functions/zia_services_function) in your terminal and execute the following command: npm i multer This will install the Multer module and save the dependencies. This information will also be updated in the package.json file. The function directory is now configured. We can now proceed to configuring the client directory. -------------------------------------------------------------------------------- title: "Configure the client" description: "Create a React web app that detects and extracts data from input documents, and processes it using OCR, Barcode Scanner, and Identity Scanner of Zia Services." last_updated: "2026-09-08T11:23:57.300Z" source: "https://docs.catalyst.zoho.com/en/tutorials/document-processor/nodejs/configure-client/" service: "All Services" related: - Client Directory Structure (/en/cli/v1/project-directory-structure/client-directory) - Install Tailwind CSS (https://tailwindcss.com/docs/guides/create-react-app) -------------------------------------------------------------------------------- # Configure the Client Next, let's configure the client component. The client directory (/app) you initialized will contain: * Application source files in the /src directory * Public files in the /public directory * Node modules * The client-package.json configuration file * package.json and package-lock.json dependency files You can fetch the entire client directory with configured code this git repo that you downloaded earlier. Replace the src folder in this directory with the one in the extracted zip using an IDE and save the files. Note: Please go through the code in each file to make sure you fully understand it. ### Install React packages We will be installing the following additional React modules for the Document Processor application: * **react-hot-toast**: This library is used to display toast messages as status notifications in the client application. * **react-router-dom**: This package is used for routing purposes to load the content in the client application dynamically based on the URL. * **axios**: This client library is used to make HTTP requests from the client end to communicate with the APIs in the server side. * **classnames**: This attribute is used to set or return the value of an element's class attribute in React. To install these react packages, navigate to the project's client directory (/app) in your terminal and execute the following command: npm i react-hot-toast react-router-dom axios classnames This will install the modules and save all their dependencies. The following information will also be updated in the package.json file. #### Install Tailwind CSS We have use the Tailwind framework to implement the pre-built CSS classes that scan all your html files and JS components, and generates a static CSS file for your project. Navigate to the project's client directory (/app) in your terminal and to install and initialize this framework, you will need to execute these two commands in your terminal: 1. To install Tailwind CSS: npm install -D tailwindcss@3 2. To initialize the tailwind.config.js file in your project: npx tailwindcss init This will create the tailwind.config.js file in your client directory. Open the file, paste the code below , and save the file. You can learn more about tailwind installation from this page. /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], } The client directory is now configured. Let us quickly go through the working of the function and client components of the application: The user enters an input image or a digital document to be processed in the client application. The /:model API in the index.js file is triggered and it defines which model to invoke. Based on the type of the input document, the corresponding logic of the model (pan, cheque, ocr, barcode or passbook) will get executed. All the listed below models (except barcode) use the zia.extractOpticalCharacters() method in the Catalyst Zia Services Node.js SDK package to extract the data from the input document or image and provides the response in the JSON format. * **/pan**: For this document, the modelType is configured as PAN. The user provides a scanned copy of the PAN card as the input and response includes the card holder's first name, last name, data of birth and the PAN card number. * **/ocr**: The modelType is configured as OCR for general OCR processing. The extracted text from the input document and a confidence score will be sent as a response. The confidence score is a percentage value depicting the accuracy of the text recognition and prediction in the given input document. * **/cheque**: For this document, the modelType is configured as CHEQUE.The user provides a cheque leaflet(only in the CTS-2010 format) and response includes the cheque number, bank details such as the bank name, branch, IFSC code, account number, amount and the date of issuance. * **/barcode**: The user provides either 1D or 2D barcodes as input and returns the encoded information it as response. We have used the zia.scanBarcode() method in the Catalyst Zia Services Node.js SDK to perform this operation. To learn more about the supported barcode formats, please refer to this page. * **/passbook**: The user provides a passbook document as an input and the response includes information such as the account number, bank name, its branch and address. 6. The /aadhaar API in the index.js file is triggered when the user choose to process an aadhaar card in the client application. The user needs to provide both the front and back side images of the card separately, which will both be processed. This model recognizes the language of the document automatically and processes it. This API implements the zia.extractAadhaarCharacters() method in the SDK package that extracts the parameters recognized in the aadhaar card such as the card holder’s name, address, gender and aadhaar card number. Let's have a look at the client components in detail: * The root directory of the client contains the Catalyst-specific client-package.json file, which contains the default configurations of the client. * The src folder contains the application’s source files including the JavaScript and CSS files that will be included in the build folder when we compile the React app. The App.jsx facilitates the behaviour of the front end of the application. It handles the change and shrink events, and posts and obtains data using the APIs defined earlier. The files within the views folder are responsible for rendering the response as output in the client application. * The public folder is used to hold files that can be openly accessed by browsers through public URLs. It includes the following files: 1. index.html: The default entry point of application. 2. manifest.json: Contains information about the web application including the start_url which is set to “.”. This enables every shortened version of the URL the user enters to originate from the base URL Catalyst_web_app_URL/app/ when the app is hosted. * tailwind.config.js: This file contains all the client side customizations of your application such as the CSS styles implemented in your project. -------------------------------------------------------------------------------- title: "Test the application" description: "Create a React web app that detects and extracts data from input documents, and processes it using OCR, Barcode Scanner, and Identity Scanner of Zia Services." last_updated: "2026-09-08T11:23:57.300Z" source: "https://docs.catalyst.zoho.com/en/tutorials/document-processor/nodejs/test-the-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 test the application on a local server and check if everything works using the Catalyst CLI. For detailed information on catalyst serve, refer to the Serve Resources help page. To serve the Catalyst project locally, execute the following command from your project directory: catalyst serve This will first compile the React app and then serve it. To know more about serving react applications, please refer to this page. The Document Processor application will now be served at default port 3000. The local endpoint URLs of the components will be displayed in the CLI. Note : 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. You can now open the application in a browser using the local URL of the client displayed in the CLI and test it. To test each of these, click on the required feature and upload an image file or a document file from your local system, then click **Process Image**. To test the Aadhaar functionality, you must upload two images of the front and the back of the Aadhaar card. The extracted text in case of OCR, Aadhaar, Pan, Passbook, and Cheque will be displayed in the output panel in the JSON format. In the case of Barcode Scanner, the decoded information from the barcode will be displayed. Also note that, Pan and Aadhaar are identity proof documents specific to India region. For OCR, the output will also contain a confidence score as a percentage value that represents the accuracy of information extraction and processing. Note: The supported formats for input images are configured to be .jpeg, .webp, and .png, and the maximum file size allowed is 10MB. * **Cheque** <br /> * **PAN** <br /> * **Passbook** <br /> * **Aadhaar** <br /> * **Barcode Scanner** <br /> * **OCR** <br /> If this setup is working correctly, we can deploy the application to production. You can quit the serve session in your terminal by executing the command to kill a running process, based on your OS. -------------------------------------------------------------------------------- title: "Deploy the project" description: "Create a React web app that detects and extracts data from input documents, and processes it using OCR, Barcode Scanner, and Identity Scanner of Zia Services." last_updated: "2026-09-08T11:23:57.300Z" source: "https://docs.catalyst.zoho.com/en/tutorials/document-processor/nodejs/deploy-to-console/" service: "All Services" related: - Deploy Catalyst Project (/en/cli/v1/deploy-resources/introduction/) - Web Client Hosting (/en/cloud-scale/help/web-client-hosting/introduction/) -------------------------------------------------------------------------------- # Deploy to console To deploy your Catalyst project from the CLI, run the following command in your terminal from your project directory: catalyst deploy The function is deployed first, followed by the client component. The app URLs of the components will be displayed. You can now open the client component’s URL in a browser to access the deployed application. The Document Processor application can now be accessed from its web app URL.