Ziggy React App

Simple boilerplate setup for front-end react applications

Quick Start
Requirements
What's Included
Instructions
Contributing

Quick Start

Clone or download this repository

git clone https://github.com/ziggysauce/ziggy-react-app.git

In your terminal, navigate to the root directory
```
cd ziggy-react-app
```
Install dependencies
```
npm install
```

Development

Run script for development build:
```
npm run build:dev
```
In browser, application is served at http://localhost:8080

Production

Run build script:
```
npm run build:prod
```
Run script to start up app:
```
npm start
```
prestart script will run and create dist directory with production build

Requirements

Node (v9+)
NPM (v5+)

What's Included?

React v16
Webpack v4
- Chunk hash/caching
- Source maps
- Clean re-build of HTML file
  - Clean Webpack Plugin
  - HTML Webpack Plugin
- Development Build
  - Hot module reload (React Hot Loader)
- Production Build
  - Separate injected stylesheet (Extract Text Plugin)
  - JS Compression/Minification (Uglify JS Plugin)
Babel
SASS
Jest
ESLint (AirBnB Rules)

Directory Structure

ziggy-react-app/                           # application root directory
├── client/                                # frontend directory
│    ├── dist/                             # production code directory ignored by .gitignore file
│    └── src/                              # development code directory
│         ├── __tests__                    # jest testing directory
│         │    ├── __snapshots__/          # jest snapshots directory (created after running tests)
│         │    └── app.test.js             # initial test file
│         ├── components/                  # react components directory
│         │    ├── App.js                  # initial App.js file
│         │    └── Credit.js               # author information; delete file after opening
│         ├── styles/                      # sass styles directory
│         │    ├── components/             # sass components directory
│         │    │    └── _app.scss          # initial styling for app component
│         │    ├── setup/                  # sass setup directory
│         │    │    ├── _base.scss         # base styling
│         │    │    └── _variables.scss    # sass variables
│         │    └── main.scss               # root sass file (import other files here)
│         ├── index.html                   # template HTML file
│         └── index.js                     # application entry point
├── .babelrc                               # babel configuration file
├── .eslintrc.js                           # eslint configuration file
├── webpack.common.js                      # base webpack configuration
├── webpack.dev.js                         # development build webpack configuration
└── webpack.prod.js                        # production build webpack configuration

Command Scripts

npm <script>	Function/Description
prestart	Run webpack production build script before express server
start	Opens production build app from `dist/index.html`
test	Runs all tests files (`.test.js` type)
test:verbose	Displays individuals test results
test:coverage	Collects test coverage information and reports output
build:dev	Runs webpack developement build (HMR enabled) at `localhost:8080`
build:prod	Runs webpack production build (`dist` directory created)

Instructions

Frontend
- Delete the Credit.js file
- Edit the App.js file
- Edit the _app.scss file
- SASS styling:
  - Be sure to add an underscore _ before new .scss files
  - Add new scss files to main.scss as an import (order matters)
Testing
- Run npm test to start all jest testing
- Run npm run test:verbose to see jest testing details
- Run npm run test:coverage to create coverage directory
  - Run open coverage/lcov-report/index.html to see jest testing coverage

Contributing

This react app boilerplate is open source. Any feedback, issues, contributions, and requests are appreciated and encouraged.

For more information:
Contributing Instructions
License

If you found this repository helpful, please give me a follow and star this repository. Thanks for all the support!

ziggysauce/ziggy-react-app-fe