{"id":15162380,"url":"https://github.com/constantiner/monovitality","last_synced_at":"2026-01-29T06:32:16.104Z","repository":{"id":219082380,"uuid":"743599809","full_name":"Constantiner/monovitality","owner":"Constantiner","description":"Monovitality is a TypeScript-based mono repository (monorepo) that offers opinionated solutions for some advanced challenges of front-end development based on React","archived":false,"fork":false,"pushed_at":"2024-04-22T13:58:14.000Z","size":7509,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-22T14:29:55.041Z","etag":null,"topics":["gatsby","lerna","monorepo","npm-workspaces","react","sass","storybook","typescript","vite"],"latest_commit_sha":null,"homepage":"https://constantiner.github.io/monovitality/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Constantiner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-01-15T15:23:39.000Z","updated_at":"2024-04-24T09:50:07.046Z","dependencies_parsed_at":"2024-01-31T17:16:15.254Z","dependency_job_id":"aef8a63e-1fb1-40f3-bb47-d7b4bd5662ee","html_url":"https://github.com/Constantiner/monovitality","commit_stats":null,"previous_names":["constantiner/monovitality"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Constantiner%2Fmonovitality","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Constantiner%2Fmonovitality/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Constantiner%2Fmonovitality/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Constantiner%2Fmonovitality/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Constantiner","download_url":"https://codeload.github.com/Constantiner/monovitality/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247770567,"owners_count":20993218,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gatsby","lerna","monorepo","npm-workspaces","react","sass","storybook","typescript","vite"],"created_at":"2024-09-27T01:41:16.032Z","updated_at":"2026-01-29T06:32:16.063Z","avatar_url":"https://github.com/Constantiner.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Monovitality (React + TypeScript + Vite)\u003c!-- omit in toc --\u003e\n\n[![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/badges/StandWithUkraine.svg)](https://stand-with-ukraine.pp.ua)\n\nMonovitality is a TypeScript-based mono repository (monorepo) that offers opinionated solutions for some advanced challenges of front-end development based on React. It utilizes Lerna and NPM workspaces for monorepo management.\n\n- [Key Features](#key-features)\n- [Getting Started](#getting-started)\n- [Available Scripts](#available-scripts)\n- [Demo](#demo)\n- [Use](#use)\n- [CRA changes](#cra-changes)\n- [IDE settings](#ide-settings)\n\n## Key Features\n\n- **TypeScript Monorepo**: Utilizes Lerna and NPM workspaces for monorepo management.\n- **Best Practices**: Enforces best practices across all the code with tools such as ESLint, TypeScript, Stylelint, Prettier, Git pre-commit hooks with Husky and Lint-staged, and Jest for unit tests and Storybook for isolated component development.\n- **React SPA**: The main module is a React SPA, which uses Vite with SWC for Hot Module Replacing in the local development environment. It is located in the `web` package.\n- **Styling**: All the React code uses SCSS for styling with CSS.\n- **Shareable Components**: The `components` package contains shareable React components supporting dark and light themes.\n- **Lazy Loading**: React SPA utilizes lazy loading for code splitting. The `submodule` package is loaded on demand.\n- **Shareable Types**: `types` package contains shareable TypeScript types and corresponding type guards.\n- **Storybook**: The `storybook` package contains stories for components and supports switching between dark and light themes.\n- **Static Site**: `site` package contains a static site generated with Gatsby, using the same React components.\n- **CI/CD**: Includes GitHub actions for quality checks (linting and testing), build steps, and deployment to GitHub Pages.\n\n## Getting Started\n\nTo get a local copy up and running, follow these steps:\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/constantiner/monovitality.git\n```\n\n2. Install NPM packages:\n\n```bash\ncd monovitality\nnpm ci\n```\n\n3. Create your `.env` files as needed. All the supported environment variables for React SPA are listed in the file at `packages/web/.env`. You need to create your actual version of the file, e.g., `.env.local`, `.env.development`, `.env.production`, etc. Git ignores all the `.local` files. More about `.env` override conventions can be found in the [Dotenv docs](https://github.com/bkeepers/dotenv) or in the [Vite docs](https://vitejs.dev/guide/env-and-mode.html#env-files).\n\n## Available Scripts\n\nThe available NPM scripts for the Monovitality project are in the main `package.json` file.\n\n- `dev`: Runs the React SPA in the development environment.\n- `build`: Builds React SPA for deployment. Set the `MONOVITALITY_SPA_BASE_URL` if you need to define the base URL.\n- `storybook`: Runs Storybook in the development environment.\n- `build-storybook`: Builds Storybook for deployment.\n- `dev:site`: Runs Gatsby static site in the development environment.\n- `build:site`: Builds Gatsby static site for deployment.\n- `clean:site`: Cleans cache and build for Gatsby static site.\n- `lint`: Performs complete linting across all the code (including types and CSS checks).\n- `lint:dev`: Performs JS/TS files linting across all the code.\n- `lint:config-inspector`: Runs [ESLint config inspector](https://eslint.org/blog/2024/04/eslint-config-inspector/) to debug ESLint configuration.\n- `test`: Runs unit tests across all the packages.\n- `preview`: Starts local server to preview React SPA site production build.\n- `format`: Runs Prettier, a code formatter, on all files with the specified extensions.\n\n## Demo\n\nYou can see the deployed version of the project at [GitHub Pages](https://constantiner.github.io/monovitality/). The demo includes the React SPA, Storybook, and Gatsby static site.\n\nYou can switch between light and dark themes with the `Alt+T` keyboard shortcut. This shortcut is available in the Gatsby static site and the React SPA.\n\n## Use\n\nYou can use this repository as a starter to bootstrap your projects or borrow some code or ideas. The main purpose of the project is to provide infrastructure and project organization.\n\n## CRA changes\n\nFor migration of your React SPA from using Create React Application (CRA) to Vite, you need to make the following changes:\n\n- React components exports. Single export per file for HMR with SWC.\n- Environment variables. Replace `REACT_APP_` with `VITE_` for exposed environment variables. Use `import.meta.env` instead of `process.env`. See [Vite docs](https://vitejs.dev/guide/env-and-mode.html#env-variables).\n\n## IDE settings\n\nDo not forget to add to `.vscode/settings.json` the following:\n\n```json\n{\n\t\"eslint.workingDirectories\": [{ \"pattern\": \"./packages/*/\" }],\n\t\"eslint.experimental.useFlatConfig\": true\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconstantiner%2Fmonovitality","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fconstantiner%2Fmonovitality","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconstantiner%2Fmonovitality/lists"}