react static website of www.craftz.dog

A static website starter kit powered by React.js and Webpack.

This project is a fork of old kriasoft/react-static-boilerplate but is updated its dependencies to the latest version. It also includes some improvements such as Twitter Card and Open Graph support. Feel free to fork me to bootstrap your website!

Features

✓ Next generation JavaScript with Babel
✓ Sass syntax for CSS via postCSS and precss
✓ Hot Module Replacement (HMR) /w React Hot Loader
✓ Bundling and optimization with Webpack
✓ Code-splitting and async chunk loading
✓ Easy deployment to GitHub Pages, Netlify or Firebase

Deferrence from original boilerplate

✓ Generates static .html pages from React components
✓ Generates routes based on the list of files in the /pages folder
✓ Twitter Card and Open Graph protocol support

Directory Layout

.
├── /build/                     # The folder for compiled output
├── /node_modules/              # 3rd-party libraries and utilities
├── /components/                # React components
├── /core/                      # Core framework
├── /pages/                     # React.js-based web pages
│   ├── /blog/                  # Blog post entries example
│   ├── /404.js                 # Not Found page
│   ├── /500.js                 # Error page
│   ├── /about.js               # About Us page
│   └── /index.js               # Home page
├── /static/                    # Static files such as favicon.ico etc.
├── /test/                      # Unit and integration tests
├── /tools/                     # Build automation scripts and utilities
│── app.js                      # The main JavaScript file (entry point)
│── config.js                   # Website configuration / settings
│── LICENSE.txt                 # License file
│── package.json                # Dev dependencies and NPM scripts
└── README.md                   # Project overview

Getting Started

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

$ git clone -o react-static-boilerplate -b master --single-branch \
      https://github.com/odoruinu/odoruinu.net-pug.git MyApp
$ cd MyApp
$ npm install
$ npm start

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

How to Test

The unit tests are powered by chai and mocha.

$ npm test

How to Deploy

$ npm run deploy                # Deploys the project to GitHub Pages

Alternatively, you can build a production release to manually deploy to S3, Firebase, Netlify, and other static hosts. Simply run the command below and copy the generated build folder to your static host.

$ npm run build release         # Build production release

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 react-static-boilerplate
$ git merge react-static-boilerplate/master
$ npm install

Related Projects

Learn More

Made with ♥ by Takuya Matsuyama (@craftzdog), Konstantin Tarkus (@koistya) and contributors | MIT License

AnanthaKrish/odoruinu.net-pug