Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nanlabs/react-boilerplate
This starter kit is designed to get you up and running with a bunch of awesome front-end technologies.
https://github.com/nanlabs/react-boilerplate
boilerplate boilerplate-template cicd danger docker esbuild eslint github-actions github-pages jest react react-hooks react-query template testing-library typescript vite vitejs
Last synced: about 2 months ago
JSON representation
This starter kit is designed to get you up and running with a bunch of awesome front-end technologies.
- Host: GitHub
- URL: https://github.com/nanlabs/react-boilerplate
- Owner: nanlabs
- Created: 2022-06-10T12:42:41.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-23T02:08:22.000Z (4 months ago)
- Last Synced: 2024-05-23T02:35:24.716Z (4 months ago)
- Topics: boilerplate, boilerplate-template, cicd, danger, docker, esbuild, eslint, github-actions, github-pages, jest, react, react-hooks, react-query, template, testing-library, typescript, vite, vitejs
- Language: TypeScript
- Homepage: https://nanlabs.github.io/react-boilerplate/
- Size: 4.79 MB
- Stars: 24
- Watchers: 13
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-nan - React Boilerplate - awesome-node-app](https://www.npmjs.com/package/create-awesome-node-app) contains full CI/CD setup with GitHub Actions and Docker. It also contains a full local development setup with hot reload and production ready setup with minification and optimization. It also contains a full test setup with Jest and React Testing Library. | _React_ | (Apps and Boilerplates)
README
React Boilerplate
[](https://github.com/nanlabs/react-boilerplate/actions/workflows/ci.yml)
[](https://github.com/nanlabs/react-boilerplate/actions/workflows/deployment.yml)
[![License: MIT][licensebadge]][licenseurl]
[licensebadge]: https://img.shields.io/badge/License-MIT-blue.svg
[licenseurl]: https://github.com/nanlabs/react-boilerplate/master/LICENSE
This project was generated using [create-awesome-node-app](https://www.npmjs.com/package/create-awesome-node-app). **DON'T USE THIS TEMPLATE AS IT!** Generate yours using the command and following the options in the interactive menu. Check the docs for more information!
## Quickstart
```sh
fnm use
npm install
npm run start
```
## Useful resources
- [Project structure](./docs/PROJECT_STRUCTURE.md)
- [State Management recommendations](./docs/STATE_MANAGEMENT.md)
## Development
While developing, you will probably rely mostly on `npm run start`; however, there are additional scripts at your disposal:
| `npm run ` | Description |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
| `dev` | Serves your app at for local development |
| `test` | Runs unit tests with Jest. See [testing](#testing) |
| `test:watch` | Runs `test` in watch mode to re-run tests when changed |
| `lint` | [Lints](http://stackoverflow.com/questions/8503559/what-is-linting) the project for potential errors |
| `lint:fix` | Lints the project and [fixes all correctable errors](http://eslint.org/docs/user-guide/command-line-interface.html#fix) |
## Production
Generate production files running
```sh
npm run build
```
Generate and serve production files running
```sh
npm run serve
```
Available scripts:
| `npm run <script>` | Description |
| ------------------ | ----------------------------------------------------------------------------------------------------------- |
| `preview` | Serves your app using your production ready setup (`.env.production` and `NODE_ENV` equals to `production`) |
| `build` | Builds the application to `dist/` |
## Testing
To add a unit test, create a `.test.js` file anywhere inside of `src/`. Jest will automatically find these files.
## Contributing
You can report bugs, request features and create Pull Requests in the [Create-Node-App/react-extensions](https://github.com/Create-Node-App/react-extensions) repository!