Project Creation with arc

This page covers the basics of installation, creating and running a project. Run arc help for a full list of commands and descriptions.

Installation

We recommend following our Install page, which includes instructions for Windows, macOS and Linux.

Manual download links and instructions are in the tooling troubleshooting doc.

Login

If you aren't logged in to your Electric UI account, arc will interactively prompt as needed.

To manually log-in, run arc login.

If you need to pass credentials for your CI system, use the environment variables ARC_EMAIL and ARC_PASSWORD. Additional CI related docs are in the Release section.

Starting a new project

To create a new directory structure run: arc init hello-electric to populate in a new folder called hello-electric.

You can use arc init to use the working directory if it's empty.

This will bootstrap a new project in the directory specified. Follow the prompts to enter the product name.

Product Name is the human readable name used in the application title-bar, installers/uninstallers, OS applications lists, and in package metadata.

Examples: Fancy Datalogger, Killer Robot UI, Harmonica Test-Jig Controller

This process will download all dependencies required and set everything up.

Running the development environment

To run the program, jump into the top level project directory and run arc start to boot the development interface.

You should see the main application window open and show a connection screen, with either a split-window, or separate debugger window.

When the development environment started, a secondary section or window will have also spawned, presenting the debugger for the render thread. This debugger is useful for UI troubleshooting and performance analysis.

We strongly recommend splitting it into a separate window and changing the debugger view to the Console tab.

You can also toggle the debugger through the title-bar menu DevTools > Toggle Developer Tools.

Navigating the project directory

Electric UI templated projects have a folder structure that looks like this,

.
├── build
│   ├── icon.icns
│   ├── icon.ico
│   └── icon.png
├── src
│   ├── application
│   │   ├── Root.tsx
│   │   ├── components
│   │   ├── index.tsx
│   │   ├── pages
│   │   ├── state
│   │   ├── styles.css
│   │   └── typedState.ts
│   ├── transport-manager
│   │   ├── config
│   │   ├── index.tsx
│   │   └── pages
│   └── window-manager
│       └── index.tsx
├── test-e2e
│   ├── basics.ts
│   └── screenshots
├── typings
│   └── images.d.ts
├── workspace.code-workspace
├── electricui.json
├── package.json
├── tsconfig-test-e2e.json
├── tsconfig.json
└── yarn.lock

The main directories of interest are /src, with /src/transport-manager/config containing the configuration files relevant to communicating with your hardware, and /src/application/pages contains interface layouts and the 'business logic' which makes up your application.

Put assets like artwork next to your UI layouts in a new folder like /src/application/resources.

If you are making your own components to keep the UI modular, we recommend putting them in /src/application/components.