blob: 0fb325d302695da70e4e2054e860e7670f85c736 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
# Mullvad VPN
## Command line tools
- `$ yarn run develop` - develop app with live-reload enabled
- `$ yarn run flow` - type-check the code
- `$ yarn run lint` - lint code
- `$ yarn run docs` - generate HTML documentation
- `$ yarn run pack` - prepare app for distribution for macOS, Windows, Linux. Use `pack:mac`, `pack:win`, `pack:linux` to generate package for single target.
- `$ yarn run test` - run tests
## Structure
- **app/**
- **actions/** - redux actions
- **reducers/** - redux reducers
- **components/** - components
- **containers/** - containers that provide a glueing layer between components and redux actions/backend.
- **lib/** - shared classes and utilities
- **assets/** - graphical assets and stylesheets
- **config.js** - static configuration file
- **app.js** - entry file for renderer process
- **main.js** - entry file for background process
- **routes.js** - routes configurator
- **store.js** - redux store configurator
- **enums.js** - common enums used across components
- **tilecache.sw.js** - service worker for caching mapbox requests
- **test/** - tests
- **scripts/** - support scripts for development
- **init.js** - entry file for electron, points to compiled **main.js**
- **distribution.yml** - distribution configuration
## App diagram
## View layout
Most of application layouts consist of header bar area and main content area. Three of components from `components/Layout` help to assemble each view, i.e:
```
<Layout>
<Header />
<Container>
{ /* content goes here */ }
</Container>
</Layout>
```
## Backend communication
Backend is connected with the app via event system.
Backend events are translated into redux actions. There are two helpers responsible for events translation:
- **app/lib/backend-redux-actions.js** - translates events into redux actions
- **app/lib/backend-routing.js** - application logic based on received events (i.e managing active route etc..)
|
