Framework Shell Frontend

This repository serves as a complete setup for setting up a monorepo project with the help of TurboRepo, a powerful tool for managing monorepositories. The setup comes pre-configured with a set of best practices for organizing code, managing dependencies, and building multiple packages or modules within a single repository, all while using TypeScript as the primary programming language and other essential tooling already set up for a seamless development experience.

What's inside?

This setup includes the following packages/apps:

Apps

• framework-shell: A Vite powered react typescript app

Packages

• alias: An alias package for absolute import that creates custom aliases for directories, allowing for shorter and more readable import statements in code.
• env-config - A package that enables dynamic loading of environment variables based on the current environment.
• eslint-config-custom - A package with typescript-eslint that allows you to customize and extend ESLint configurations for TypeScript projects, promoting code quality and early error detection.
• logger: isomorphic logger (a small wrapper around console.log) with sentry as optional.
• routes: A routes package provides centralized management of app routes
• ui: A package with storybook configuration to create library of reusable UI components.
• theme: A theme package provides customizable Material-UI theme settings for both light and dark modes to create a consistent and visually appealing design system.
• tsconfig: tsconfig.json;s used throughout the monorepo.
• store: A store package for global state management using zustand simplifies complex state management in applications by leveraging zustand's modularity.
• utils: A utils package provides a some helper functions, constants, and reusable API functions, which you can customize and extend.

Each package and app is 100% TypeScript except alias and eslint-config-custom.

Utilities

This setup has some additional tools already setup for you:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting
• Storybook for component documentation
• Husky for creating pre-commit hook
• Lint-Staged - To run linters against staged git files
• Plop for code generation
• czg for generating standardized git commit messages

Using this setup

Cloning

To get started with this setup, you can clone the repository using the following command:

git clone [email protected]:Crayond-DEV-TEAM/Framework-Shell-Frontend.git

or

git clone https://github.com/Crayond-DEV-TEAM/Framework-Shell-Frontend.git

Once you have cloned the repository,

Then install the required dependencies using the following command:

npm i

Now you can run this setup using the below scripts

Scripts

This setup includes a set of pre-configured scripts that can be used to build, lint, format and run the project. The available scripts are:

• dev - starts a development server for all the apps and packages that have a dev script defined.
• build - builds all the apps and packages that have a build script defined.
• dev:production - starts a development server in a production mode for all the apps and packages that have the script defined. This command uses the .env.production environment variables.
• dev:staging - starts a development server in a staging mode for all the apps and packages that have the script defined. This command uses the .env.staging environment variables.
• build:development - builds all the apps and packages in a production mode that have the script defined.This command uses the .env.development environment variables.
• build:staging - builds all the apps and packages in a staging mode that have the script defined.This command uses the .env.staging environment variables.
• build:storybook - builds the Storybook UI components documentation site in the packages/ui.
• preview - After running the build command, Vite will output the built application in a dist directory. This script can be used to preview the output of the build command of all the apps that have the script defined.
• lint - runs the linter for all the apps and packages that have a lint script defined.
• format - formats all the typeScript and Markdown files using Prettier.
• clean:root - removes the node_modules directory from the root of the project.
• clean - removes the node_modules directory from all the apps and packages that have a clean script defined.
• plop - starts the Plop code generator to create new components and packages.
• prepare - installs the Husky Git hooks for linting and formatting on commit.

(NOTE: In vite, By default, the dev server (dev command) runs in development mode and the build command runs in production mode. This means when running vite build, it will load the env variables from .env.production)

Useful Links

Learn more:

• Turborepo
• Storybook
• Vite

Authors

• @harikrish07

(Kindly update it if you contributed to this setup)

Feedback

If you have any feedback, please reach out to the authors

Contributing

Contributions are always welcome!