React Frontend Boilerplate
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-boilerplateYou can then inside any folder generate a boilerplate:
generate-react-frontend # generate scaffold grf # shorthand for same command 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.jsThrough git
Git clone this repository and npm install.
git clone https://github.com/actuallymentor/react-frontend-boilerplate my-appcd my-appnpm 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.