Public | Automated Build

Last pushed: 2 years ago
Short Description
Marketplace UI
Full Description

FlexMarketWeb

Dependencies

Node.js<br>
Gulp sudo npm install -g gulp<br>
Nodemon sudo npm install -g nodemon<br>
Mocha sudo npm install -g mocha<br>

Getting Started

Currently, all work is branched from and merged to the development branch. To get started:

  1. Clone the git repo.

    git clone https://github.com/FlexShopper/FlexMarketWeb.git
    cd FlexMarketWeb
    
  2. Checkout the development branch.

    git checkout development
    
  3. Create a new branch for the feature you are building.

    git branch [FEATURE_NAME]
    git checkout [FEATURE_NAME]
    
  4. Install dependencies.

    npm install
    
  5. Build and run.

    gulp // This will clean and build css & js
    gulp watch // Watches for file changes and re-compiles onChange
    npm run server // Runs server (with nodemon) in development mode
    

Git Workflow

As previously mentioned, all work is branched from and merged to the development branch. When working on a feature in this repo, please follow the following workflow:

  1. When the feature you're working on is complete and ready to be merged into development, pull from development:

    git pull origin development
    
  2. Resolve and conflicts from the aforementioned pull, double check that everything is working as expected, commit changes, and push to the feature branch.

    git push origin [FEATURE_NAME]
    
    • It's a good idea to pull from development each morning so that you're always working on the most up to date version of the project. This can help you avoid large conflicts when your feature branch is ready to merge.
  3. Submit a pull request to the development branch from your feature branch. This will be reviewed, and if everything is in good order, the changes will be merged in and the branch will be deleted.

Setting Up Loopback Server

We rely on API calls to Loopback for the bulk of our site's functionality, so you'll want to configure and run a local instance of the FlexMarket environment. For detailed setup instructions, see FlexMarket Readme.

Folder and File Structure

The general file structure for layouts and module views is in the views directory and files are structured as follows:

Our view engine - Nunjucks - implements a three-level hierarchy with layouts at the top level, views at the second level and partials at the lowest level (layout > view > partial(s)).

views/
 |
 +-- common/ (page templates)
 |     |
 |     +-- home.nunj // Home page
 |     +-- cart.nunj // Cart page
 |     +-- sku.nunj  // SKU page
 |     +-- ...
 |
 +-- layouts/ (base templates - where individual pages are loaded)
 |     |
 |     +-- base.nunj // Base layout
 |     +-- empty.nunj // Empty layout
 |     +-- common.nunj // Common layout
 |
 +-- partials/ (smaller, self-contained view components)
 |     |
 |     +-- header/
 |     |    |
 |     |    +-- header.nunj      // Header component
 |     |    +-- minicart.nunj    // Mini-cart component
 |     |    +-- mm.nunj          // Mega-menu component
 |     |    +-- ...
 |     |
 |     +-- footer/
 |     |    |
 |     |    +-- footer.nunj      // Footer component
 |     |
 |     +-- sku-page/
 |     |    |
 |     |    +-- bundle.nunj      // Product bundle component
 |     |    +-- choices.nunj     // "More Choices" component
 |     |    +-- sidebar.nunj     // Sidebar component
 |     |    +-- ...
 |     |
 |     +-- ...
  • The _[THING]-base.scss file contains styling logic that applies to both the desktop and mobile templates. This file name is preceded by an underscore because it is not compiled by the sass compiler, but rather, included in the [THING]-desktop.sscs and [THING]-mobile.sscs files.
assets/
 |
 +-- styles/
 |     |
 |     +-- ...
 |     +-- search-page/
 |     |    |
 |     |    +-- display-bar/
 |     |    |    |    
 |     |    |    +-- _display-bar-base.scss 
 |     |    |    +-- _display-bar-desktop.scss
 |     |    |
 |     |    +-- pagination-bar/
 |     |    |    |    
 |     |    |    +-- _pagination-bar-base.scss 
 |     |    |    +-- _pagination-bar-desktop.scss
 |     |    |
 |     |    +-- _search-base.scss       // Underscore tells Sass compiler NOT to compile to a standalone bundle
 |     |    +-- search-desktop.scss     // No-underscore... WILL be compiled to a standalone bundle
 |     |    |
 |     |    +-- ...
 |     |
 |     +-- ...

Code Style Guide

To maintain consitency between the other FlexMarket repos, this repo will follow the same style guides. A .jsbeautifyrc file has been configured to adhere to these styles. If you don't already have a beautifier addon for your IDE, please install one of the following:

Docker Pull Command
Owner
flexhub
Source Repository

Comments (0)