ziggysauce/ziggy-react-app

Simple boilerplate for React applications with a server

Ziggy React App

Simple boilerplate setup for fullstack react/express/node applications

Table of Contents

• 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

• Add a .env file to the root of your directory
  • Add the following code to your .env file:

    PORT=5000
    SESSION_SECRET=<your_session_secret_here>
    

  • Add your own SESSION_SECRET value
• 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
• Express
  • Middleware
    • Body Parser
    • Cookie Parser
    • Helmet
    • Express Sessions
    • CORS
• 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
├── server/                                # backend directory
│    ├── middleware/                       # server middleware directory
│    │    ├── cors.js                      # CORS middleware
│    │    ├── index.js                     # middleware configuration file
│    │    └── session.js                   # express-session middleware
│    └── server.js                         # express server 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	Starts app on express server at localhost:5000 with node
serve	Starts app on express server at localhost:5000 with nodemon
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)
• Backend
  • Add a .env file to the root of your directory
    • Add the following code to your .env file:

      PORT=5000
      SESSION_SECRET=<your_session_secret_here>
      

    • Add your own SESSION_SECRET value
    • Edit .env variables however you see fit
    • Removing a variable from here may require changes throughout the app where process.env is called
• 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!