Setting up the Local Environment and Workspace

This section provides you an insight into customizing the user interface for the AgileApps platform UI. It helps you understand how to setup the local development environment and a workspace, for a simple CUI template. It includes the following information:

• Prerequisites
• Installing the dependencies
• Creating an initial workspace and a starter app
• Running the starter app locally to verify your setup

Note: The instructions provided here describe only about how to setup the workspace for a simple template. If you consider using any frameworks, like Angular, BackboneJs, React or VueJs, and so on; you have to follow the workspace setup instructions pertaining to your choice of framework.

Prerequisites

Following are the prerequisites for developing a CUI template:

• Have Knowledge of HTML, CSS, JavaScript.
• Understand the file and directory structure for a CUI.
• Understand the AgileApps platform.
• Have a working installation of Node.js, npm package manager, and GIT.

Step 1 - Create a workspace

Create a workspace and clone the boilerplate template from GIT hub.

First, create a local directory as your workspace directory. Then, launch the Git bash and navigate to the workspace directory. Here, execute the following command:

git clone https://github.com/agileapps-dev-com/agileapps-cui.git

Step 2 - Configure development server

Configuring the development server

The webpack Dev Server is used as the development server. In this step, we make changes to the webpack server configurations present in the webpack.config.js file which is inside the cloned “agileapps-cui” directory.

Navigate to the “agileapps-cui” directory and then open the “webpack.config.js” file using the Notepad or any other text editor.

Update the “target” value to your agileapps instance.

Note: If your AgileApps instance is enabled with a subdomain, then specify the subdomain in the target property. For example, https://{subdomain}.agileappscloud.eu

Configuration changes are as follows:

/* Update the target value into your agileapps instance path include port as well, if any. */
     proxy: [{
      context: ['/networking', '/ace-lib'],
      "target": "https://agileapps-instance-path",
      "secure": false,
      "changeOrigin": "true"
    }]
 

Step 3 - Install the dependencies

Install package dependencies

In this step, install the internal package dependencies required for the workspace.

To install the dependencies using the command prompt, navigate to the “agileapps-cui” directory and execute the following command:

npm install

Note: This command installs only the internal dependencies required for the workspace.

Step 4 - Start the development server

Launch the boilerplate CUI template

In this final step, launch the boilerplate CUI template from the workspace. Use the following code to start the development server:

Issues with server startup?

If you encounter any issues while launching the development server, refer to the exception shown in the command prompt that you use to launch the server.

All the webpack related configurations, including the host, port, and so on, can be modified in webpack.config.js.

Access the application using a web browser
You can access the simple CUI template using the following URL: https://localhost:8054/simple/index.html

Note: Use this link - https://github.com/agileapps-dev-com/agileapps-cui to access the “simple” CUI template present in “~/agileapps-cui/src/simple”.

Modify the “simple” CUI template
You can modify the content inside “~/agileapps-cui/src/simple”.

Important Notes

• Use index.html as the starting file.
• Create the js/css/html files as per youre requirement. However, you should follow the directory structure guidelines.
• You can create a new folder under “~/agileapps-cui/src”. If you create a new folder, take a backup of the constitutent folders structure from the path “~/agileapps-cui/src/simple”
• If the custom UI is coded in a different folder under “~/agileapps-cui/src/", use the name of the folder to substitute {folderName} in the link http://localhost:8054/{folderName}/.