Skip to content

Latest commit

 

History

History
110 lines (70 loc) · 3.65 KB

DEVELOPMENT.md

File metadata and controls

110 lines (70 loc) · 3.65 KB
Raw

Development Guide

Prerequisites

Install these software:

Development

  • Install the Node dependencies

    yarn install

  • Then start the server with autorestart on file changes (reload is still manual).

    yarn start

The application is available at http://localhost:5000/.

Building for production

  • Build the assets for production.

    yarn run build

  • Then build the server.

    go build

  • Now a binary called onetimesecret should exist and the frontend content should be located in the .build folder.

Design

Goals

Compatibility

JavaScript

The forms use traditional HTTP POST requests so that the application can work without JavaScript on the client side. JavaScript enables client-side encryption so it is recommended though not enforced.

HTML

Pug is used to simplify the markup language and ease the developments of pages.

Styles

Stylus is used as a CSS preprocessor. Usage of the BEM methodology is recommended by leveraging the & keyword of Stylus. The pages are currently very simple so each page is viewed as a BEM component.

Traditionnal HTML elements such as links and buttons usually have their own style because they are used in multiple pages.

Logo icons

  • Edit the vector images in frontend/src with Inkscape.
  • Then, inside the project root, use the following commands to export the images to png.
inkscape -z frontend/src/logo-icon.svg --export-png frontend/public/images/icon-512.png -w 512 -h 512
inkscape -z frontend/src/logo-icon.svg --export-png frontend/public/images/icon-192.png -w 192 -h 192
inkscape -z frontend/src/logo-icon.svg --export-png frontend/public/images/icon-32.png -w 32 -h 32
inkscape -z frontend/src/icon-lock.svg --export-plain-svg frontend/public/images/icon-lock.svg

Project Structure

  • .build: temporary folder containing the compiled assets
  • common: contains interfaces that are used by other packages
  • conf: contains the configuration of the application and its default values
  • frontend: contains all frontend-related stuff
    • public: contains all assets that directly served to the browser
    • templates: contains the pug pages that are rendered in the browser
    • src: contains images in the source format (svg)
    • styles: contains the stylus files for styling the pages
  • helpers: contains some helper functions that have no external dependencies and can be used by any package
  • httpserver: contains the HTTP layer that serves the static content, render the pages and expose an API to interact with the store
  • node_modules: contains the Node dependencies, managed with yarn
  • store: contains the business and database layer responsible of persisting and retrieving the data from redis
  • tests: contains End-to-End tests
  • vendor: contains the go dependencies fetched by dep