react-browserify-sass

Yeoman generator for a really basic web app scaffolding that includes React, Browserify and Sass.

Installation

npm install -g generator-react-browserify-sass

If you don't already have Yeoman installed on your system, you can install it with the following command.

npm install -g yo

Usage

Switch into the project directory and run this generator with the Yeoman command line interface like so.

yo react-browserify-sass <appName>

In that example, <appName> represents the name of your application which will be used as the name field in the package.json file, the default content in the <title> tag of the generated index.html file and as the default class name of your application's root element in the generated App.jsx component as well as the main.scss SASS file.

Create a new React component with the component sub-generator as follows.

yo react-browserify-sass:component <componentName>

In that example, <componentName> represents the name of your component which will be used in generated filenames and as the class name for the component's root element.

Results

Generator

The base generator:

1. adds .eslintrc, .gitignore, gulpfile.js, index.html, package.json, components/App.jsx, js/index.js, and sass/main.scss to the directory.
2. runs npm install to pull in all the modules referenced in the package.json file.
3. runs gulp which calls the lint, javascript and styles tasks to initialize the application.

The directory should contain the following directory and file structure when all is said and done.

.
├── components
│   └── App.jsx
├── dist
│   └── bundle.js
│   └── main.css
├── js
│   └── index.js
├── node_modules
│   └── buncha module directories
├── sass
│   └── main.scss
├── .eslintrc
├── .gitignore
├── .yo-rc.json
├── gulpfile.js
├── index.html
└── package.json

Sub-generator

The component sub-generator:

1. adds components/<componentName>/<componentName>.jsx where <componentName> is the value provided to the sub-generator.
2. adds components/<componentName>/<componentName>.scss.
3. adds an @import of the component's new .scss to sass/main.scss.
4. runs gulp.

Available gulp tasks

The installed gulp file includes the following tasks:

• javascript: runs browserify using babelify as the transformer with js/index.js as the entry point and outputs dist/bundle.js.
• lint: runs eslint on all .js and .jsx files in the components and js directories using eslint-plugin-react for React's specialized JSX syntax.
• styles: runs sass on all .scss files in the components and sass directories and outputs dist/main.css.
• build: runs the lint, javascript and styles tasks in that order.
• watch: runs the build task and then sets up watchers each of the individual tasks run by build.
• serve: runs the watch task, starts a local server on port 8899 and launches a web browser that loads http://localhost:8899/index.html.
• default: runs the build task.