--- title: "Initialize the Client" url: https://docs.catalyst.zoho.com/en/cli/v1/initialize-resources/initialize-client/ description: "You can initialize a Catalyst project and project resources such as functions, client, and AppSail from the CLI" last_updated: 2026-08-17T12:16:04Z service: All Services type: general --- # Initialize the Client ### Introduction Catalyst enables you to develop three types of native client applications that can be hosted on [Web Client Hosting](https://docs.catalyst.zoho.com/en/cloud-scale/help/web-client-hosting/introduction/): * Angular Applications * React Applications * Basic Client Applications Catalyst provides ready-to-use templates for Angular and React client apps. When you initialize these apps, Catalyst will handle the entire setup procedure and prompt you to install the required dependencies. The Angular and React applications will be created in your project directory in their boilerplate structure. The basic client app is a simple version of the Catalyst client that will be created in its own standard structure. The installation procedures will differ for all three types of client apps. > **Note:** * You can add any number of sub-folders and files in the client's directory like HTML files, JavaScript files, logo images, and more. However, the configuration files and dependencies need to be in the client directory's root. * You can also pull a hosted web client from the console to your local system using the ` [catalyst pull](https://docs.catalyst.zoho.com/en/cli/v1/pull-resources/introduction/) ` command. * Web client hosting is suitable for basic and simple web applications. You can explore our robust frontend development service, **[Slate](https://docs.catalyst.zoho.com/en/slate/)**, that lets you seamlessly deploy web applications in a variety of popular JavaScript frameworks like Next.js, Angular, React, Vue, and more. Slate also provides automated deployments from GitHub, GitLab, or Bitbucket, and offers a host of other advanced features. If you initialize the client directory for your project, Catalyst will initiate its setup process after the functions initialization. Select one of the client types to initialize for your project from the options, then press **Enter**. ![Initialize Client- Setup](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_client_setup.webp) ### Angular Applications Angular is a front-end application design framework and development platform for creating efficient and sophisticated single-page apps. Angular follows a component-based architecture where the app is decoupled into individual, reusable functional and logical entities. The building blocks of Angular such as the components, templates, directives, dependency injections are combined into modules, that together form an Angular application. You can learn more from the [official Angular documentation](https://angular.io/docs) . It is recommended that you have Angular CLI installed in your local machine for developing Angular client applications. This CLI handles the installation and configuration of the required dependencies automatically, and enables easy development and testing of client applications. Catalyst will automatically initiate its installation during the client initialization process. Catalyst also provides a plugin for the Angular app, ` **zcatalyst-cli-plugin-angular** ` , which is installed when the Angular app is initialized. This plugin, compatible with the latest LTS version of Angular, handles several operations involved in the development and testing of the Angular app internally. This eases and quickens your application building task, and enables you to focus on the app's functionality instead of its setup and maintenance. > **Note:** The Catalyst plugin must be installed in the specific application's directory. The [ `catalyst.json` ](https://docs.catalyst.zoho.com/en/cli/v1/project-directory-structure/catalyst-json/) configuration file will specify the plugin's path. Catalyst has deprecated support for the global installation of the Angular plugin. Please update the code of your existing Angular apps accordingly. If you select **Angular Web App** from the options while initializing the client, Catalyst will initiate the standard setup procedure for Angular applications. The app will be created in the latest LTS version. > **Note:** The current Angular LTS version supported by Catalyst is v12. 1. The CLI will prompt you to provide a name for the client component of your project. Provide a name for the client and press **Enter** . ![Initialize Client- Angular](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_angular_1.webp) 2. If Angular CLI is not already installed in your system, Catalyst will automatically initiate a temporary installation of its LTS version. It will also install a Catalyst-specific schematics package that is required to generate an Angular app. Enter "Y" to confirm the installation of the required packages when prompted, then press **Enter** . ![Initialize Client- Angular](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_angular_2.webp) If the required packages already exist in your local system, the setup will skip to the next step. > **Note:** If you have an older or unsupported version of Angular installed in your system, Catalyst will prompt you to update the version to the latest supported version. 3. You can enable Angular routing to handle navigation between the different views you create. Enter "Y", then press **Enter** when prompted. ![Initialize Client- Angular](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_angular_3.webp) 4. You can style Angular components with any of the supported stylesheet formats as shown below. Select a stylesheet format for your app, then press **Enter** . ![Initialize Client- Angular](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_angular_4.webp) The routing and stylesheet prompts fall under the default set up procedures of Angular applications. Catalyst will then initiate the installation of the Angular application files, configuration files, and dependencies in their boilerplate structures. The node modules required for the development of the app are also installed through NPM. ![Initialize Client- Angular](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_angular_5.webp) The Angular client's directory is now set up with the standard application files, environment files, the plugin file, stylesheets, `index.html` , and TypeScript classes as shown below. The required node modules, JSON configuration files, and dependencies, including `client-package.json` specific to Catalyst, will also be present in the directory. ![Initialize Client- Angular Directory](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_client_angular_dir.webp) After these packages are installed, the `catalyst.json` configuration file will be updated with the client package details, including the path to the plugin file specified earlier. You can learn more about the Catalyst configuration files and the client directory from the [Project Directory Structure help page](https://docs.catalyst.zoho.com/en/cli/v1/project-directory-structure/client-directory/) . You can learn about testing and deploying an Angular app from the Catalyst CLI from the [Serve Resources](https://docs.catalyst.zoho.com/en/cli/v1/serve-resources/serve-all-resources/#serve-angular-applications) and [Deploy Resources](https://docs.catalyst.zoho.com/en/cli/v1/deploy-resources/deploy-client/#deploy-angular-applications) help pages. ### React Applications React is a front-end JavaScript library that enables you to build interactive applications and user interfaces. Its component-based architecture efficiently manages and renders the states in your application upon build. React provides ease and flexibility in developing single page client applications, and offers reusability of its components. You can learn more from the [official React documentation](https://reactjs.org/docs/getting-started.html) . Catalyst provides a plugin for the React app, `zcatalyst-cli-plugin-react` , which is installed when the React app is initialized. This plugin contains certain node modules and library files that handle several operations involved in the development and testing of the React app internally. This allows for a faster and efficient application building process. > **Note:** The Catalyst plugin must be installed in the specific application's directory. The [ `catalyst.json` ](https://docs.catalyst.zoho.com/en/cli/v1/project-directory-structure/catalyst-json/) configuration file will specify the plugin's path. Catalyst has deprecated support for the global installation of the React plugin. Please update the code of your existing React apps accordingly. When you initialize a React app, Catalyst will automatically facilitate its creation and configuration through the Yarn package manager by default. If you don't have Yarn installed in your local machine, the React app will be set up using NPM. Catalyst enables the handling of all configuration tasks such as linking and resolving packages, and installing dependencies, through the package manager automatically. If you select **React Web App** from the options while initializing the client, Catalyst will initiate the standard setup procedure for React applications. 1. You can create the React app with the standard JavaScript template or a TypeScript template. TypeScript is a typed superset of JavaScript that gets transpiled to plain JavaScript during compilation. Catalyst provides you with these options during the initialization to make the set up procedure easier and quicker. Select **JavaScript** or **TypeScript** from the options. ![](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_react_1.webp) 2. The CLI will prompt you to provide a name for the client component of your project. Provide a name for the client and press **Enter**. ![](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_react_2.webp) > **Note:** The client directory in your project is named client in the case of Angular and basic web client applications. However, for React applications, the name of the client directory is the same name you assign to the web client here during its initialization or set up. For example, if you name your web client as "vendorApp", the client directory will also be named `vendorApp` . This value will be updated accordingly in the `catalyst.json` configuration file. This will initiate the installation of the necessary React packages such as `react` , `react-dom` , and `react-scripts` through a Catalyst-specific [CRA template](https://www.npmjs.com/package/cra-template) . This base template will execute the ` [create-react-app](https://github.com/facebook/create-react-app) ` command. ![](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_react_2.webp) The package manager will then initialize a git repository for the React app, and install template dependencies. ![Initialize Client- React](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_react_3.webp) After the initialization is complete, you can find the React application files created in their boilerplate structures in your project directory. ![Initialize Client- React](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_react_4.webp) The React app directory structure will contain the application source files, public files, configuration files, node modules, and other dependencies including `client-package.json` specific to Catalyst as shown below. ![Initialize Client- React](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_client_react_dir.webp) After these packages are installed, the `catalyst.json` configuration file will be updated with the client package details, including the path to the plugin file specified earlier. You can learn more about the Catalyst configuration files and the client directory from the [Project Directory Structure help page](https://docs.catalyst.zoho.com/en/cli/v1/project-directory-structure/client-directory/) . When you [serve](https://docs.catalyst.zoho.com/en/cli/v1/serve-resources/serve-all-resources/#serve-react-applications) or [deploy](https://docs.catalyst.zoho.com/en/cli/v1/deploy-resources/deploy-client/#deploy-react-applications) the React app, a `build` folder will be created in this directory which will contain all the compiled files as per the standards of React.js. ### Basic Client Applications The basic client application is a simple version of the Catalyst client that is created without any external frameworks or libraries. You can create simple, functional web client applications by choosing the **Basic Web App** option during the client initialization. The CLI will then prompt you to provide a name for the client component of your project. Provide a name for the client and press **Enter** . ![Initialize Client- Basic](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_setup_client_name.webp) The client directory will now be created in the project's directory and the [ `catalyst.json` ](https://docs.catalyst.zoho.com/en/cli/v1/project-directory-structure/catalyst-json/) file will be updated with its information. ![Initialize Client- Basic](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_completed.webp) The basic client's directory will be set up with the main `index.html` file, `main.css`, `main.js` , and the `client-package.json` configuration. You can learn about the client directory structure in detail from the [Project Directory Structure help page](https://docs.catalyst.zoho.com/en/cli/v1/project-directory-structure/client-directory/). ![Initialize Client- Basic](https://catalyst-docs-development.zohostratus.in/images/cli/initialize-resources/catalyst_cli_init_client_dir.webp) You can [serve](https://docs.catalyst.zoho.com/en/cli/v1/serve-resources/serve-all-resources/#serve-functions-and-basic-web-applications) the client through a localhost to test it, and then [deploy it](https://docs.catalyst.zoho.com/en/cli/v1/deploy-resources/deploy-client/) to the cloud, or [host it from the console](https://docs.catalyst.zoho.com/en/cloud-scale/help/web-client-hosting/introduction/) directly.