---
title: "Initialize the Client"
url: https://docs.catalyst.zoho.com/en/tutorials/todo-list/python/initialize-client/
description: "Build a Basic, React, or Angular to-do list web application using Catalyst Advanced I/O Function and Catalyst Data Store that enables you to note down tasks and delete them after they are done."
last_updated: 2026-08-17T12:16:04Z
service: All Services
type: tutorial
related_links:
  - name: "Client Directory Structure"
    url: /en/cli/v1/project-directory-structure/client-directory
  - name: "Initialize the Client"
    url: /en/cli/v1/initialize-resources/initialize-client/
---

# Initialize the Client

Now, let's initialize the client.

You can initialize the client in one of the three types supported by Catalyst:

1. **Basic web app**: The basic client application is a simple version of the Catalyst client that is created without any external frameworks or libraries.

2. **Angular web app**: You can choose this client type if you prefer to create the To-Do List app using the Angular framework.

3. **React web app**: You can choose this client type if you prefer to create the To-Do List app using the React framework.

> **Note**: Catalyst provides native plugin support to create React and Angular apps. These plugins also handle several operations related to setting up, testing and deploying your applications.

Since, you are initializing the client after the project has already been initialized, you can set it up independently
by executing the following command from your project directory:

```sh
catalyst client:setup
```

Use the arrow keys and select your preference by pressing **Enter**.

![catalyst_todo_client_select](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_client_select.webp)

Based on your choice, navigate to the relevant section for the steps to initialize the web app:

**Basic web app**

#### Initialize the client as a Basic web app

If you chose **Basic web app** while setting up the client using the Catalyst command
`catalyst client:setup`, Catalyst will initialize the client accordingly.

Enter "**ToDoApp**" as the name of the name for the client package and press
**Enter**.
![catalyst_todo_basic_init_complete](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_basic_init_complete.webp)

The client is now successfully initialized as a Basic web application.

The [client directory](https://docs.catalyst.zoho.com/en/cli/v1/project-directory-structure/client-directory) will be created in the standard structure in the project directory.

This is the structure of the ToDoList project's directory if the client is initialized as a basic web app.

![catalyst_todo_python_basic_folder_view](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_python_basic_folder_view.webp)

**Angular web app**

#### Initialize the client as an Angular web app

If you chose to set up the client as an Angular app, Catalyst will initialize it using the **Catalyst Angular plugin**
([`zcatalyst-cli-plugin-angular`](https://npm.io/package/zcatalyst-cli-plugin-angular)).

1. Name your Angular app as "**app**", then type "**Y**" and press the
**Enter** key to enable the auto-completion feature. This will provide auto-completion for your Angular
terminal commands.
 ![catalyst_todo_angular_autocomplete](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_angular_autocomplete.webp)
2. You can choose to share your application data with the Angular by entering "**Y**" or opt out of it by entering "**N**", then press **Enter**. Since the application does not require Angular routing, type "**N**" and press **Enter**. ![catalyst_todo_angular_routing](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_angular_routing.webp)
3. For this application we will be using CSS style sheet. Press the **Enter** key after choosing CSS.
 ![catalyst_todo_angular_stylesheet](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_angular_stylesheet.webp)
4. Now all the required Angular application files, configuration files, and dependencies will be installed through the Catalyst Angular plugin. ![catalyst_todo_angular_init](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_angular_init.webp)
5. The client is now successfully initialized as an Angular web application.
![catalyst_todo_angular_init_complete](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_angular_init_complete.webp)

The [client directory](https://docs.catalyst.zoho.com/en/cli/v1/project-directory-structure/client-directory) will be created in the standard structure in the project directory.

This is the structure of the ToDoList project's directory if the client is initialized as an Angular app.

![catalyst_todo_python_angular_folder_view](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_python_angular_folder_view.webp)

**React web app**

#### Initialize the client as a React web app

If you chose to set up the client as a React app, Catalyst will initialize the React app using the Catalyst React plugin ([`zcatalyst-cli-plugin-react`](https://www.npmjs.com/package/zcatalyst-cli-plugin-react)).

1. Next you will be prompted to choose the type of React application. Choose "**JavaScript**" as the type for this tutorial.
![catalyst_todo_react_init_1](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_react_init_1.webp)
2. Name your React application as "**app**," and press **Enter**. All the required React packages such as `react`, `react-dom`, and `react-scripts` will be installed through the Catalyst React plugin.
 ![catalyst_todo_react_client_init](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_react_client_init.webp)
 The client is now successfully initialized as a React web application.
 ![catalyst_todo_react_init_complete](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_react_init_complete.webp)

The [client directory](https://docs.catalyst.zoho.com/en/cli/v1/project-directory-structure/client-directory) will be created in the standard structure in the project directory.

This is the structure of the ToDoList project's directory if the client is initialized as a React app.

![catalyst_todo_python_react_folder_view](https://catalyst-docs-development.zohostratus.in/images/tutorials/todo-list/catalyst_todo_python_react_folder_view.webp)