@mands/mns-fe-pattern-library

FESK Pattern Library

Welcome to the FESK Pattern Library. This npm module is designed to allow consumers to easily include M&S styles and layouts through elements, components, modules and templates in their projects.

Usage

To install the module

npm install @mands/mns-fe-pattern-library

In order for the project to use the styles, include sassPath config in your build config file. For example, if you are using webpack add the following to your webpack.config.js

const patternLibrary = require('mns-fe-pattern-library');

[{
    loader: 'sass-loader',
    options: {
        outputStyle: 'expanded',
        sourceMap: true,
        sourceMapContents: true,
        includePaths: [patternLibrary.sassPath]
    }
}]

In order to implement specific parts of the pattern library - visit fesk-pattern-library-dev.eu-gb.mybluemix.net for more detailed implementation information.

Style guide usage

The style guide is purely a SASS library to provide global styling for

• colors
• grid
• typography
• iconography
• normalization
• accessibility
• utilities

These are all located in lib/mns-fe-styles and as lib is set as a sass path you can @import parts of this using mns-fe-styles as the first part of the path. e.g @import 'mns-fe-styles/colors'. You can also import everything using @import 'mns-fe-styles/all'. It is important that you only import parts of the style guide styles once in your application otherwise you will get duplication in your CSS output.

Setting up

Installing NodeJS

• Run brew update
• Run brew install node
• Check it's installed node -v

*Or alternatively you can follow the official NodeJS installation guide.

Install nvm (Node Version Manager)

Only If you are using a MAC.

• Run cd ~/
• Run curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
• Run nvm install 8.9.0

Install Node Modules

For first time installation, within the fesk-pattern-library repository

• Run npm install

The fesk-pattern-library repository is shrink-wrapped (Find more on Shrinkwrapping here - https://docs.npmjs.com/cli/shrinkwrap). Hence the dependencies would be downloaded from npm-shrinkwrap.json instead of from package.json.

To download the latest version of dependencies, delete the npm-shrinkwrap.json file and then

• Run npm install
• Create a new shrinkwrap file npm shrinkwrap --dev

(Find more here - https://github.com/DigitalInnovation/fesk-documentation/blob/master/how_tos/shrinkwrap_npm_dependencies.md)

Running the app

Run locally

When this is running locally it will run Liniting checks, unit tests and will automatically reload the application when making live code changes both client and server side.

• Run npm run dev

Run production

This is how the application is started after deployment to an environment. This requires the bundled assets.

• Run npm start

Run bundle

If you need to create a bundle locally.

• Run npm run bundle

Development

Lazy Loading

FESK is equipped with lazyloading of images. Example of lazyloading -

1. import the lazyloading script into your javascript like this -

import '../../lib/lazysizes.min';

1. render it with handlebars like this -

res.render('productList', {
    cssBundle: getAssetsPromise.then(bundles => bundles['productList.css']),
    jsBundle: getAssetsPromise.then(bundles => bundles['productList.js']),
    commonjsBundle: getAssetsPromise.then(bundles => bundles['common.js']),
    lazysizesBundle: getAssetsPromise.then(bundles => bundles['lib/lazysizes.min.js']),
    title: 'productList',
});

1. in your view, use like this -

<div class="product__image">
    <noscript>
        <img alt="" src="{{{fullImageUrl}}}" itemprop="image"/>
    </noscript>
    <img class="lazyload" data-srcset="{{{fullImageUrl}}}?wid=135&fmt=pjpeg 135w, {{{fullImageUrl}}}?wid=270&fmt=pjpeg&qlt=45 270w,
                 {{{fullImageUrl}}}?wid=245&fmt=pjpeg 245w, {{{fullImageUrl}}}?wid=490&fmt=pjpeg&qlt=45 490w,
                 {{{fullImageUrl}}}?wid=335&fmt=pjpeg&qlt=90 335w, {{{fullImageUrl}}}?wid=670&fmt=pjpeg&qlt=45 670w,
                 {{{fullImageUrl}}}?wid=218&fmt=pjpeg 218w, {{{fullImageUrl}}}?wid=436&fmt=pjpeg&qlt=50 436w,
                 {{{fullImageUrl}}}?wid=264&fmt=pjpeg&qlt=80 264w, {{{fullImageUrl}}}?wid=528&fmt=pjpeg&qlt=35 528w"
         sizes="auto"
         src="{{{fullImageUrl}}}&fmt=pjpeg" alt="" itemprop="image"/>
   
</div>

Running the tests

JS Linting

• Run npm run lint:js to lint all JS files in the src/ directory and webpack config files.

SASS Linting

• Run npm run lint:sass to check linting issues in all .scss and .sass files in src directory.

A config file named .sass-lint.yml is added at the root folder which contains the list of files included for lint test and rules. This overrides the default config file which is available with same name in node_module.

Unit testing

• Run npm run test:unit to run all unit test files that end in .test.js

CI and Deployment

Concourse

We have extensive Concourse documentation which can be found here!

Deployment

Concourse

Before you can deploy your pipeline you will need to update TEAM_NAME in /ci/deploy-ci-dachs.sh to your concourse team name.

In majority of the cases deployment should be done via Concourse following the steps listed below:

1. Run ./deployment/deploy-ci.sh target hash providing two arguments: target - target enviroments (dev or prod), please note: multiple enviroments can be supplied if necessary, hash - hash of the last commit which should be included in the release.
2. This will create a new tag in the project's repo master branch which will be picked up by correct Concourse pipeline.
3. At this point you should be able to go to Concourse and see how the build is progressing.

Please note: this style of deployment can ONLY be done on master. It is impossible to deploy from a branch using it.

Emergency local deployment

Emergency local deployment is created for the cases where Concourse is unavailable but deployment needs to proceed. To run emergency deploy the following prerequisites must be met.

cf-cli installation

On Mac:

1. Tap the Cloud Foundry formula repository:

brew tap cloudfoundry/tap

1. Install the cf-cli:

brew install cf-cli

On Linux:

Use instructions provided in the Cloud Foundry documentation.

Autopilot installation

1. Download correct binary from the Autopilot's latest release page.
2. Make binary executable by running

chmod a+x path_to_your_downloaded_binary

1. Run

cf install-plugin path_to_your_downloaded_binary

Running emergency deployment

1. Checkout commit you want to deploy to your local machine.
2. Run

./deployment/deploy-emergency.sh target hash

where target is the environment you wish to deploy to and hash is the git hash of the commit you wish to deploy

As with deployment from Concourse, this will create a tag on your current branch as a record of deployment.

How to

How to make a new page

1. Create a new handlebars template in the views directory.
2. In src/server/routes create a new directory with the handlers and routes you need. Don't forget to load them in src/server/routes/index.js.
3. If you want client-side JavaScript and CSS, create a directory in src/client. Add an entry point to the JavaScript file in webpack.config.js. Require the SCSS file in the javascript file in order for it to be recognised by the build system.

/src
    /client
        /examplePage
            examplePage.js
            examplePage.scss
    /server
        /routes
            /examplePage
                handlers.js
                handlers.test.js
                routes.js
        /views
            examplePage.hbs
    index.js      <-- Edit        
webpack.config.js  <-- Edit

How to add a new component

1. Decide whether the new component is an element, component or module
2. Select appropriate name for component
3. run:

npm run new:component [location of component] [name of compoment]

The location of the component assumes that the path will continue from ./lib/mns-fe-patterns/* For example, if I wanted to create an elements called house:

npm run new:component elements house

1. If the generation is successful - you will find your component with the skeleton files:
   • house/
     • data.json
     • markup.hbs
     • meta.json
     • base.scss
     • house.test.js
   • house.scss
2. NOTE: The generator is not capable of adding directories to paths therefore it is imperative to ensure that all directories listed in the path already exist. For example, if I had a folder of elements but wanted to create the house component in a subfolder called houses, the build would fail without the creation of the houses directory prior to the generation of the house component.

Quick Links To Relevant Repositories

• mns-fe-starter-kit
  • Boilerplate application
• mns-fe-foundation
  • Framework
• fesk-documentation
  • FESK Documentation

Contact

Team Pegasus

• Email: [e-mail]
• Slack: #fe-starter-kit
• Jira: https://jira.devops.mnscorp.net/projects/FESK