Webpack2 (Babel) Boilerplate

Create pretty applications based on latest Babel and PostCSS/SASS

Getting Started

Lets install dependencies:

$ npm install

..or if you know about yarn

$ yarn

P.S. You'll need to have Node >= 6 on your machine.

Creating an App

Inside that directory, it will contain the initial project structure

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  .babelrc
  .eslintrc
  public/
    favicon.ico
    index.html
  src/
     app/
      components/
        myComponent/
         index.js
         style.scss
     assets/
     images/
       example.png
       example2.jpg
     css/
       main.scss
     fonts/
       font.woff
       font.woff2
     index.js

$ npm start

Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will see the build errors and lint warnings in the console.

$ npm run build

Builds the app for production to the build folder.
It correctly bundles in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

$ npm run start:prod

Starts production example server that looking on build folder. The build is minified and the filenames include the hashes.

Open http://localhost:9000 to view it in the browser.

CSS3 (SCSS) usage

// Feel free to use variables
$red: #ff1700;
$white: '#fff';


.test {
    background-color: $red;
    background-image: url('./cat.jpg');
    // Will be transformed automaticly by autoprefixer
    display: flex;
}

.myClass {
    border-radius: 10px;

    .myClass2 {
        color: $white;
    }
}

JS (ES7) usage

Component example:

 components/
   Button/
     index.js
     style.scss

index.js

import style from './style.scss'

const {myClass, myClass2} = style

const template = `<div class="${myClass}"><span class="${myClass2}"></span></div>`

export default {
  template
}