Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/actuallymentor/react-frontend-boilerplate
A frontend boilerplate made with React, Webpack & Browsersync. Available as an NPM package with a command line scaffold generator.
https://github.com/actuallymentor/react-frontend-boilerplate
Last synced: 4 days ago
JSON representation
A frontend boilerplate made with React, Webpack & Browsersync. Available as an NPM package with a command line scaffold generator.
- Host: GitHub
- URL: https://github.com/actuallymentor/react-frontend-boilerplate
- Owner: actuallymentor
- License: mit
- Created: 2016-11-28T11:20:11.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T18:20:10.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T12:30:21.467Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.47 MB
- Stars: 1
- Watchers: 2
- Forks: 2
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Frontend Boilerplate
[](https://badge.fury.io/js/generator-react-frontend-boilerplate) [](https://travis-ci.org/actuallymentor/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]( https://actuallymentor.github.io/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:
```shell
npm install -g generator-react-frontend-boilerplate
```
You can then inside any folder generate a boilerplate:
```shell
generate-react-frontend # generate scaffold
grf # shorthand for same command
```
Which will generate the followng scaffold:
```shell
├── 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
```
### Through git
Git clone this repository and npm install.
``` shell
git clone https://github.com/actuallymentor/react-frontend-boilerplate 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.