Overview of UI IDE
The UI IDE helps and enables the rapid development of your front-end applications for the C3 AI Suite.
UI IDE is only compatible with Intel-based Mac laptops.
The UI IDE (User Interface - Integrated Development Environment) serves as a local development environment complement to UiBundler. The UI IDE helps and enables the rapid development of your front-end applications for the C3 AI Suite. UI IDE is in Beta.
UI IDE provides a way to:
  • Debug front-end code. UI IDE ships with react and redux developer tools.
  • Set breakpoints in your jsx/tsx code.
  • View and run the relevant test files for the package and dependent packages.
  • Generate code coverage reports and view documentation in the report that explains the various metrics.
The UI IDE has a feature called Hot Module Replacement (HMR). This feature watches certain files for changes and automatically updates the changes in UI IDE without the need to reprovision or rebundle. The HMR watches the following types of files:
  • Typescript implementation files (*.ts)
  • Typescript React renderer files (*.tsx)
  • Browser test files
  • SCSS files
  • Route seed data
  • Translation seed data
There are times when reprovision and rebundle are required. You must reprovision and rebundle if you have created or made changes to these files:
  • C3 Type files
  • JavaScript files
Go to Set up UI IDE to set up your UI IDE.

Overview of Settings

The UI IDE toolbar has the following options:
  • Home: Shows all Vanity URLs on your local server and any defined remote URLs.
  • Settings: Change the UI IDE application settings.
  • Alerts: View any alerts triggered by running application processes.
  • Code Coverage: View details on the various metrics of your previously executed tests.
  • Documentation: View UI IDE application documentation.
  • Server Status: Displays a green check mark to indicate the C3 Server is running and connected.
  • Provision: Select to provision the application package.

Home

From the Home page, you can select to:
  • open application for development
  • run tests

Open Application

Select Open Application to view your application from UI IDE from the Home page. Once the bundling process is complete, UI IDE loads the application.
An example image of an application is shown through UI IDE.

Run Tests

Select Run Tests to displays all the available tests for your application from the Home page.
The application must have been provisioned with test Types (--provision-test flag). For more information on provisions, go to Provisioning the package in Developer Portal.
Select the desired test to execute. The results are then displayed.

UI IDE Settings

In order to access the UI IDE Settings, select the settings icon in the top right corner.
  • Repositories: Enter the absolute path to the repository contained in your provisioned packages.
  • Working Directory: Set a working directory for UI IDE (optionally).
  • Hosts: Configure any desired remote hosts by entering the corresponding Vanity URL and Auth Token.
  • Webpack Dev Server: Max Memory: Set maximum memory (in MB) available for the Webpack Development Server. When working with large applications, we recommend allocating at least 14000MB.
  • Webpack Dev Server: Port: Set to 19541 by default for local Docker development.
  • c3server URL: Enter the URL of the C3 Server to which you are connecting. Set to 127.0.0.1:8080 by default for local development.
  • c3server Auth Token: Enter your authentication token for connecting to the desired C3 Server. To fetch your authentication token, run Authenticator.generateC3AuthToken() in your static console. This does not authenticate your user. For more information on authentication, go to HTTP API in developer portal.
  • Enable Hot Module Replacement
  • Enable Bundle Analyzer Report

User Preferences

In order to access the User Preferences, select the settings icon in the top right corner.
The following options are available:
  • Log Level: Decide at which severity level to view the log message.
  • Open UI IDE Window Maximized
  • Open DevTools Automatically
  • Enable webpack notifications

Alerts

From the Alerts page, you can view the details of all triggered alerts.

Code Coverage

After executing your desired tests, use the Code Coverage page to view a detailed report.

Toggle IDE Debugger

There are additional settings on the standard toolbar on your Mac computer. To go to Toggle IDE Debugger, hover over View > Developer to access Toggle IDE Debugger.