Test the Application

To test the Catalyst project locally, execute the following command from your project directory:

copy
$
catalyst serve

This will initialize the preserve script.

react_app_serve

The build script is executed first and the CLI executes the yarn install and yarn build commands.

react_app_serve_yarn_build

The packageJson script is executed next. This copies the client-package.json and pastes it in the build folder.

The Cat.ly application is now served locally at default port 300. The local endpoint URLs of the components are displayed.

react_app_serve_success


You can now open the client component’s local URL in a browser to access the Cat.ly application.

react_app_serve_1


Let’s test the application by shortening a URL. Enter the URL in the text box and click Shrink. Cat.ly will shrink the URL and display its shortened version (/server/catly/short ID) in the web page along with the original URL if the setup is working correctly. The URL count is increased to 1.

react_app_serve_2


Let’s check if the original URL and its short ID were added to the Data Store and cache.

Open the Data Store of the Catly project in your Catalyst console. You should find the record populated in the UrlShorten table.

react_app_serve_table_updated


Now open the cache component in your Catalyst console. You should find the cache item automatically created in the segment.

react_app_serve_cache


As explained earlier, the cache item’s key is the short ID and its value is a string of the short ID, original URL, and the meta details of the table. The cache item’s expiry is set to the default expiry of two days.

The cache item is overwritten every time a GET operation is performed to fetch the original URL. A new expiry time is written to the cache item through a POST operation and the expiry is set to two days by default after the most recent time it was accessed. This means that every time the URL is accessed, the cache item is stored in the shortUrl segment for two more days until it expires.

If a URL isn’t accessed for two days, it is deleted from the cache. If it is accessed after the two days are up, the data is fetched from the UrlShorten table in the Data Store and it is written to the cache again as a new cache item.


Let’s now access the URL and verify the redirection.

Click the arrow next to the shortened version or anywhere over the list item in the Cat.ly’s front-end. The browser will be redirected to the original URL by Catalyst.

react_app_serve_demo

If this setup is working correctly, we can deploy the application to production.

Last Updated 2023-12-15 18:54:08 +0530 +0530

RELATED LINKS

Serve Resources