{"id":33035076,"url":"https://github.com/obaidqatan/react-mpx","last_synced_at":"2026-03-02T10:02:28.586Z","repository":{"id":324069608,"uuid":"1095359375","full_name":"ObaidQatan/react-mpx","owner":"ObaidQatan","description":"Run and export multiple React projects from a single codebase","archived":false,"fork":false,"pushed_at":"2025-11-13T16:13:21.000Z","size":37,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-12-15T05:22:28.745Z","etag":null,"topics":["cli","monorepo","multiproject","react","vite","vite-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-mpx","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/ObaidQatan.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,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-13T00:16:45.000Z","updated_at":"2025-11-13T16:11:15.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ObaidQatan/react-mpx","commit_stats":null,"previous_names":["obaidqatan/react-mpx"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/ObaidQatan/react-mpx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ObaidQatan%2Freact-mpx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ObaidQatan%2Freact-mpx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ObaidQatan%2Freact-mpx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ObaidQatan%2Freact-mpx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ObaidQatan","download_url":"https://codeload.github.com/ObaidQatan/react-mpx/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ObaidQatan%2Freact-mpx/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29998079,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T09:59:02.300Z","status":"ssl_error","status_checked_at":"2026-03-02T09:59:02.001Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["cli","monorepo","multiproject","react","vite","vite-plugin"],"created_at":"2025-11-13T21:00:51.571Z","updated_at":"2026-03-02T10:02:28.550Z","avatar_url":"https://github.com/ObaidQatan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-mpx\n\n`react-mpx` is a CLI tool that enables you to run and build multiple React projects from a **single codebase**. The shortcut \"mpx\" stands for **multiplexer** or **MUX**—a device that selects between several input signals and forwards the selected input to a single output line. Similarly, `react-mpx` dynamically selects and serves one project at a time from a shared set of source files.\n\n## Motivation\n\nIn many organizations, teams maintain multiple frontend applications that share common components, utilities, and infrastructure. Instead of duplicating this shared logic across repositories, `react-mpx` lets you colocate multiple projects in one codebase while ensuring they remain **independent at build and deployment time**.\n\n\u003e **Important**: `react-mpx` is **not a DevOps or multi-project deployment solution**. It is designed to **reduce redundancy during development** by sharing code (components, hooks, styles, etc.) across projects. Each project should be treated as a standalone application and deployed from its own repository or pipeline. If you modify only one project, only that project should be rebuilt and redeployed—others must not be affected. This tool intentionally builds to a single `dist/` directory to reinforce that only **one project is active per build**.\n\nFuture versions may support building multiple projects in one pass, but this will remain **optional** and opt-in.\n\n## Features\n\n- Zero-configuration entry point: no `main.tsx` required\n- Automatic project discovery from `src/projects/`\n- Shared code (components, utils, styles, i18n, etc.) across projects\n- Isolated builds: each run targets exactly one project\n- Full TypeScript support\n- Vite 7+ compatible\n- Preserves your `index.html` (no overrides)\n- Validates setup before running\n\n## Requirements\n\n- Node.js \u003e= 20.19.0\n- A `index.html` file in your project root containing a `\u003cdiv id=\"root\"\u003e\u003c/div\u003e`\n- Project components in `src/projects/` (e.g., `src/projects/app-a.tsx`)\n\n## Installation\n\n**Globally (recommended for faster take-off):**\n\n```bash\nnpm install -g react-mpx\n```\n\n**Or**\n\n```bash\nnpx react-mpx\n```\n\n## Usage\n\nList available projects interactively:\n\n```bash\nreact-mpx dev\nreact-mpx build\n```\n\nOr specify a project directly:\n\n```bash\nreact-mpx dev --project app-a\nreact-mpx build --project admin-panel\n```\n\n### Custom projects directory\n\nBy default, projects are loaded from `src/projects/`. You can override this:\n\n```bash\nreact-mpx dev --project my-app --src ./apps\n```\n\n## Accessing the Active Project in Code\n\nThe currently selected project name is available in your application code via Vite’s built-in environment variable:\n\n```ts\nconst currentProject = import.meta.env.MODE;\n```\n\nThis value matches the `--project` name you passed to the CLI (e.g., `\"app-a\"`).\n\n## Project Structure Example\n\n```\nmy-monorepo/\n├── index.html\n├── src/\n│   ├── components/        ← shared components\n│   ├── hooks/             ← shared hooks\n│   ├── styles/            ← shared styles\n│   ├── i18n.ts            ← shared i18n setup\n│   └── projects/\n│       ├── app-a.tsx      ← project A entry\n│       └── app-b.tsx      ← project B entry\n└── package.json\n```\n\nEach project file (e.g., `app-a.tsx`) must export a default React component.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fobaidqatan%2Freact-mpx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fobaidqatan%2Freact-mpx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fobaidqatan%2Freact-mpx/lists"}