Set up UI IDE
Learn how to install UI IDE for additional support in development.

Overview

The UI IDE (User Interface - Integrated Development Environment) helps and enables the rapid development of your front-end applications for the C3 AI Suite. For more information about UI IDE, go to UI IDE Overview.

Set up UI IDE

UI IDE is only compatible with Intel-based Mac laptops.
  1. 1.
    Provision your package to your C3 Server. To learn how to provision, see Provisioning the package in the developer portal.
  2. 2.
    Download the compatible UI IDE zip file for your c3server version.
    To find current c3server version, run: SystemInformation.about() in the static console.
  3. 3.
    Create Vanity URL in the static console.
    1. 1.
      From the web console, open the developer tools and run:
    1
    VanityUrl.create({
    2
    id: "demo",
    3
    name: "demo",
    4
    tenant: "<yourTenant>",
    5
    tag: "<yourDev>",
    6
    defaultContent: "c3/index.html"
    7
    })
    Copied!
  4. 4.
    Add an entry to your /etc/hosts file.
  5. 5.
    Connect your package to UI IDE.

Connect to remote c3server

  1. 1.
    In the UI IDE, go to the settings page.
  2. 2.
    In UI IDE Settings, scroll down until you see c3server URL and c3server Auth Token.
    • Enter the c3server url and the appropriate c3server authenticator token. Run, Authenticator.generateC3AuthToken() to fetch your authenticator token.
    • Configure your repositories (and any other desired settings).
  3. 3.
    Click Update Settings to confirm updates and reset the UI IDE application.

Tips

Increase the memory size for large UI applications (e.g., uiDemo).
  • In UI IDE, go to UI IDE Settings
  • Scroll down until you see Webpack Dev Server: Max Memory
  • Set the Webpack Dev Server: Max Memory to 14000MB
To reduce the memory usage when developing with UI IDE using the provisioner tool:
  • Run: UiBundler.disable()
  • To enable UiBundler again, run: UiBundler.enable()
To reduce bundling time provision your package without the -E flag, if you do not need to:
  • run tests
  • instrument the code for code coverage
  • use any seed data or types that are in the test folder
Once you are ready to run tests, provision with the -E flag.

Troubleshoot

If an error occurs during Installing dependencies of the launch process, it can be remedied by either:
  • Going back to the launcher page (home icon)
  • Clicking the "Reset UI-IDE" button

Other common issues and possible solutions.

Issue
Suggestion
Bundling fails to complete
Return to the home page and select Open Application again. If this proceeds, make your memory for UI IDE is at least 14000MB.
remoteEntry.js error
The cause could be by an incorrect effectType that didn’t exist in a JSON config. Remove inexistent epic or fix the epic.
UI IDE is stuck at step 2
Run npm cache clean --force to clear npm cache.

Best Development Practice

Development workflow practice for creating an application with UI Framework is:
  1. 1.
    Complete and save code changes.
  2. 2.
    Close UI IDE.
  3. 3.
    Provision your package.
  4. 4.
    Review the status of uiBundler.
  5. 5.
    Open UI IDE once provision and bundle are complete.
While provisioning or bundling, you must close UI IDE. Once provisioning and bundling has been completed, you can open UI IDE to see your changes. UI IDE takes the most recent updates from both your code from VS Code and the server. In order to avoid inconsistency between your code and the server, you must open UI IDE after you have provisioned and bundled and before you have made any changes to your code in VS Code.