@mands/mns-fe-pattern-library

To install the module npm install mns-fe-style-guide and then require('mns-fe-pattern-library') in your code where you want to set the sassPath, which is exposed as sassPath from the module. For example:

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

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

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 other wise you will get duplication in your CSS output.

fesk-pattern-library

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 6.11.2

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

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