{"id":13495343,"url":"https://github.com/wixplosives/sample-monorepo","last_synced_at":"2025-05-15T10:06:53.151Z","repository":{"id":32392207,"uuid":"132473470","full_name":"wixplosives/sample-monorepo","owner":"wixplosives","description":"Sample monorepo setup with npm workspaces and typescript project references","archived":false,"fork":false,"pushed_at":"2025-05-12T18:30:28.000Z","size":7876,"stargazers_count":644,"open_issues_count":0,"forks_count":96,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-05-12T19:47:48.869Z","etag":null,"topics":["monorepo","npm","typescript"],"latest_commit_sha":null,"homepage":"","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/wixplosives.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}},"created_at":"2018-05-07T14:35:45.000Z","updated_at":"2025-05-12T18:30:32.000Z","dependencies_parsed_at":"2024-11-11T01:17:06.588Z","dependency_job_id":"f9384d06-d2a4-4c27-a5f5-974f52635d64","html_url":"https://github.com/wixplosives/sample-monorepo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wixplosives%2Fsample-monorepo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wixplosives%2Fsample-monorepo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wixplosives%2Fsample-monorepo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wixplosives%2Fsample-monorepo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wixplosives","download_url":"https://codeload.github.com/wixplosives/sample-monorepo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319720,"owners_count":22051073,"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":["monorepo","npm","typescript"],"created_at":"2024-07-31T19:01:33.784Z","updated_at":"2025-05-15T10:06:48.138Z","avatar_url":"https://github.com/wixplosives.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","typescript"],"sub_categories":[],"readme":"# sample-monorepo\n\n[![Build Status](https://github.com/wixplosives/sample-monorepo/workflows/tests/badge.svg)](https://github.com/wixplosives/sample-monorepo/actions)\n\nSample monorepo setup with npm workspaces and typescript project references.\n\n## Getting started\n\nClone repository and execute the following commands in the root:\n\n- `npm i`\n- `npm run build`\n- `npm start` - to see the client running in dev-mode (non-minified; with source-maps)\n- `npm run start:server` - to see server running (with SSR; client is minified with source-maps)\n\n## Setup explained\n\n### Tooling\n\n- Monorepo is installed using [npm](https://github.com/npm/cli).\n\n  - Packages are automatically linked together, meaning you can do cross-package work within the repo.\n  - `devDependencies` are common, and only appear in the root `package.json`. Easier to manage and upgrade.\n  - Each package has its own `scripts` and `dependencies`. They are being installed in the root `node_modules`, using the same deduping mechanism `npm` uses for single packages.\n  - Adding new packages is as simple as dropping an existing package in the `packages` folder, and re-running `npm i`.\n\n- Sources and tests are written in strict [TypeScript](https://github.com/Microsoft/TypeScript).\n\n  - Common base `tsconfig.base.json`.\n\n### Included sample packages\n\n- **[@sample/components](./packages/components)**\n\n  - [React](https://github.com/facebook/react) components library.\n\n- **[@sample/app](./packages/app)**\n\n  - [React](https://github.com/facebook/react) application.\n  - Uses the `@sample/components` package (also inside monorepo).\n\n- **[@sample/server](./packages/server)**\n  - [Express](https://github.com/expressjs/express) application.\n  - Uses the `@sample/app` package (also inside monorepo).\n  - Listens on http://localhost:3000 (client only rendering) http://localhost:3000/server (SSR rendering).\n\n### Basic structure and configurations\n\n```\n.github                  // CI flow configuration (GitHub Actions)\npackages/\n  some-package/\n    src/\n      test/              // package-specific test folder\n        test.spec.ts\n      index.ts\n      tsconfig.json      // package-specific config, built to \"some-package/dist\"\n    LICENSE              // license file. included in npm artifact\n    package.json         // package-specific deps and scripts\n    README.md            // shown in npmjs.com. included in npm artifact\n\n.eslintignore            // eslint (linter) ignored directories/files\n.eslintrc                // eslint (linter) configuration\n.gitignore               // github's default node gitignore with customizations\n.prettierignore          // prettier (formatter) ignored directories/files\n.prettierrc              // prettier (formatter) configuration\nlerna.json               // lerna configuration (needed for deployment below)\nLICENSE                  // root license file. picked up by github\npackage-lock.json        // the only lock file in the repo. all packages combined\npackage.json             // common dev deps and workspace-wide scripts\nREADME.md                // workspace-wide information. shown in github\ntsconfig.base.json       // common typescript configuration\ntsconfig.json            // solution-style root typescript configuration\nwebpack.config.js        // root webpack configuration. inherited by app's webpack config\n```\n\n### Styling solutions\n\nThis repository aims to _avoid_ showcasing styling solutions in-depth.\n\nWebpack's experimental CSS handling is turned on for the `sanitize.css` library being used, but the infrastructure doesn't contain any asset copying (into `dist` folder) and so doesn't support _local_ css assets.\n\nEach styling solution has its own set of infrastructure requirements.\n\nCSS-in-JS based solutions, for example, probably won't need to worry about it at all, and work without additional setup.\n\nWithin Wix, we use [Stylable](https://github.com/wix/stylable), which has its own CLI ([stc](https://github.com/wix/stylable/tree/master/packages/cli)) to build and/or copy `.st.css` files into `dist`.\n\nFull support for source code importing `.css/.scss/.less/.whatever` would require additional building. It would have to be addressed for Node as well, if one wants to execute tests importing these source files.\n\n### Dependency management\n\nTraditionally, working with projects in separate repositories makes it difficult to keep versions of `devDependencies` aligned, as each project can specify its own `devDependency` versions.\n\nMonorepos simplify this, because `devDependencies` are shared between all packages within the monorepo.\n\nTaking this into account, we use the following dependency structure:\n\n- `devDependencies` are placed in the root `package.json`\n- `dependencies` and `peerDependencies` are placed in the `package.json` of the relevant package requiring them, as each package is published separately\n\nNew `devDependencies` can be added to the root `package.json` using npm:\n\n```sh\nnpm i \u003cpackage name\u003e -D\n```\n\nSome packages depend on sibling packages within the monorepo. For example, in this repo, `@sample/app` depends on `@sample/components`. This relationship is just a normal dependency, and can be described in the `package.json` of `app` like so:\n\n```json\n  \"dependencies\": {\n    \"@sample/components\": \"\u003cpackage version\u003e\"\n  }\n```\n\n### Deployment\n\n`npx lerna publish` will publish new versions of the packages to npm.\n\nLerna asks for new version numbers for packages that changed since last release and their dependencies. Every package has a `prepack` script which automatically runs `build` prior to packing.\n\n`npx lerna publish --force-publish` will force a release of _all_ packages, regardless of which ones actually changed.\n\nDeployment of app/server assets to any actual production servers is not shown.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwixplosives%2Fsample-monorepo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwixplosives%2Fsample-monorepo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwixplosives%2Fsample-monorepo/lists"}