Automatic migration of existing applications

[00:00 - 00:24] In this lesson, you will learn how automatic migration to NX-Monorepo works for Angular applications. So let's start by creating a brand new Angular application. I will use Angular CLI to generate a new app, I will install all the dependencies, and then I will add three libraries, library A, B, and C. All the comments that I'm going to execute, you can see on the screen at the moment.

[00:25 - 01:43] Options that I choose here are not that important because automatic migration works for all possible options. So let's select CSS and now we don't want SSR. All right, so app has been generated, I entered application name of my application directory, I've run yarn install to install all the dependencies. Now let's add three libraries. So first one is library A, it takes just second to install it. The second is library B and library C is the last one. So at the moment, we have a standard Angular CLI application generated with ng comment. So if we try to list all the directories here, you will find that we have read me and denote modules, and what is important we have as our C and projects. And all libraries live in projects. So if we go to projects and list it, as you can see, we have our free libraries. So let's run git in here to initialize a new GitHub repository. And let's execute git status to list all untracked files. And I will add everything to my git repository as a starting point that we always can revert to this point.

[01:44 - 03:41] So git add everything git comment, minutes message, empty, angular app. All right, so we have our angular application generated with standard ng comment. So now let's use automatic regression to migrate it to nx monorepo. To do this, you need to install nx globally. And I guess you have it installed at the moment. If you don't have it, you have to run npm install - - global nx at latest, if you want to have the latest version. In some configurations of Node.js, you will need to add sudo in front of the command. So we have empty Angular application. We have our nx installed globally. Let's run automatic regression. To do this, you need to execute command nx in it. And nx will ask you which targets should be cached at all. In my case, it's built in tests. I don't want to cache for serve and the second one. So let 's proceed with the selected build and test. The second question, as always, is about nx cloud. Do you want to use it? Let's say yes. And that's all. So if you want to use automatic migration in your project, all you need to do is to have a standard ngcli application and run nx in it. It works pretty good for small and medium applications. So let's check what has changed in my projects. Let's run git status. And we have lists of all the files that has changed. The most important one, we don't have Angular JSON. It was replaced by project JSON. Every library has its own project JSON. As we always have in nx model repo. And xdjson file has been added. So you know that you have a proper nx model repo. Let's list all the files and let's check how it looks like after the migration.

[03:42 - 05:12] So you may wonder why we don't have that apps, leaps and tools, their stories. So by default, automatic migration doesn't change your folder structure. It will try to keep the same for the structure that you had before migration. And that's nice because you don't need to learn new stuff. So it has some pros and cons, right? And the second difference is that you don't have end to end project for your application. One of the most important features of nx is that it comes with all tools preconfigured. And in this case, you have only things that you had configured before migration. Now we are going to reset changes in our Git repository. And we will run nx in the comment with additional comments. So git reset minus minus heart. And if we run git status, you can see that we have only additional files. We don't have any changes. So let's clean it. So after running these two comments, we have everything as we had before migration. So now let's run nx in it with two additional flags. First one is called add e to e. And the second one is minus minus integrated. So with these comments, with these two additional flags, add e to e and integrated, we should get our application migrated with end to end tests and unit tests configuration.

[05:13 - 06:05] So let's run git status to check what has changed. All right. So as you can see , we have a lot of deleted files. We have our, of course, we have our angular JSON 5 deleted, we have all libraries deleted, and then added as leaps and apps. So it's closer to menorepos that we learned in previous lessons. To sum up, as you can see, automatic migration is a useful tool that might be a real game changer for small or medium applications. You can migrate it up to nx mon orepos in just few seconds. I personally wouldn't recommend running it for bigger applications, because bigger applications are very often more complicated. You have more custom things, and it might not work. So in the next lesson, we will be back to the subject of manual migration of existing applications.