Web Client Hosting

Web Client Hosting

 

Introduction

Web client hosting enables you to host the client part of the web-based applications that you create, from the Catalyst console. Catalyst provides a functionally rich set of Web SDK tools to build a web application. The Web SDK package contains JavaScript classes and methods that enable you to integrate Catalyst components into your web client application. You can refer to the Web SDK documentation for more information.

Catalyst provides a reliable, secure, and cost-effective cloud-based production platform, along with scalable resources, to host your applications. Our servers accommodate the fluctuating needs of your application, and they handle all backend jobs.

You can host your web client application easily and manage its versioning, like updating to a newer version or rolling back to an older version, from the console. Catalyst enables you to host and manage one web application for each project.

You can host your web application only in the Development environment of your Catalyst project. You will not be able to host it directly in Production. You must deploy your Catalyst project to the Production environment to make it available there. You can then distribute the application to the end-users. Therefore, when you update the version of your application in Catalyst, it will not affect the app that is already live until you migrate the changes to production.

Catalyst provides a default application URL for your web client in both the Development and Production environments, after you host it. You can access your application from that URL, or map your own domain to it using Domain Mappings and distribute that to the end-users. Catalyst also helps you easily incorporate Push Notifications for your web applications, and send test notifications from the console.

In general, you can deploy web clients in Catalyst in three different ways:

  • Deploy the web client from the Catalyst CLI:
    You can deploy both the web client and function resources of a Catalyst project together as the entire application, or individually, using Catalyst CLI. Refer to the Deploy Resources help page for details.
  • Deploy the web client from a GitHub repository:
    Catalyst enables you to integrate your GitHub account with your Catalyst account, and access your GitHub repositories in the Catalyst console. You can deploy a Git repo easily from the console. This will deploy the project files, such as the web client and the functions, to your Catalyst project in the console. Refer to the GitHub Integration help page for details.
  • Deploy the web client from the console:
    You can deploy the web client from the Web Client Hosting section in the Catalyst console. This documentation covers the concepts and procedures of this method alone.
 

Key Concepts

Before you host a web client application in Catalyst, make sure to upload the client resources in the right format.

Sources File Format

You must ensure that you upload the client resources of your web application in the right format to host it in Catalyst without any errors.

To host a web client application in Catalyst, you need to upload the source files of the web application in the standard project directory structure. This is explained in detail in the Project Directory Structure help page.

Here's a quick look at the standard project directory structure in Catalyst:

  • The project directory fundamentally contains two folders: functions and client. You must upload the client directory alone in Web Client Hosting. The client directory should contain all the front-end client files of the application, such as the JavaScript, HTML, and CSS files.  
    Note: The catalyst.json configuration file is not required when you host your web application from the Catalyst console in Web Client Hosting. It is only required to be present when you deploy your application files from the CLI or from a GitHub repository.  
  • The client directory must contain two files: an index.html file which is the homepage of your web app, and a client-package.json file that contains the configuration information of the client resources. All other front-end styling, scripting, or HTML files are optional, based on the requirements of your web app.
    Note: When you initialize the web client using the CLI, the CLI automatically creates the client-package.json in its boilerplate structure. However, if you did not use the CLI to initialize your web client, and you deploy the client using the console directly, you must ensure that you create the client-package.json file in the client directory manually and include the necessary code in it in the standard structure. You can refer to the help on client-package.json file structure.
  • You must provide the name of your web app in the client-package.json file. This will be the final name of your application. Once you set a name for it and host the application, you must not change it.
  • In case you rename the index.html file or you wish to use a different file as the home age of your web application, you must make the necessary changes in the client-package.json file.   

Once you have followed all the guidelines mentioned above, you can host your web application from the Catalyst console. Any discrepancies from the standard directory structure could result in an error in hosting the application.

 

Default Web Application URL

You can obtain the default URL of your application from Web Client Hosting or from the Environments settings section in your console, after it is hosted.

The default application URL is generated for the Development environment when you host your application. After you deploy your application to Production, a Production URL is generated.

The Development and Production URLs slightly differ in their formats. Both URLs contain the same:

  • Project Domain Name: The unique domain name that is generated for your project when you host it in Web Client Hosting. Example: shipmenttracking-57673975.
  • Application Domain: The domain for all the Catalyst applications you host, which is 'catalystserverless.com'.

However, the Development application URL also contains the environment type, and its value is development. For example, 'https://shipmenttracking-57673975.development.catalystserverless.com'.

The environment type is not specified in the Production URL. That is, the production URL will be 'https://shipmenttracking-57673975.catalystserverless.com'.

As mentioned in the Introduction, you can also map your domain with Catalyst and use that URL instead.

Application Versioning

Application versioning can be handled easily in Catalyst. The client-package.json configuration file contains the version information of your web client.

The following guidelines must be followed while providing the version information in the client-package.json file:

  1. You must specify the version number of the application in the decimal format in the field version. The version is specified as '1.0.0' by default, when the JSON file is created.
  2. With every subsequent update of your web app, you must modify the version number in the JSON file incrementally to indicate the next higher version.  
  3. You must not decrement the version number once the web app has been hosted. This will cause errors.
  4. You must not retain the same version number, if you have modified the web app and you are deploying the changes to the Production environment. You must update the web app's version incrementally.
  5. If you delete a version of your web app that is lower than the currently live version, you will not be able to replace that version, as you cannot deploy a decremental version. However, if you delete a version of your web app that is higher than the currently live version, you can deploy another instance of your web app with the same version number as the deleted version.

The version information of your web app is displayed in the App Version History section in Web Client Hosting.

 

Benefits

  1. Fast Content Delivery
    Catalyst's Content Delivery Network edge nodes span across the world. This ensures a fast delivery of content for the end-users in all geographical areas. Catalyst also ensures minimal latency, and serves both static and dynamic content with equal quality in performance.
  2. Supportive of Multiple Kinds of Web Applications
    Catalyst enables you to host a variety of web application types, such as both static and dynamic applications. You can structure and build your application, and use different content types ranging from HTML and CSS, to any framework or library of JavaScript, such as Angular, React, or Ember.
  3. Secure Connection
    Catalyst prioritizes the security of your web application, and ensures that the end-users have a safe and reliable experience using the web app. All applications hosted through Zoho Catalyst's domain contain an SSL security certificate by default. If you map your organization's own domain to your web app, Zoho will provide you a free mandatory Group SSL certificate for your domain.
  4. Scalable and Accomodative
    Catalyst provides efficient, scalable server resources. Based on the fluctuating needs of your application, Catalyst's servers are scaled up or down to accommodate the present load. It ensures a smooth consistency in your web app's performance and speed, irrespective of the number of active connections or API calls made to the server.
  5. Easy and Quick Access
    You can easily host your web app and deploy the resources of its client directory in a few simple steps from the Catalyst console. Once you deploy resources, your web app is made available on the server within seconds. You can test it thoroughly in the Development environment before deploying it to Production.
 

Implementation

The implementation section acts as a step-by-step procedure guide on hosting, updating, and rolling back a web application from the Catalyst console. 

 

Host a Web Application

As mentioned earlier, the client-package.json file contains all the configuration information of the web app. You must provide the name, description, version, and homepage information of your web app in it. You will not be required to provide this information again while hosting the web app from the console.  

To host the client files from the Catalyst console, you must upload them in Web Client Hosting in a zip file format. You can name the zip file whatever you wish. 

This will automatically make the files available in your console. Once the client package is deployed, Catalyst will generate the web app URL for your application.

Note: When Catalyst extracts the zip file, the client-package.json file must be present in the root. Therefore, instead of compressing the client folder as a whole, you must navigate inside the client folder, select all the files in it and then compress them together.  

Let's host a web application in the ShipmentTracking project.

To host a web app from the Catalyst console:

  1. Navigate to Web Client Hosting under Host and Manage.
  2. Click Upload to upload the zip file of your web app.
  3. Select the zip file to upload from your computer in the pop-up window, then click Upload.

Your web app will be hosted automatically and displayed in Web Client Hosting.  

When your application is successfully hosted, the default application URL will be automatically generated for it, and displayed here. You will now be able to access the application from this URL. 

 

Update a Web Application

As discussed previously, you must provide your application's version information in the client-package.json file before you update your application. You must follow all the guidelines of uploading a web application while uploading an updated version of it as well.  

All your version upgrades are displayed under App Version History, along with all the necessary details.

To upload an updated version of a web app:

  1. Click the ellipsis icon on the right-hand corner, then click Update.
  2. Select the zip file to upload from your computer in the pop-up window, then click Upload.

The updated version of your application will be hosted and the details will be displayed in this section.

You can upload any number of updates of your application as required, but you will not be able to rename the application.

 

Deploy an Older Version of a Web Application

You can roll back to an older version of your application in the following way:  

  1. Select the required older version of the application using the checkbox, under the App Version History section.
  2. Click Confirm in the pop-up window.

The older version of your application will now be hosted.  

You can switch to any previously deployed version of the application in the same manner. 

 

Delete a Version of a Web Application

You can delete any version of your application that is not currently hosted in the following way:

  1. Click the delete icon for the version that you want to delete under App Version History.
  2. Click Yes, Proceed in the pop-up window.

Download a Web Application

You can download the current version of your web application that is hosted from Web Client Hosting to your local system, in case you require it. This can be done by clicking the ellipsis icon on the right-hand corner, then clicking Download.

A zip file of the client package that you had uploaded while hosting the application will be downloaded to your system.

Share this post : FacebookTwitter

Still can't find what you're looking for?

Write to us: support@zohocatalyst.com