Test the Application

Before deploying the project, you can automatically compile and test the React app on a local server using the below command:

To ensure that the project “Catly” executes locally, execute the following command from the root of your project directory:

The Catly application will now be served as a React application using the Catalyst React plugin. React applications implement the Hot Module Replacement(HMR) feature that updates and reloads specific modules, without recompiling and reloading the entire project, when changes are made during a serve session. HMR is enabled when you serve the application through the Catalyst CLI by default.

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

Let us 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) on the web page along with the original URL if the setup is working correctly. The URL count is increased to 1.

Let us check if the original URL and its short ID were added to the Data Store and Cache components.

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

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

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 is not 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 us 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.

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