{"id":15316689,"url":"https://github.com/albert-gao/react-fullstack-boilerplate","last_synced_at":"2025-08-24T00:08:09.996Z","repository":{"id":129076435,"uuid":"103390271","full_name":"Albert-Gao/react-fullstack-boilerplate","owner":"Albert-Gao","description":"React, react-router, redux, redux-saga, babel, webpack, scss, feathers.js, jest, eslint","archived":false,"fork":false,"pushed_at":"2018-03-31T22:41:49.000Z","size":2658,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T14:11:09.277Z","etag":null,"topics":["babel","boilerplate","es6","eslint","feathers","jest","react","react-redux","react-router","redux","redux-saga","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Albert-Gao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-13T11:14:14.000Z","updated_at":"2019-10-23T02:05:08.000Z","dependencies_parsed_at":"2023-04-10T00:17:31.506Z","dependency_job_id":null,"html_url":"https://github.com/Albert-Gao/react-fullstack-boilerplate","commit_stats":{"total_commits":62,"total_committers":1,"mean_commits":62.0,"dds":0.0,"last_synced_commit":"51db607c354ca35e68f3a6d33a03284f6cb8ee9a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Albert-Gao%2Freact-fullstack-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Albert-Gao%2Freact-fullstack-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Albert-Gao%2Freact-fullstack-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Albert-Gao%2Freact-fullstack-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Albert-Gao","download_url":"https://codeload.github.com/Albert-Gao/react-fullstack-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248991709,"owners_count":21194925,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","boilerplate","es6","eslint","feathers","jest","react","react-redux","react-router","redux","redux-saga","webpack"],"created_at":"2024-10-01T08:54:40.642Z","updated_at":"2025-04-15T02:20:45.860Z","avatar_url":"https://github.com/Albert-Gao.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fullstack-react-boilerplate\n\n\u003e 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.\n\nAll 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`.\n\n\n## 1. Folder structure\n- client: Your front-end code\n- server: Your back-end code\n- config: Server settings\n    - packages: NPM packages settings\n- public: Some front-end related static assets for building\n- tests: Your test cases\n- stories: Stories for your component (react storybook)\n- build: Output folder for building (Will be auto cleaned before each build)\n\n\n## 2. Getting Started\n1. Install the dependencies: `npm install`\n2. Start the server: `npm run start`\n3. Start the webpack-dev-server `npm run dev`\n\n\n## 3. Command:\n- `npm run server`: Start the server\n- `npm run dev`: Development with Hot module reloading via Webpack-dev-server\n- `npm run dev:build`: Build project for development usage for things like debug in Webpack\n- `npm run build`: Build project for production.\n- `npm run test`: Test via Jest\n- `npm run storybook`: Open Storybook\n\n\n## 4. Main dependencies:\n### Backend\n- [Feathers](https://feathersjs.com/)\n\n### Main front end libs\n- React\n- React-router\n- React-redux (Connect container component to redux store)\n- Redux\n- Redux-saga\n- Reselect (An efficient selector library which works well with Redux)\n\n### Tests\n- Jest\n- Enzyme (to be added)\n\n### Browser Automation\n- Nightwatch (to be added)\n\n### Development\n- webpack-dev-server\n- react-hot-loader\n- redux-devtools (Just install this [Chrome plugin](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en))\n- [react-storybook](https://storybook.js.org/) (Isolated component development environment)\n- Spit out the line number of components when you use React devtools in development (Disabled in production)\n\n### Building\n- Webpack\n    - JS/JSX\n    - SCSS -\u003e PostCSS auto-prefix and flexbox prefix\n    - Images\n    - Any assets\n\n\nFeathers 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.\n\nBabel-loader configures with `env`, `react`, `object spread` and `generator`.\n\n\n## 5. Changelog\n__0.1.0__\n- Initial release\n\n\n## 6. TODO\n- The client side example should work with feathers back end rather than Github API.\n- Nightwatch for end to end testing\n- Docker for deployment\n- PWA support\n\n\n## License\nCopyright (c) 2017\nLicensed under the [MIT license](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbert-gao%2Freact-fullstack-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falbert-gao%2Freact-fullstack-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbert-gao%2Freact-fullstack-boilerplate/lists"}