- node
^5.0.0 - yarn
^0.23.0or npm^3.0.0
After confirming that your environment meets the above requirements, you can create a new project based on react-redux-starter-kit by doing the following:
$ git clone https://github.com/ssolanki/vmock.git <my-project-name>
$ cd <my-project-name>When that's done, install the project dependencies. It is recommended that you use Yarn for deterministic dependency management, but npm install will suffice.
$ yarn # Install project dependencies (or `npm install`)After completing the installation step, you're ready to start the project!
$ yarn start # Start the development server (or `npm start`)While developing, you will probably rely mostly on yarn start; however, there are additional scripts at your disposal:
yarn <script> |
Description |
|---|---|
start |
Serves your app at localhost:3000 |
build |
Builds the application to ./dist |
test |
Runs unit tests with Karma. See testing |
test:watch |
Runs test in watch mode to re-run tests when changed |
lint |
Lints the project for potential errors |
lint:fix |
Lints the project and fixes all correctable errors |
The project structure presented in this boilerplate is fractal, where functionality is grouped primarily by feature rather than file type. This structure is only meant to serve as a guide, it is by no means prescriptive. That said, it aims to represent generally accepted guidelines and patterns for building scalable applications. If you wish to read more about this pattern, please check out this awesome writeup by Justin Greenberg.
.
├── build # All build-related code
├── public # Static public assets (not imported anywhere in source code)
├── server # Express application that provides webpack middleware
│ └── main.js # Server application entry point
├── src # Application source code
│ ├── index.html # Main HTML page container for app
│ ├── main.js # Application bootstrap and rendering
│ ├── normalize.js # Browser normalization and polyfills
│ ├── components # Global Reusable Components
│ ├── containers # Global Reusable Container Components
│ ├── layouts # Components that dictate major page structure
│ │ └── PageLayout # Global application layout in which to render routes
│ ├── routes # Main route definitions and async split points
│ │ ├── index.js # Bootstrap main application routes with store
│ │ ├── Home # Fractal route
│ │ │ ├── index.js # Route definitions and async split points
│ │ │ ├── assets # Assets required to render components
│ │ │ ├── components # Presentational React Components
│ │ │ └── routes ** # Fractal sub-routes (** optional)
│ │ └── Counter # Fractal route
│ │ ├── index.js # Counter route definition
│ │ ├── container # Connect components to actions and store
│ │ ├── modules # Collections of reducers/constants/actions
│ │ └── routes ** # Fractal sub-routes (** optional)
│ ├── store # Redux-specific pieces
│ │ ├── createStore.js # Create and instrument redux store
│ │ └── reducers.js # Reducer registry and injection
│ └── styles # Application-wide styles (generally settings)
└── tests # Unit tests
Out of the box, this starter kit is deployable by serving the ./dist folder generated by yarn build. This project does not concern itself with the details of server-side rendering or API structure, since that demands a more opinionated structure that makes it difficult to extend the starter kit. The simplest deployment strategy is a static deployment.