---
title: "Initialize the Project"
url: https://docs.catalyst.zoho.com/en/tutorials/photo-store-app/nodejs/init-app/
description: "Build a React gallery app to upload images to a bucket in Stratus, and shre these images with other registered users. Host the app on AppSail and sync with GitHub and deploy the app usiong Pipelines."
last_updated: 2026-08-17T12:16:04Z
service: All Services
type: tutorial
related_links:
  - name: "Catalyst Stratus"
    url: /en/cloud-scale/help/stratus/introduction/
  - name: "CLI Help Documentation "
    url: /en/cli/v1/cli-command-reference/
  - name: "Initialize Resources From CLI"
    url: /en/cli/v1/initialize-resources/introduction/
  - name: "Project Directory Structure"
    url: /en/cli/v1/project-directory-structure/introduction/
  - name: "Catalyst AppSail"
    url: /en/serverless/help/appsail/introduction/
  - name: "Add an AppSail Service"
    url: /en/cli/v1/add-appsail/
  - name: "Catalyst Multi-Orgnization Portal"
    url: /en/getting-started/catalyst-organizations/#access-the-multi-org-portal
  - name: "Catalyst Tools"
    url: /en/catalyst-extensions/vs-code-extension/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. 

You can learn more about this from the [Project Directory Structure help page](https://docs.catalyst.zoho.com/en/cli/v1/project-directory-structure/introduction/). You can learn about initializing a project in detail from the [CLI help documentation](https://docs.catalyst.zoho.com/en/cli/v1/cli-command-reference/).

For this application, we will only be initializing the project. We will not be initializing any function or client components.

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

2. Initialize a project by executing the following command from that directory:

```sh
catalyst init
```

Navigate using the **arrow keys** and select your preferred portal and click **Enter**. If you have no other organizations associated with the account, then the default will be selected automatically.
![catalyst_tutorials_photostore_cli_project_init](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_project_init.webp)

> **Info:** [Learn more about Catalyst’s multi-org portal feature](https://docs.catalyst.zoho.com/en/getting-started/catalyst-organizations/#access-the-multi-org-portal)

.

3. The CLI will now ask you to associate a Catalyst project with the directory. Associate it with the project that we created earlier from the console. Select **PhotoStoreApp** from the list and click **Enter**.
    ![catalyst_tutorials_photostore_cli_proj_sel](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_proj_sel.webp)

4. Press **Enter** without making any selection.
    ![catalyst_tutorials_photostore_cli_compont_sel](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_compont_sel.webp)

    The project will be initialized, and a [`catalyst.json`](https://docs.catalyst.zoho.com/en/cli/v1/project-directory-structure/catalyst-json/) file will be created.
    ![catalyst_tutorials_photostore_cli_init_cmpltd](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_init_cmpltd.webp)

5. Initialize an AppSail service in your project directory by executing the following CLI command:

```sh
catalyst appsail:add
```

> **Note:** In this tutorial, we are using the `add` command to initialize the AppSail service to showcase alternative [Catalyst CLI commands](https://docs.catalyst.zoho.com/en/cli/v1/cli-command-reference/#commands) to initialize the AppSail service.

6. The CLI will prompt you to choose between [Catalyst-Managed Runtime](https://docs.catalyst.zoho.com/en/serverless/help/appsail/catalyst-managed-runtimes/key-concepts/) and [Docker Image](https://docs.catalyst.zoho.com/en/serverless/help/appsail/custom-runtimes/container-registry-services/). Because you are creating this project from one of the Catalyst-Managed Runtime, select **Catalyst-Managed Runtime** and click **Enter**. 
![catalyst_alien_city_cli_appsail_setup_start](https://catalyst-docs-development.zohostratus.in/images/tutorials/alien-city-appsail-express/aliencity-appsail-selection.webp)

7. Enter "`photo-store-app`" as the name of the AppSail service.
    ![catalyst_tutorials_photostore_cli_appsail_init](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_appsail_init.webp)

8. Enter "`.`" as the build path and select the latest runtime of *Node.js* as the function stack for your AppSail service.
    ![catalyst_tutorials_photostore_cli_appsail_func_stack](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_appsail_func_stack.webp)

    The AppSail service will be initialized for your project.
    ![catalyst_tutorials_photostore_cli_appsail_completed](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_appsail_completed.webp)

9. To initialize the client as a React web app, execute the following command:

```sh
npx create-react-app photo-store-app
```

![catalyst_tutorials_photostore_cli_react_app_start](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_react_app_start.webp)

The client will be initialized as a React web app.
![catalyst_tutorials_photostore_cli_react_app_completed](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_react_app_completed.webp)

The client and backend of the application have been initialized and are ready to be configured according to our requirements.

10. Run the following command in the `PhotostoreApp/photo-store-app` directory.
    ![catalyst_tutorials_photostore_stratus_npm_start_appsail_set_up](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_npm_start_appsail_set_up.webp)

    This is to ensure the project is getting served in localhost without any errors.
    ![catalyst_tutorials_photostore_app_init_compiled_success](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_app_init_compiled_success.webp)

    Your current project directory should appear as follows:
    ![catalyst_tutorials_photostore_stratus_first_dir_struct_1](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_first_dir_struct_1.webp)

The AppSail service has been initialized for your application.