Building a React App in Catalyst

Create a URL shortener service, Cat.ly, as a single-page React application using various Catalyst components and automate its building process using Catalyst scripts

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

In this tutorial we will initialize the project followed by the function and client components:

  1. Create a folder for the project on your local machine and navigate to it from the terminal. Initialize a project by executing the following command from that directory:
    $ catalyst init
  2. 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 Catly from the list and press Enter.

    react_app_catly_init

  3. Select the Functions and Client components and press the Enter key to initialize.

    react_app_function_client_select

  4. The CLI will initiate the function setup. Select AdvancedIO as the function type.

    react_app_func_advance_select

  5. Select the latest runtime of Node.js as the function stack.

    react_app_func_node_select

  6. If you select Node.js, enter "catly" as the package name, "index.js" as the entry point, and your email address as the author and press Enter. 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.

    react_app_func_init_complete

  7. The CLI will now initialize the client set up. Choose "React web app", which will initialize the client as a React application using the Catalyst React pluginzcatalyst-cli-plugin-react.

    react_app_select

  8. Choose "TypeScript" as the type of React application.

    react_app_typescript_select

  9. Name your React application as "app", and press "Enter". Now all the the required React packages will be installed through a Catalyst-specific CRA template, and the create-react-app command will be executed.

    react_app_client_init

    The Project directory along with the Client directory will be created in the standard structure.

    react_app_client_init_complete

    Catalyst initialization is now complete.

The CLI will have now created the project with a populated catalyst.json configuration file and a hidden .catalystrc file.

This is the current directory structure of the Catly project:

react_app_init_directory