FFFAST

create and watch a webtech experimentation folder

Install

npm install fffast -g

Commands

Usage: fffast / create and watch a webtech experimentation folder

$ fffast {command}


Commands:

  init|i    copy basic structure into current folder and start fffast
  run|r     run fffast in development mode, same as 'fffast'
  build|b   create optimized production (./dist) folder
  serve|s   serve the ./dist folder

Options:

  -h, --help     output usage information
  -V, --version  output the version number

Usage

Starting with an empty folder

fffast init creates a ./src folder

based on the template folder

/js
  script.js

/css
  reset.css
  normalize.css
  style.css

index.html

.editorconfig
.eslintrc

Creating your own ./src folder

• js/script.js
• css/style.css
• index.html

are required, the rest is optional

run the fffast command in the root folder

Running fffast

fffast / fffast r / fffast run

to serve and watch the ./src folder with webpack-dev-server

Building a ./dist folder

fffast b / fffast build

creates an optimized ./dist folder and runs it with lite-server

(you can use fffast s / fffast serve to serve the ./dist folder)

JavaScript

Babel

ES6 and beyond with Babel

• stage 0 features are enabled
• react
• babel-plugin-lodash

Linting

if there is a .eslintrc file present, the files are linted using ESLint

You can use the .eslintrc file in the template folder

• eslint-plugin-react linting rules are available

CSS / PostCSS

Using postcss-loader

Following postcss plugin is used:

• postcss-cssnext enables new CSS features

Extra

node modules

You can install node modules and import them in your JavaScript files. fffast also looks in the local /node_module folder when you import.

(React, React-DOM, React-Router (v4) and Lodash are preinstalled)