Skip to content

Latest commit

 

History

History
91 lines (58 loc) · 3.16 KB

README.md

File metadata and controls

91 lines (58 loc) · 3.16 KB
Raw

Accelerated Text Front-End

The single-page application for editing document plans.

Usage:

Dependencies

  • You should have NPM installed in your path. Get it from [Nodejs.org][Nodejs].
  • You should have Accelerated Text back-end services running (see Environment below).

Running

npm install
npm start

You should see this message in the output after a successful compile:

ℹ ｢wdm｣: Compiled successfully.

Open your browser at localhost:8080.

Environment

The application expects back-end services running on ports 3001, 8081, 8090 and an S3 bucket URL for uploading CSV data files.

You can override the URLs via environment variables. E.g.:

ACC_TEXT_GRAPHQL_URL=https://example.org/_graphql npm start

See file .env.defaults for the variables you can use.

Development

The app uses Preact v10.x, Apollo GraphQL client and Blockly.

It is built with Babel and Webpack. Tests are run with AVA test runner.

You can start exploring the application from ./packages/webpack.config.js and ./packages/app/start-in-browser.js file.

Also don't forget to open DeveloperTools in your browser.

Directory structure

  • ./ The root directory contains configuration files
    • ./assets/ Assets include images and link to the pre-compiled Blockly libraries.
    • ./dist/ The directory for compiled files.
    • ./node_modules/ Dependencies.
    • ./packages/ Source code for the app.

./packages

The application is split into tens of smaller NPM-like packages with modules which depend on each other.

Some important packages:

  • accelerated-text: main view Component and global application state.
  • app: global CSS styles and the script that runs the app in a HTML page.
  • blockly-helpers: some utility functions for Blockly.
  • graphql: queries, mutations, fragments, set-up script and some utility functions.
  • inject-blockly: a package that lets use Blockly as a dependency instead of setting it up globally.
  • nlg-blocks: custom Blockly blocks used in the app.
  • nlg-workspace: Blockly Workspace wrapper Component.
  • plan-editor: UI used to edit document plans. Also the right Sidebar.
  • shortcuts: keyboard shortcut configuration and action implementation.
  • styles: global [Sass][Sass] variables and mixins.
  • tests: tests, data generators, AVA macros.
  • webpack: Webpack configuration.