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

Deploy the Project

To deploy your Catalyst project from the CLI, run the following command in your terminal from your project directory:

$ catalyst deploy

This will initialize the call of zcatalyst-cli-plugin-react to compile the react application, followed by the deploy of functions first and finally the client component.

Additionally, executing this command will create a folder named build inside the app folder with the contents of the public folder in its root along with other required configuration and dependency files. The application's source files from the src folder are compiled and included inside a folder named static in the build directory. The required node modules are also added.

Note: Since the React app was initialized using TypeScript, the code will the code will be automatically transpiled to JavaScript, according to the standard deployment procedure of React applications.

The final access URLs of the components are displayed.

react_app_catalyst_deploy

You can now open the client component's URL in a browser to access the deployed Cat.ly application. Cat.ly can be accessed now from its web app URL.

react_app_final_output

Cat.ly displays the shortened URLs in descending order of how frequently they are accessed.

You can also access the original URL of a short ID by manually appending the shortened version of the URL /server/catly/short ID after the web app URL in this format:

https://catly-683477585.development.catalystserverless.com/app/server/catly/qiTWxYIJ

Since we set the homepage to "." the shortened version of a URL will originate from Web_App_URL/app/.

Cat.ly is now functional and will work without any errors.

Note: Refer to the React App with CI/CD Implementation tutorial to learn about automating the testing and building process in Cat.ly using a third-party CI service.