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 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,

  1. .
  2. ├── build
  3. │   ├── icon.icns
  4. │   ├── icon.ico
  5. │   └── icon.png
  6. ├── src
  7. │   ├── application
  8. │   │   ├── Root.tsx
  9. │   │   ├── components
  10. │   │   ├── index.tsx
  11. │   │   ├── pages
  12. │   │   ├── state
  13. │   │   ├── styles.css
  14. │   │   └── typedState.ts
  15. │   ├── transport-manager
  16. │   │   ├── config
  17. │   │   ├── index.tsx
  18. │   │   └── pages
  19. │   └── window-manager
  20. │   └── index.tsx
  21. ├── test-e2e
  22. │   ├── basics.ts
  23. │   └── screenshots
  24. ├── typings
  25. │   └── images.d.ts
  26. ├── workspace.code-workspace
  27. ├── electricui.json
  28. ├── package.json
  29. ├── tsconfig-test-e2e.json
  30. ├── tsconfig.json
  31. └── 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