Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/raralabs/create-rara-app
Scaffold a react-app with some pre discussed sets of packages
https://github.com/raralabs/create-rara-app
create-react-app graphql react-boilterplate react-query react-template typescript vite
Last synced: 4 months ago
JSON representation
Scaffold a react-app with some pre discussed sets of packages
- Host: GitHub
- URL: https://github.com/raralabs/create-rara-app
- Owner: raralabs
- License: mit
- Created: 2022-01-27T12:57:04.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-28T06:28:22.000Z (10 months ago)
- Last Synced: 2024-04-28T08:21:23.647Z (10 months ago)
- Topics: create-react-app, graphql, react-boilterplate, react-query, react-template, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 451 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Create Rara App
A collections of react app templates to be used within the organization. The templates are created with discussed sets of packages. The templates are initially created by scaffolding with vite and later extended with chosen packages.
### Scaffolding Your Rara App
```javascript
npx create-rara-app folderName
```
## Available Templates:
1. GraphQL
> with react-query, typescript,vite, husky, eslint, graphql-code-generator,chakra-ui, react-location
2. REST
> !! Not Supported YET
## Common Packages Used across the templates:
- [Vite](https://vitejs.dev/) for scafollding with proper husky, eslint and prettier setup
- [react-query](https://react-query.tanstack.com/) with axios for server data management
- [Chakra ui](https://chakra-ui.com/) for style
- [Typescript](https://www.typescriptlang.org/)
- [react-router-dom](https://reactrouter.com/en/v6.3.0/getting-started/overview) for routing
### Has Commit Lint enabled
> You need to follow the [commit conventions](https://www.conventionalcommits.org/en/) and remove all the warnings and error to commit.
### .env File
The .env files have some predefined key value pairs that are generated based on the answer you've given while scaffolding the app.
> If you didn't provide any values, then a default path will be set. This env variables are used for api request in axios configuration file and if graphql is used then the VITE_SCHEMA_PATH will be used to set the path of schema
Where are the env variables used?
- src/generated/axiosHelper.ts (VITE_API_URL)
- codegen.yml (VITE_SCHEMA_URL)
```javascript
VITE_SCHEMA_PATH = http://localhost:9000/query
VITE_API_URL = http://localhost:9000/query
```
## Folder Structure
```
--src
-----components
-----constant
-----functions
-----generated
-----graphql
-----hooks
-----pages
-----routes
-----theme
```
> Do not make any edits to generated folder. This is where all the typings for api calls (with graphql) are generated by [graphql-code-gnerator](https://www.graphql-code-generator.com/) along with [react-query plugin](https://www.graphql-code-generator.com/plugins/typescript-react-query).
### Misc.
**public/\_\_redirects** is used to prevent _page not found_ issue on reload after deploying on netlify
**nginx.conf**: This file is used to prevent _page not found_ issues on reload after deploying on nginx server. The nginx server is used if you deploy with the given dockerFile
### For Development
- npm link // creates a symlink
- create-rara-app folderName
### Other Packages (Experiments & Recommendations)
- [Vitest](https://vitest.dev/) :A blazing fast unit-test framework powered by Vite.
> We are current experimenting on setting up Vitest and once this is finalized. It will be added to create-rara-app
- [react-hook-form](https://react-hook-form.com/): For forms
> This probably will _never_ be added as a default dependancy on _create-rara-app_. But it is recommended to use this package when you need any form related libraries.
- [zustand](https://github.com/pmndrs/zustand): For state management
> No state management packages will be added as a default dependancy on _create-rara-app_ for now. Though, we will be experimenting with redux, [redux toolkit](https://redux-toolkit.js.org/), zustand, [Xstate](https://xstate.js.org/). And if we ever come to agree on any state management, then we might be considering adding a state management library on _create-rara-app_. For now, we are recommending _zustand_.
### REQUEST
Please create a PR or an issue [here](https://github.com/raralabs/create-rara-app/) if any versions need to be changed.