Coder Social home page Coder Social logo

React Static Boilerplate

NPM version NPM downloads Build Status Dependency Status

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

Visit demo site  |  See roadmap  |  Join #react-static-boilerplate chatroom on Gitter to stay up to date.

Features

    ✓ Generates static .html pages from React components
    ✓ Generates routes based on the list of files in the /pages folder
    ✓ Next generation JavaScript with Babel
    ✓ Sass syntax for CSS via postCSS and precss
    ✓ Development web server with BrowserSync and React Transform
    ✓ Bundling and optimization with Webpack
    ✓ Code-splitting and async chunk loading
    ✓ Easy deployment to GitHub Pages, Amazon S3 or Firebase
    ✓ Yeoman generator (generator-react-static)

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/koistya/react-static-boilerplate.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 Konstantin Tarkus (@koistya) and contributors  |  MIT License

Mica Cardillo's Projects

321 icon 321

Find gaps in your data!

balloons.io icon balloons.io

Balloons.IO is a web multi-room chat server and client ready to use. It’s built with the help of node.JS, Express, Socket.IO and Redis. Balloons uses PassportJS for authentication with Twitter and Facebook

choc icon choc

Learnable Programming in Javascript

composer-d7 icon composer-d7

experimental Composer-centric workflow for Drupal dev

famous icon famous

Live, love and learn Famo.us. A JavaScript framework for everyone who wants to build beautiful experiences on every device. http://famo.us

filmstrip icon filmstrip

beginning to adapt html5 video filmstrip library to reactive video projects made with Meteor

kindshare icon kindshare

Submission for Meteor Hackathon. Comprehensive monetary and goods donation system.

meteor-contextio icon meteor-contextio

A lightweight package to add support for Context.io to your Meteor App.

meteoroid icon meteoroid

starter bundle experiment for node and meteor projects

nos_fork icon nos_fork

diverged version currently in production that has to be rectified at some point

objectiveddp icon objectiveddp

Making it easy for your Objective-C apps to communicate with your Meteor.js apps since 2013.

pandemic-memorial icon pandemic-memorial

PandemicMemorial.com is a website dedicated to honoring those whose lives were lost in the fight against COVID-19.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.