Getting Started

Dependencies

NPM is the project package manager.

Because create-sara-project has a lot of configurations, we have tested the app with this environment versions:

[email protected]

[email protected]

[email protected]

If something is not working, try to update to these specific versions...

Update package

If you have previously installed:

npm i create-sara-project -g

and you want to update it, run:

npm update create-sara-project -g

Commands

Install

Run the following command to install create-sara-project globally

npm i create-sara-project -g

Then you can go to your project folder and run:

create-sara-project

Once you run the command the app will ask you the app name and the template type...

Once you created a sara project...

you can run the development server:

cd <app_name>
npm start

Open cypress

npm run cypress:open

Run cypress tests

npm test

Build

npm run build

Test

Cypress is the testing framework for this project.
Check the ./cypress configuration folder.

Docker

SARA uses Docker to containerize this app. Check the Dockerfile configuration file.

Linters and Code Style

The mix of tools used to ensure code and commit style and best practices:

• ESLint
• Prettier
• Commitlint
• Lint Staged
• Husky

Examples

SARA project for Monorepos

If you are building a monorepo, here is an example of how to implement a monorepo with create-sara-project 🚀

Template structure

.
├── src
│    ├── assets
│    │    ├── fonts
│    │    │    └── ...
│    │    ├── css
│    │    │    └── ...
│    │    ├── icons
│    │    │    └── ...
│    │    └── img
│    │         └── ...
│    ├── components
│    │    ├── ...
│    │    ├── Modals
│    │    │    └── ...
│    │    ├── Toastr
│    │    │    └── ...
│    │    └── <component-name>
│    │         ├── <component-name>.types.ts   # Component types
│    │         ├── <component-name>.module.css
│    │         └── <component-name>.tsx
│    ├── layouts
│    │    └── ... # AuthLayout/AdminLayout/etc
│    ├── config
│    │    ├── ...
│    │    └── constants.ts
│    ├── contexts
│    │    ├── ...
│    │    └── <page_name>
│    │         └── Page.context.ts # Context page/multiple pages
│    │
│    ├── store   # Without the need of redux, just useReducer hook
│    │    ├── actions
│    │    │    └── ...
│    │    └── reducers
│    │         └── ...
│    ├── pages
│    │    ├── ...
│    │    └── <page_name> # Keep unique page components here
│    │         ├── ...
│    │         ├── <component-name>.tsx
│    │         └── <folder>
│    │               ├── ...
│    │               ├── <component-name>.tsx
│    │               └── <folder>
│    ├── utils
│    │    └── ...
│    ├── shared  # api/global-state related interfaces/types
│    │     ├── interfaces
│    │     │   └── ...
│    │     └── types
│    │         └── ...
│    ├── cache
│    │     └── ...
│    ├── animations  # variants from framer motion
│    │     └── ...
│    ├── hooks
│    │     └── ...
│    ├── App.tsx
│    ├── index.tsx
│    └── services    # rest-api related routes and validators (zod)
│          ├── routes
│          │     └── ...
│          └── schemas # zod schemas
│                ├── ...
│                └── <model.zod>.ts
├── cypress
│    ├── .gitignore
│    ├── support
│    │     └── ...
│    ├── plugins
│    │     └── ...
│    ├── fixtures
│    │     └── ...
│    └── integration
│          └── ...
├── scripts
│    └── ...
├── ...
├── ...
├── ...
└── README.md