advocate-cms v1.0.0

advocate-cms

A management system for advocates.

Contents

• Technical notes
  • UI
  • BE
  • Generators
    • advocate.matviiv.com

Technical notes

Dir structure:

• dist/ - build
  • advocate.matviiv.com/ - generated static website
• scripts/ - bash scripts that are used for npm scripts
• src/
  • api/
    • gen/
      • advocate.matviiv.com/
    • model/ - data model
  • ui/
    • app/ - components that are created for this particular app only
    • helpers/ - helper methods
    • utils/ - reusable components (folder for bit
    • redux/ - reducers
    • index.js - main ui file that connects redux and the app
  • assets/ - resources required to present the app, images, fonts, css etc.
  • index.html

Updating version for customers

Each customer will have a separate branch created from master and updating app version on customer site will mean merging master into customer branch and deploying app to prod.

UI

Jest - all tests are placed right next to the origin:

  index.js
  index.test.js

enzyme is being used for writing snapshot tests.

Redux - no action creators are used simply calls for dispatch. Redux state tree is described in main file in redux folder: index.js I decided not to explicitely define (by putting in separate folder or adding some name prefix or postfix) that component is of Container or Presentational type. Component will be considered container if it connects to redux otherwise its presentational.

React components high level stucture:

• App ui- includes global styles, defines routes, provides redux
• AppContainer ui/app - includes menu and renders route
• Menu - ui/app/menu - app main menu
• General ui/app/general - general config page
• NotFound ui/app/notFound - 404 page

BE

Using express nodejs framework.

No db right now everything is stored in js files.

articles.js - list of articles
prices.js - prices tree
config.js - different configs (app, general, css)

Endpoints

• api/v1/about - GET - info about the app (version, ...)
• api/v1/general - GET - returns list of all general configs

Generators

Generates static website using EJS templating.

MVC model implemented:

• model - all model data src/api/model
• view - all EJS templates src/api/gen/site/pages
• controller - all node code in site folder

There must be two ways to generate and publish each website: 1. Dev method: Using npm script and then manually publishing it to hosting. 2. Prod method: Call api endpoint to generate it and publish.

advocate.matviiv.com

A static website.

• pages/ - folder for EJS templates for each page (view)
  • article/ - template for the article page
  • index/ - home|landing page. Prices list is rendered recursively as prices have tree like structure
  • layout/ - layout for all pages, ejs.rednerFile is called for each page and the page name is passed to layout { page: 'index', data } so that it knows what to render, data - additional info required to render the page
• articles/ - articles controller
• prices/ - handles traversing pages tree etc (prices controller)
• index.js - main nodejs file to handle site generation

Generated website will have the following structure:

• assets/ - images, css, fonts etc.
• article/
  • 1/
    • index.html
  • 2/
    • index.html
  • 3/
    • index.html
• index.html - landing page

Generate and publish: 1. Dev - npm run gen, npm run deploy, run deploy script on hosting machine. 2. Prod - not implemented yet.