Nuns Practicing Misanthropy

    generator-react-css-modulesify

    0.0.1 • Public • Published

    generator-react-css-modulesify NPM version Build Status Dependency Status

    React + css-modulesify + gulp + browserify

    This generator creates a new frontend-only project using React. It makes no assumption on your backend. It transpiles all the stuff into static folder, and you can point your statics folder to it on your server, or link it anywhere you want.

    The new project use css-modulesify to provide a webpack-like way of importing styles from css. It provides component scoped css isolation to avoid naming conflict.

    Ideally a component will have a name.js under src/components and name.css under src/css if it needs its own styles.

    Installation

    First, install Yeoman and generator-react-css-modulesify using npm (we assume you have pre-installed node.js).

    npm install -g yo
    npm install -g generator-react-css-modulesify

    Then generate your new project:

    yo react-css-modulesify

    Usage

    Bundling

    The project makes two bundles: one for vendors dependencies, which does not change very often, and one for your app. For every entry file, a compiled css file will be created under statics/css e.g. main.css.

    You can define vendor dependencies and entry files by udpating VENDORS and ENTRIES in gulpfile.babel.js

    # Build vendor bundle 
    gulp build:vendor
    # Build main.js 
    gulp build
    # Build other entry 
    gulp build -f path/to/other-entry.js
    # Build all entries if you have more than one 
    gulp build:all

    Watching

    The project use livereactload to provide hot reloading.

    # Watch mian.js 
    gulp watch
    # Watch other entry 
    gulp watch -f path/to/other-entry.js
    # Watch all entries if you have more than one 
    gulp watch:all

    Note that you have to serve index.html with a server in order for the page to reach the live reload server. Also changes made to css files will not update automatically (yet), you have to manually refresh the page.

    Getting To Know Yeoman

    • Yeoman has a heart of gold.
    • Yeoman is a person with feelings and opinions, but is very easy to work with.
    • Yeoman can be too opinionated at times but is easily convinced not to be.
    • Feel free to learn more about Yeoman.

    License

    MIT © inoc603

    Install

    npm i generator-react-css-modulesify

    DownloadsWeekly Downloads

    0

    Version

    0.0.1

    License

    MIT

    Last publish

    Collaborators

    • inoc603