Modern Frontend Starter

MFS is a minimalistic modern development environment for frontend.

10/10 developer experience
Start hacking in a blink of an eye
Easily extendable
No tedious tools configuration
Easily configurable if you want to
Use SVG, pictures, fonts, whatever you want
Full-featured React support of course!

Let me start please

Copy paste these lines into your terminal, ok?

git clone https://github.com/Noviel/modern-frontend-starter
cd modern-frontend-starter
git remote rm origin
yarn install
yarn dev

NPM scripts

yarn dev - launch hot-reloading webpack-dev-server

yarn build - build assets for production

yarn serve - serve locally built assets

Tell me the details

eslint and prettier = linting and formatting
webpack and stuff = building, bundling and stuff

Go to webpack.config.js in the root directory. You can see that MFS is powered by webpack-features. So check it out if you wanna some tweaks on webpack's config. You can easily turn on support of React, Flow, TypeScript, Scss, less and other cool stuff.

I am really wanna React, TypeScript, Scss, less and other cool stuff

Ok, i see you. This project is a boilerplate, not CLI-tool (for now at least), so time to dirty your hands. You need to manually add corresponding option to webpack.config.js and sometimes install additional packages.

React

yarn add react react-dom

webpack.config.js:

const { react } = require('webpack-features');

module.exports = react();

CSS Modules

Is enabled by default for *.modules.{css|scss|less} files.

Flow

yarn add flow-bin --dev

webpack.config.js:

const { base } = require('webpack-features');

module.exports = base({
  types: 'flow',
});

TypeScript

yarn add typescript --dev

webpack.config.js:

const { base } = require('webpack-features');

module.exports = base({
  types: 'typescript',
});

Scss

yarn add node-sass sass-loader --dev

webpack.config.js:

const { base } = require('webpack-features');

module.exports = base({
  cssPreprocessors: ['scss'],
});

less

yarn add less less-loader --dev

webpack.config.js:

const { base } = require('webpack-features');

module.exports = base({
  cssPreprocessors: ['less'],
});

Other stuff

Checkout webpack-features documentation. You can easily extend configuration with whatever you want.