Quick Project Creation
This page covers the basics of creating and running a project. For detailed configuration options, look in the arc documentation.
Starting a new project
To create a new directory structure run:
arc init hello-electric to populate in a new folder called
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 Nameis the human readable name used in the application title-bar, installers/uninstallers, OS applications lists, and in package metadata.
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, 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
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/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
If you are making your own components to keep the UI modular, we recommend putting them in