React Frontend Boilerplate

A frontend boilerplate made with React, Webpack & Browsersync. Available as an NPM package with a command line scaffold generator.

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

View demo Download Source

react-frontend-boilerplate

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
Shell

You can then inside any folder generate a boilerplate:

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

Which will generate the followng scaffold:

├── LICENSE.md
├── README.md
├── 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
Shell

Through git

Git clone this repository and npm install.

git clone https://github.com/actuallymentor/react-frontend-boilerplate my-app
cd my-app
npm install
Shell

Compiling the frontend

The frontend source in frontend/src is compiled using webpack. Make sure you have it globally installed:

npm install -g webpack
Shell

You can then run webpack either once:

webpack --progress -d # for development mode, no minification etc
webpack --progress -p # for production code
Shell

Or as a watching service that rebuilds when the frontend is edited

webpack --progress -d --watch # for development mode, no minification etc
webpack --progress -p --watch # for production code
Shell

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

GitHub

actuallymentor/react-frontend-boilerplate

??

— Read More

Download as zip