471536cb38
- Move the integrated vs. package-based concept page to the deprecated section - Remove the integrated project in package-based repo recipe - Remove the package-based project in integrated repo recipe - Rename standalone to integrated recipe - Update references to integrated or package-based terms in tutorials
109 lines
6.2 KiB
Markdown
109 lines
6.2 KiB
Markdown
# Convert from a Standalone Repository to a Monorepo
|
|
|
|
You can always add another app to a standalone repository the same way you would in a monorepo. But at some point, you may want to move the primary app out of the root of your repo because the repo is no longer primarily focused on that one app. There are other apps that are equally important and you want the folder structure to align with the new reality.
|
|
|
|
{% youtube
|
|
src="https://youtu.be/ztNpLf2Zl-c?si=u0CfLAx_tpioZ3Vu"
|
|
title="Graduating your Standalone Nx Repo to a Monorepo"
|
|
width="100%" /%}
|
|
|
|
## Run the Generator
|
|
|
|
The `convert-to-monorepo` generator will attempt to convert a standalone repo to a monorepo.
|
|
|
|
```shell
|
|
nx g convert-to-monorepo
|
|
```
|
|
|
|
If you need to do the conversion manually, you can follow the steps below.
|
|
|
|
## Manual Conversion Strategy
|
|
|
|
For this recipe, we'll assume that the root-level app is named `my-app`. The high-level process we'll go through to move the app involves four stages:
|
|
|
|
1. Create a new app named `temp` under `apps/temp`.
|
|
2. Move source and config files from `my-app` into `apps/temp`.
|
|
3. Delete the files for `my-app`.
|
|
4. Rename `apps/temp` to `apps/my-app`
|
|
|
|
## Steps
|
|
|
|
1. Update the `workspaceLayout` property in `nx.json` to be:
|
|
|
|
```jsonc {% fileName="nx.json" %}
|
|
{
|
|
"workspaceLayout": {
|
|
"appsDir": "apps",
|
|
"libsDir": "libs"
|
|
}
|
|
}
|
|
```
|
|
|
|
This will make sure that new apps are created under `apps` and new libraries are created under `libs`.
|
|
|
|
2. If there is a `tsconfig.json` file in the root, rename it to `tsconfig.old.json`
|
|
|
|
This step is to make sure that a `tsconfig.base.json` file is generated by the app generator in the next step.
|
|
|
|
3. Create a new app using the appropriate plugin under `apps/temp`
|
|
|
|
```shell
|
|
nx g app apps/temp
|
|
```
|
|
|
|
4. Move the `/src` (and `/public`, if present) folders to `apps/temp/`, overwriting the folders already there.
|
|
|
|
5. For each config file in `apps/temp`, copy over the corresponding file from the root of the repo.
|
|
|
|
It can be difficult to know which files are root-level config files and which files are project-specific config files. Here is a non-exhaustive list of config files to help distinguish between the two.
|
|
|
|
| Type of Config | Files |
|
|
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| _Root-level_ | `.eslintignore`, `.eslintrc.base.json`, `.gitignore`, `.prettierignore`, `jest.config.ts`, `jest.preset.js`, `.prettierrc`, `nx.json`, `package.json`, `tsconfig.base.json` |
|
|
| _Project-level_ | `.eslintrc.json`, `index.html`, `project.json`, `jest.config.app.ts`, `tsconfig.app.json`, `tsconfig.json`, `tsconfig.spec.json`, `vite.config.ts`, `webpack.config.js` |
|
|
|
|
{% callout title="jest.config.app.ts" type="note" %}
|
|
`jest.config.app.ts` in the root should be renamed to `jest.config.ts` when moved to `apps/temp`. Also update the `jestConfig` option in `project.json` to point to `jest.config.ts` instead of `jest.config.app.ts`.
|
|
{% /callout %}
|
|
|
|
6. Update the paths of the project-specific config files that were copied into `apps/temp`.
|
|
|
|
Here is a non-exhaustive list of properties that will need to be updated to have the correct path:
|
|
|
|
| Config File(s) | Properties to Check |
|
|
| ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| `project.json` | `$schema`, `sourceRoot`, `root`, `outputPath`, `reportsDirectory`, `cypressConfig`, `lintFilePatterns`, `index`, `main`, `tsConfig`, `assets`, `styles`, `jestConfig` |
|
|
| `tsconfig.json`, `tsconfig.app.json`, `tsconfig.spec.json` | `extends`, `outDir`, `files` |
|
|
| `.eslintrc.json` | `extends` |
|
|
| `jest.config.ts` | `preset`, `coverageDirectory` |
|
|
| `vite.config.ts` | `cacheDir`, `root`, `dir` |
|
|
|
|
7. Doublecheck that all the tasks defined in the `apps/temp/project.json` file still work.
|
|
|
|
```shell
|
|
nx build temp
|
|
nx test temp
|
|
nx lint temp
|
|
```
|
|
|
|
8. Move the `/e2e/src` folder to `/apps/temp-e2e`, overwriting the folder already there
|
|
9. For each config file in `apps/temp-e2e`, copy over the corresponding file from the root of the repo. Update the paths for these files in the same way you did for the `my-app` config files.
|
|
10. Update the `/apps/temp-e2e/project.json` `implicitDependencies` to be `temp` instead of `my-app`
|
|
11. Doublecheck that all the tasks defined in the `apps/temp-e2e/project.json` file still work.
|
|
|
|
```shell
|
|
nx lint temp-e2e
|
|
nx e2e temp-e2e
|
|
```
|
|
|
|
12. Delete all the project specific config files in the root and under `e2e`
|
|
13. Once the `project.json` file has been deleted in the root, rename `temp-e2e` to `my-app-e2e` and rename `temp` to `my-app`
|
|
|
|
```shell
|
|
nx g move --projectName=temp-e2e --destination=my-app-e2e
|
|
nx g move --projectName=temp --destination=my-app
|
|
```
|
|
|
|
14. Update the `defaultProject` in `nx.json` if needed
|
|
15. Check again that all the tasks still work and that the `nx graph` displays what you expect.
|