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

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 for scafollding with proper husky, eslint and prettier setup
• react-query with axios for server data management
• Chakra ui for style
• Typescript
• react-router-dom for routing

Has Commit Lint enabled

You need to follow the commit conventions 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)

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 along with react-query plugin.

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 :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: 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: 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, zustand, Xstate. 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 if any versions need to be changed.