generator-react-frontend-boilerplate v1.5.9
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 commandWhich 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-app
cd my-app
npm installCompiling 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.
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago