Quick Project Creation with arc

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

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.

template-generation-with-arc

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.

template-startup-terminal-text

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

template-first-run

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, viewing the underlying Redux state tree which holds the application's state, and performance analysis.

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

template-undock

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

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

shell
.
├── 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.


Next Steps