Station Desktop Application

Table of Contents

• Installation
  • Requirements
  • MacOS
  • Windows
  • Ubuntu
  • CentOS / Amazon Linux 2
• Run
• DevTools
  • Toggle Chrome DevTools
  • Library DevTools
    • Redux DevTools
  • Main proces debugging
  • Debugging in VSCode
• Useful env variables for dev
• Migrations
  • Inspect DB
• Packaging
  • Code signing
• Development tools
• Releases
• Documentations

Installation

Requirements

• node >= 12.4.x
• yarn >= 1.7.x

$ git clone https://github.com/getstation/desktop-app.git
$ cd browserX
$ yarn

MacOS

Run this command from a terminal. This will avoid a security prompt at each start related to node-sass hot loader.

# if not already installed, install coreutils
$ brew install coreutils
# then execute firewall script
$ dev_utils/firewall_osx.sh

Windows

Install node-gyp dependencies

$ npm --add-python-to-path install --global --production windows-build-tools

Ubuntu

$ sudo apt install graphicsmagick icnsutils libxtst-dev libx11-dev libxrender-dev libxkbfile-dev libgconf-2-4

CentOS or Amazon Linux 2

$ sudo yum install libX11-devel libXt-devel libXtst-devel xorg-x11-xkb-utils-devel libxkbcommon-x11-devel libxkbcommon-devel

See dotenv for further configuration.

Run

yarn run dev

Natives modules errors

If for any reason you have some error with binding module you could run npm run rebuild-all-native to check if you still have the problem

DevTools

Toggle Chrome DevTools

• MacOS: Cmd Alt I or F12
• Linux: Ctrl Shift I or F12
• Windows: Ctrl Shift I or F12

See electron-debug for more information.

Library DevTools

• React DevTools is available in Chrome DevTools
• Apollo Client DevTools is available in Chrome DevTools
• Redux DevTools see below

Redux Devtools

In order to see redux transactions and state, install Redux DevTools (or the browser extension) and click on Open Remote DevTools. Make sure Use (custom) local server on localhost:8000 is activated in the settings.

Main proces debugging

To inspect the main process, connect Chrome by visiting chrome://inspect and selecting to inspect the launched Electron app.

Useful env variables for dev

• STATION_NO_WEBVIEWS if exists, webviews are not loaded
• STATION_REDUX_LOGGER if exists, will enable redux-logger in renderer
• STATION_AUTOUPDATER_MOCK_SCENARIO set the scenario for the mock of AutoUpdater module:
  • available (default), mock an update is available and downloaded
  • not-available mock an update is not available
• OVERRIDE_USER_DATA_PATH override userData path (example: OVERRIDE_USER_DATA_PATH="Station Canary" yarn run dev)
• STATION_CHECK_INACTIVE_TAB_EVERY_MS override the interval period between each check for inactive tabs
• STATION_WAIT_MS_BEFORE_KILL_TAB override the time to wait before considering a tab is inactive and killing it
• STATION_QUICK_TRANSITIONS all transitions are quick (used to test changing colors)
• STATION_REACT_PERF add the react-addons-perf for react perf debugging
• STATION_NO_CHECK_FOR_UPDATE if exists, the app will not check for update
• DEBUG=service:* Will print debug info of Service framework on all processes
• STATION_SHOW_REQUIRE_TIME if exists, the app will display the execution time of requiring modules upon quit
  • Main: timers shown upon quit (disabled for now)
  • Renderer: to show timers, execute this in a console: require('@getstation/time-require').default() (disabled for now)
• STATION_DISABLE_ECX if exists, electron-chrome-extension will not be loaded

Migrations

Databases migrations are using umzug and umzug-cli.

To test migrations manually:

// Apply migrations
$ yarn run database migrations up
// Revert last applied migration
$ yarn run database migrations down

Inspect DB

Install TablePlus and create a new SQLite connection with the database file located at ~/Library/Application\ Support/Station\ Dev/db/station.db

Manual Packaging

To package apps for the local platform:

$ yarn run build

Code signing

The application will be automatically signed by the CI on the release branch

Development tools

Here is a list of tools used during the development process. Consider adding the corresponding plugins to your IDE.

• Editorconfig
• ESLint
• TSLint

WebStorm and VSCode should be correctly configured by default.

Workspace management (TODO)

This repository should be used as a proper monorepo. Packages that should be impacted:

• appstore (already in this repo but not handled by any monorepo tool yet)
• @getstation/sdk
• @getstation/theme

Releases

1. Draft a new release tagged with the desired version
2. Apply your changes on release branch
3. On release branch, bump the version with yarn version to the corresponding version number
4. Let the CI build artifacts for each platform
5. Publish the draft

Note: you can remove artifacts and push changes over the same draft

Documentations

• Services
• Score Engine
• Bang Lifecyle
• Persistence
• Webpack
• Test Auto-Update
• Local GraphQL