epilande/yaris


:rocket: Yet Another React Isomorphic Starter

  • Users starred: 5
  • Users forked: 1
  • Users watching: 5
  • Updated at: 2019-06-15 15:16:32

YARIS

Yet Another React Isomorphic Universal Starter

Build Status codecov Greenkeeper badge dependencies Status

If you don't want Universal JavaScript, check out my other boilerplate YARS.

Features

  • Server-Side Rendering
  • Webpack v2
  • React
  • React HMR
  • React Redux
  • React Router (async routes)
  • React storybook
  • Babel
  • Styled-components
  • Jest and Enzyme
  • ESLint
  • Stylelint
  • NPM Scripts

Quick Start

Clone this repo

$ git clone https://github.com/epilande/yaris.git
$ cd yaris

Install dependencies

$ npm install # or yarn

Launch dev environment

$ npm run dev

Available Commands

npm run <script> Description
dev Starts app on localhost:3000 in development mode with HMR enabled.
start Starts ./public/server.js, which has production bundles.
build Runs build:prod & build:server to create production bundles.
build:prod Creates client bundle with production environment.
build:server Creates server bundle with production environment.
lint Lints ./src/**/*.js & ./server/**/*.js with eslint & stylelint.
test Runs unit tests with Jest & generates coverage report.
test:watch Same as npm run test, but watches for changes to re-run tests.
storybook Starts react-storybook on localhost:9001.

Structure

Feature-first approach, all of the related files are in one place.

src/
├── components/                  // Shared or generic UI components
│   ├── A/
│   ├── Button/
│   │   ├── test/
│   │   │   ├── index.test.js    // Tests for component
│   │   ├── index.js             // The actual Button component
│   │   ├── index.stories.js     // This gets picked up by react-storybook
│   ├── Footer/
│   └── ...
├── containers/
│   └── FeaturePage/
│      ├── components/           // All FeaturePage specific components live here
│      │   ├── List/
│      │   ├── ListItem/
│      │   ├── ListItemTitle/
│      │   │  └── index.js
│      │   └── ...
│      ├── actions.js
│      ├── constants.js
│      ├── index.js
│      ├── reducer.js
│      └── ...