forefront

Requirements:

• Node 6.10.x
• nvm
• yarn

Installation

$ nvm install
$ yarn

Quick Start

$ nvm use
$ npm run dev
$ npm test

Usage

First, install your dependencies, there is a yarn.lock file, make sure you have yarn installed globally:

yarn

To start a hot reload dev server and watch files for development:

npm run dev

and then run tests when you're done making changes:

npm test

or to build, cachebust, and minify all assets for production:

npm run build

You can also optimize PNG and JPEG images using tinify:

1. Set the TINIFY_API_KEY environment variable to your Tinify api key, get one here.

2. npm run tinify

SUIT CSS

mo-static uses SUIT CSS to package its css but it does more than just that. Suit comes with a bunch of CSS packages such as a grid and buttons. It also ships with a whole bunch of utilities for text positioning, visibility and layout. All of these components and utils are included by default since we import suit completely in app.css. Some useful docs of utilities and components include:

• Grid component
• Button component
• Text utilities (alignment, truncation, line breaks)
• Display utilities (block, inline, hidden)
• Position utilities (relative, absolute, full screen

A list with all utilities can be found here and a list with all components can be found here

Configuration

convict is used to handle configuration which lives in config.js.

The convict instance just holds a JavaScript object. In there you can define all variables you like. If they have an env key the default value will be overwritten if the value is present in the environment variables. If you want to be even more specific with values only being present in some environments you can uncomment these lines and create the appropriate files:

// var env = config.get('env');
// config.loadFile('./config/' + env + '.json');

gulp-nunjucks automatically passes all this data when it compiles your HTML. This means you can just output {{ SECRET_MESSAGE }} within your HTML and the compiler will replace it with whatever value you have configured.

As for the JS you need to explicitly indicate which values you want passed to your code via webpack to prevent passing any sensitive data. You can do so by modifying the webpack.config.js file, we use the DefinePlugin to make our environment variables available in our code. This means you can use process.env.SECRET_MESSAGE in your Javascript files and the appropriate environment variable will be substituted during the build process to be shipped in the browser.

⚠️ WARNING: Due to how Heroku pipelines work, the environment variables are piped into your code during build time. This means that when you promote an app from staging to production within a pipeline that the environment variables from staging will also make it to prdouction, since Heroku doesn't build again on production.

🔐 TIP: Don't leak secret keys, neither by commmitting them nor by passing them to your JS. If the var you are using should be kept secret, you should not add it to config.js.

Testing

Nightwatch Cucumber is included for E2E testing of the project. Tests are written in gherkin syntax and then implemented as steps matching the lines of gherkin.

Standard

Standard is used for static analysis of JavaScript files. Standard, compared to ESlint allows/needs no configuration, if you really need to suppress a warning you can take a look here.

Stylelint

Stylelint is used for static analysis of CSS files. There is a suitcss config installed for Stylelint. All configuration lives in stylelint.config.js , it exports a object that can be passed to the suitcss preprocessor in build.js and be used when running npm run lint

• 4 spaces for indentation.
• Properties in alphabetical order
• Only single quotes.
• No vendor prefixes (autoprefixer is enabled).
• Max of 2 adjacent empty lines.
• Required empty line between nested selectors, except first nested.

Deploying to Heroku

To deploy your new mo-static project to Heroku you'll need these buildpacks, in this order:

• Nodejs: heroku buildpacks:set https://github.com/heroku/heroku-buildpack-nodejs -a <my-app>
• Heroku Static Buildpack heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git -a <my-app>

Generated by mo static.