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 = ;var PageMixin = PageMixin; ; { return <div className="NewPage"> <h1>NewPage</h1> </div> ; } moduleexports = NewPage;
client/stylesheets/NewPage.scss
.NewPage.Page
Setup Route
In order for a page to be rendered, a route must be configured:
client/routes.js
/** * Frontend routes.*/moduleexports = HOME: path: '/' require NEW_PAGE: path: '/new' require NOT_FOUND: path: '*' require ;
Add Component
Create a jsx component with a corresponding stylesheet.
yo webpack-frontend:component NewComponent
client/components/NewComponent.jsx
'use strict' var React = ; ; Component { return <div> NewComponent </div> ; } moduleexports = NewComponent;
client/stylesheets/NewComponent.scss
.NewComponent
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