Norwegian Puffin Movies


    1.5.9 • Public • Published

    React Frontend Boilerplate

    npm version Build Status


    This is a little react project boilerplate for frontend-only projects. I made this so I can quickly made mini projects when bored.

    Component Module
    View engine React
    Source JS ES6
    Source Styles SASS
    Source compilation Webpack with Babel
    Dev server Browsersync
    Testing framework Mocha with Enzyme

    Live Demo

    Link to live demo on Github Pages

    Getting started

    Configuration options I suggest you look at:

    Option Location
    Google Analytics Add your tracking ID in the index.html
    Opengraph, Twitter card metadata In the head of the index.html
    Google Schema Metadata In the ld+json section of the index.html
    Site title and logo Props of in main.js
    Site copyright owner Props of in main.js
    Set additional menu links state.menuLinks in state/head.js
    Remove Lorem paragraph Props of in main.js

    Through the built in generator

    Make sure to have this package installed globally:

    npm install -g generator-react-frontend-boilerplate

    You can then inside any folder generate a boilerplate:

    generate-react-frontend # generate scaffold 
    grf                     # shorthand for same command 

    Which will generate the followng scaffold:

    ├── package.json
    ├── .gitignore
    ├── .travis.yml
    ├── .babelrc
    ├── public
    │   └── index.html
    ├── src
    │   ├── main.js
    │   ├── state
    │   │   ├── body.js
    │   │   └── head.js
    │   ├── stateless
    │   │   ├── body-views.js
    │   │   ├── footer-views.js
    │   │   ├── head-views.js
    │   │   └── lorem-ipsum-view.js
    │   └── styles
    │       ├── hamburgers
    │       │   ├── LICENSE
    │       │   └── hamburgericon.scss
    │       └── styles.scss
    └── webpack.config.js

    Through git

    Git clone this repository and npm install.

    git clone my-app
    cd my-app
    npm install

    Compiling the frontend

    The frontend source in frontend/src is compiled using webpack.

    For development ( with broswersync and file watching ):

    npm start

    For the generation of deployment ready files:

    npm run build

    Note that webpack with --watch will trigger browsersync, this does not mean your backend is running. Only that your frontend is statically served.


    npm i generator-react-frontend-boilerplate

    DownloadsWeekly Downloads






    Unpacked Size

    335 kB

    Total Files


    Last publish


    • actuallymentor