Client Directory
The client folder in the projects directory contains all the components of the front-end of your application. These include the HTML files of the webpages, the CSS files, the JavaScript files that enable the actionable elements in your webpage, and other required files.
Client Directory Files
By default, the client folder is set up with the following files:
index.html:
The index.html file is the default file name for your web application’s home page. It is created with a sample code structure.
main.css:
The main.css file contains the styling of your web application’s pages. It is created as an empty file.
main.js:
The main.js file defines the functionality of the web application’s home page. It is created as an empty file.
client-package json file
The client-package.json is the configuration file of your client resource. It contains the following specifics of your application by default:
copy
{
"name":"shipmentTracking",
"version":"0.0.2",
"homepage":"index.html",
"login_redirect":"home.html",
"404":"custom404.html"
}
- name: The name of the web client. Once you set a name for it and host the application, you must not change it. Changing the name of the web application after it has been hosted will result in an error.
- version: The version of the web application that is hosted, in the decimal format. With every subsequent update of your application, you can modify the version number in an incremental manner. You cannot decrement the version number.
- homepage: The URL of the web application’s home page. If you modify the name of the index.html file, you must change the value accordingly in this file as well.
Apart from these mandatory specifics, you can include these properties as well:
- description: The description of the web application. This can be modified during version upgrades.
- login_redirect: The page where the user has to be redirected after a successful login to the web application.
- 404: A custom 404 page that you can create for your application. Every time the users of your application try to access a non-existent page resulting in a 404 error, they will be redirected to this custom page.
-
If you are providing a path to a custom 404 page using the 404 key, you can name that file anything as you require. If you don’t configure a 404 key in the client-package.json file, you can still include a page with the exact name 404.html in the directory.
-
Catalyst will search for the key 404 in the clientpackage.json file. If it exists, Catalyst will render that file in the event of a 404 error occurrence in the application. If no path for a custom 404 page is provided in your app, Catalyst will search for any file named 404.html in the client directory. If neither exists, the users will be redirected to a default 404 page provided by Catalyst.
You can further add more client files of your web application, and create sub-folders inside the client folder as you require. However, the client-package.json file must be mandatorily present only in the root of your client resource and not in any sub-folders.
-
A home page for your web application and the client-package.json file are required to be present mandatorily in the client directory. The CSS and JS files are optional, based on your application’s functionality. You can delete the main.css and the main.js files if you don’t need them.
-
When hosting a web application, you must ensure that the specifics mentioned in the client-package.json file are accurate, and you have followed all the guidelines mentioned above. To learn more about hosting a web application, refer to Web Client Hosting .
-
You can setup the client component at any time using the CLI while working with the project. To learn more, refer to Working with the Client .
Last Updated 2023-04-20 21:06:11 +0530 +0530
Yes
No
Thank you for your feedback!
Send your feedback to us