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
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
│ └── ...