Generator-webpack-frontend NPM

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