Platform Web App

platform-web-app is a reference frontend app that employs all the Shelf.Network functionality.

Overview

Platform contains three Shelf.Network libraries, which are deployed in the npm.

  1. vuex-helpers - contains Vuex modules
  2. vue-component - contains common components
  3. js-sdk - sdk for communication with a Shelf.Network backend

It is a common Vue ecosystem app, which uses following libraries: Vuex, Vue Router, vuex-i18n and lodash.

Run

  1. npm install
  2. npm run serve

Lint

  1. npm run lint

Lint with autofix

  1. npm run lint-fix

.env

.env files contain:

VUE_APP_GATEWAY_URL - url to backend gateway

VUE_APP_PLATFORM_ID - ID of the current platform

VUE_APP_FILE_UPLOAD_URL - url to the file storage

Webpack

Webpack config includes aliases for directories located in the vue.config.js file

Eslint

Eslint config - Standard with some custom rules. Config extends from distributed-lab/vue

Directories overview

assets/ - contains fonts, icons, images and i18n translations

common/ - common Vue reusable components

constants/ - common constants that can be used in several files

router/ - Vue Router config

services/ - contains js-sdk shelfNetworkSdk.js initialization file

store/ - Vuex store

utils/ - contains some useful utils

Platform Architecture

vuex-helpers provides for the possibility of dynamically registering vuex modules with the ready-to-use business logic, to interact with server entities (e.g., lot, user, etc.).

The key idea of the platform's architecture is to divide Vuex store into two parts:

  • ui - Module that includes all components' ui stores
  • entities - Module that includes all vuex-helpers modules

UI modules perform two tasks: connecting a component to Vuex and proxying Entity getters and actions. Components can connect only to UI modules.

Vue components structure

Platform app has three main components:

  • App: the main component. On mount, hook starts the RUN_APP_CONSTRUCTION action, which generates and registers vuex-helpers modules.
  • Common: component that provides functionality for controlling whether the child UI components are rendered or not. For example, to show 404 page. Also, it starts RUN_APP_INITIALIZATION
  • Layout: layout of the app's UI. Contains: Header, Footer, PopupsWrapper, main <router-view /> components

results matching ""

    No results matching ""