https://github.com/albert-gao/react-fullstack-boilerplate
React, react-router, redux, redux-saga, babel, webpack, scss, feathers.js, jest, eslint
https://github.com/albert-gao/react-fullstack-boilerplate
babel boilerplate es6 eslint feathers jest react react-redux react-router redux redux-saga webpack
Last synced: 6 days ago
JSON representation
React, react-router, redux, redux-saga, babel, webpack, scss, feathers.js, jest, eslint
- Host: GitHub
- URL: https://github.com/albert-gao/react-fullstack-boilerplate
- Owner: Albert-Gao
- License: mit
- Created: 2017-09-13T11:14:14.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-31T22:41:49.000Z (about 7 years ago)
- Last Synced: 2025-03-28T14:11:09.277Z (24 days ago)
- Topics: babel, boilerplate, es6, eslint, feathers, jest, react, react-redux, react-router, redux, redux-saga, webpack
- Language: JavaScript
- Homepage:
- Size: 2.53 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Fullstack-react-boilerplate
> Yet another boilerplate, the reason I did this is I found some other famous boilerplates contain so many codes which only for constructing the structure. I love an approach which most of the code should be related to the logic. And when you build your component, you can simply copy the file for a good start.
All latest tech stack in one go. And all come with sample code for you to start with. The sample is written for a simple ajax app rather than a TODO list. I will continue learning best practices from other good boilerplate, currently learned a lot from `create-react-app`.
## 1. Folder structure
- client: Your front-end code
- server: Your back-end code
- config: Server settings
- packages: NPM packages settings
- public: Some front-end related static assets for building
- tests: Your test cases
- stories: Stories for your component (react storybook)
- build: Output folder for building (Will be auto cleaned before each build)
## 2. Getting Started
1. Install the dependencies: `npm install`
2. Start the server: `npm run start`
3. Start the webpack-dev-server `npm run dev`
## 3. Command:
- `npm run server`: Start the server
- `npm run dev`: Development with Hot module reloading via Webpack-dev-server
- `npm run dev:build`: Build project for development usage for things like debug in Webpack
- `npm run build`: Build project for production.
- `npm run test`: Test via Jest
- `npm run storybook`: Open Storybook
## 4. Main dependencies:
### Backend
- [Feathers](https://feathersjs.com/)
### Main front end libs
- React
- React-router
- React-redux (Connect container component to redux store)
- Redux
- Redux-saga
- Reselect (An efficient selector library which works well with Redux)
### Tests
- Jest
- Enzyme (to be added)
### Browser Automation
- Nightwatch (to be added)
### Development
- webpack-dev-server
- react-hot-loader
- redux-devtools (Just install this [Chrome plugin](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en))
- [react-storybook](https://storybook.js.org/) (Isolated component development environment)
- Spit out the line number of components when you use React devtools in development (Disabled in production)
### Building
- Webpack
- JS/JSX
- SCSS -> PostCSS auto-prefix and flexbox prefix
- Images
- Any assets
Feathers is an awesome node.js framework which is currently a thin wrapper around Express.js with support for `CORS`, `Helmet`, `GZip` etc and making develop rest api in a very easy manner via service and hooks. It scales well and supports for splitting your API endpoint into micro service in the future.
Babel-loader configures with `env`, `react`, `object spread` and `generator`.
## 5. Changelog
__0.1.0__
- Initial release
## 6. TODO
- The client side example should work with feathers back end rather than Github API.
- Nightwatch for end to end testing
- Docker for deployment
- PWA support
## License
Copyright (c) 2017
Licensed under the [MIT license](LICENSE).