generator-webpack-frontend

Simple Yeoman generator wielding Webpack, ReactJs, and Sass.

Warning: This is an on-going experiment for me to refine a frontend SPA architecture. As such, this project is subject to random and breaking changes and backwards compatability should never be expected.

File Structure

├── build/
│   ├── *.js (built by webpack)
│   └── index.html
├── client/
│   ├── routes.js
│   ├── components/
│   ├── pages/
│   └── stylesheets/
├── package.json
└── webpack.config.js

Installation

Install with npm:

npm install -g generator-webpack-frontend

Usage

Init

Creates the file structure above in the current directory.

yo webpack-frontend

You can skip the npm install with the --skip-install flag.

Add Page

Create a jsx page with a corresponding stylesheet.

yo webpack-frontend:page NewPage

client/pages/NewPage.jsx

var React = require('react');
var PageMixin = require('../router').PageMixin;
 
require('../stylesheets/NewPage.scss');
 
class NewPage extends PageMixin {
  render() {
    return (
      <div className="NewPage">
        <h1>NewPage</h1>
      </div>
    );
  }
}
 
module.exports = NewPage;
 

client/stylesheets/NewPage.scss

.NewPage.Page {
    /* SCSS */
}

Setup Route

In order for a page to be rendered, a route must be configured:

client/routes.js

/**
 * Frontend routes.
*/
module.exports = {
 
  HOME: {
    path: '/',
    load: (fn) => require.ensure([], () => fn(require('./pages/HomePage')))
  },
 
  NEW_PAGE: {
    path: '/new',
    load: (fn) => require.ensure([], () => fn(require('./pages/NewPage')))
  },
 
  NOT_FOUND: {
    path: '*',
    load: (fn) => require.ensure([], () => fn(require('./pages/404Page')))
  }
};

Add Component

Create a jsx component with a corresponding stylesheet.

yo webpack-frontend:component NewComponent

client/components/NewComponent.jsx

'use strict'
 
var React = require('react');
 
require('../stylesheets/NewComponent.scss');
 
class NewComponent extends React.Component {
  render() {
    return (
      <div>
        NewComponent
      </div>
    );
  }
}
 
module.exports = NewComponent;

client/stylesheets/NewComponent.scss

.NewComponent {
    /* SCSS */
}

Building/Development

Use webpack to build. Watch with -w.

webpack -w

Builds to build/*.js by default.

TODO

API Docs for RouterMixin and PageMixin.

License

MIT