ywt-web

React Static Boilerplate

Static website generator built on top of React.js and Gulp/Webpack

Features

    ✓ Generates static .html pages from React components
    ✓ Generates routes based on the list of files in the /content folder
    ✓ Next generation JavaScript with Babel
    ✓ Next generation CSS with postCSS and cssnext
    ✓ Development web-server with React Hot Loader
    ✓ Bundling and optimization with Gulp/Webpack
    ✓ Code-splitting and async chunk loading
    ✓ Easy deployment to GitHub Pages or Amazon S3

Getting Started

Just clone the repo, install Node.js modules and run npm start:

$ git clone -o upstream https://github.com/koistya/react-static-boilerplate MyApp
$ cd MyApp
$ npm install
$ npm start

Then open http://localhost:3000/ in your browser.

Directory Layout

.
├── /build/                     # The folder for compiled output
├── /components/                # React.js components
├── /content/                   # React.js-based web pages and other assets
├── /node_modules/              # 3rd-party libraries and utilities
├── /scripts/                   # JavaScript code
│   ├── /app.js                 # Startup script
│   ├── /pages.js               # Utility to generate html pages during a build
│   └── /routes-loader.js       # Webpack loader to generate the list of URLs
│── gulpfile.babel.js           # Build automation script(s)
│── package.json                # The list of 3rd party libraries and utilities
└── webpack.config.js           # Configuration for bundling and optimization

How to Test

The unit tests are powered by chai and mocha.

$ npm test

How to Deploy

$ npm run build -- --release    # Builds the project in release mode
$ npm run deploy                # Deploys the project to GitHub Pages

How to Update

You can always fetch and merge the recent changes from this repo back into your own project:

$ git checkout master
$ git fetch upstream
$ git merge upstream/master
$ npm install

Related Projects

• React Starter Kit

Learn More

• Getting Started with React.js
• React.js Wiki on GitHub
• React.js Questions on StackOverflow
• React.js Discussion Board
• Learn ES6, ES6 Features

---

Copyright (c) Konstantin Tarkus (@koistya) | MIT License