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. You can learn about initializing a project in detail from the CLI help documentation.

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:

copy
$
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
You can find out more about Catalyst’s multi-org portal feature in this help document.

  1. 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

  2. Press Enter without making any selection. catalyst_tutorials_photostore_cli_compont_sel
    The project will be initialized, and you will be able to view a catalyst.json file will be created. catalyst_tutorials_photostore_cli_init_cmpltd

  3. Now, lets initialize an AppSail service in your project directory by executing the following CLI command:

copy
$
catalyst appsail:add
Info: In this tutorial, we are using the add command to initialize the AppSail service to showcase alternative Catalyst CLI commands to initialize the AppSail service.
  1. Enter “photo-store-app” as the name of the AppSail service. catalyst_tutorials_photostore_cli_appsail_init

  2. 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
    The AppSail service will be initialized for your project. catalyst_tutorials_photostore_cli_appsail_completed

  3. Now, to initialize the client as a React web app, execute the following command:

copy
$
npx create-react-app photo-store-app

catalyst_tutorials_photostore_cli_react_app_start
The client will be initialized as a React web app. catalyst_tutorials_photostore_cli_react_app_completed
The client and backend of the application have been initialized and are ready to be configured as per our requirement.

  1. Run the following command in the PhotostoreApp/photo-store-app directory. catalyst_tutorials_photostore_stratus_npm_start_appsail_set_up
    This is to ensure the project is getting served in localhost without any errors. catalyst_tutorials_photostore_app_init_compiled_success
    Your current project directory should look like this: catalyst_tutorials_photostore_stratus_first_dir_struct_1

The AppSail service has been initialized for your application.

Last Updated 2025-10-09 17:47:14 +0530 IST