The best way to start contributing to Angular is to start improving its documentation. There are always some small things we could improve like typos, grammar mistakes, etc In this video, I just wanted to share with you step by step guide of how to add your improvements in the official Angular Documentation on the angular.io website. Let's start to build better docs together!
💥 Angular courses made by Dmytro - https://bit.ly/df-courses 💥 ✂️ Use coupon YOUTUBE_DISCOUNT to get a 10%-off discount ✂️
Time Codes: 00:00:00 - Intro; 00:00:57 - Getting started; 00:04:01 - Signing CLA (Contributor License Agreement); 00:05:18 - Implementing the fix; 00:05:36 - Running Angular Docs locally; 00:10:49
- Committing changes and commit format; 00:16:47 - Outro;
Subscribe to my other Social Media:
Twitter - https://twitter.com/DecodedFrontend Instagram - https://www.instagram.com/decodedfrontend LinkedIn - https://www.linkedin.com/in/dmezhenskyi Blog - https://decodedfrontend.io
Hey everyone, welcome. My name is Nitromashanski and in this video I'm going to show you how to contribute to official Angular documentation. So in case you encounter any typos there, or you think that some Angular topics you could explain better and you would like to suggest your changes, but you don't know how to do it. In this video you will find answers to those questions and you'll see all necessary steps you have to perform in order to suggest your changes. And if everything is fine, they will be accepted by Angular Core team and it will be available on Angler AO website. So if you're still interested, stay tuned and let's get started. In this video we are going to fix a very important issue in current Angular documentation, and namely inside the Resources and Education tab, we're going to add the link to decoded Frontend YouTube channel. Currently it is missing. So let's fix it right now. And the first thing you have to do is to click this button which leads us to official GitHub repo. And then we have to perform a couple of steps. The first one is that we're going to fork current Angular repo into our account. So I just pick my personal account and it will be worked right there. So currently we have the snapshot of official Angular repo with all commits, with all files, with whole history. So everything is copied into our account and we can do whatever we want with this. So the next step is to clone everything to our local machine. So I'm going to use Git clone command and place the link I copied and just wait until everything will be cloned into our computer. So now I open this everything with Vs code. Here you can see the pop up which tells that there are some extensions for Vs code recommended by Angular Core team for this repo and you can install them. They're actually extension for Basel Angular IO documentation, utilities, things like that. So it's completely up to you. If you don't want you can skip this, but I would follow the recommendation and install these extensions. So now we have the following folder structure and also we have a couple of important files right there. For example contributing. Md file. This file contains all necessary information we need in order to create full request, create a proper commit message and things like that. We're going to implement most of those things in this video. The next file is Code of Conduct. It's just rules how you have to behave in the community when you discuss something in your pool request or discussing different kit habits, whatever. So let's go back to Contributing and we're going to start with a signing contributor license agreement. It is very important because without signing this license your pull request will not be accepted. But it is quite easy step. So you just have to follow this link and then you have to log in if you didn't log in yet. And then you will see some forms, something like what you can see right now. So you can enter your GitHub username and you have to provide emails that are associated with your GitHub account. Important thing regarding those emails is that make sure that inside get config. Your user email is one of you mentioned in the contributor license form. So this is very important. If everything is fine then you can click I agree button and that's pretty much everything you have to do. Then we go back and the next step is to create the separate branch for our feature. Let's say I am creating the new branch and I call it Add decoded front end to Resources. So far so good. And the next step is to install dependencies. So I run Yarn and it will take some time until we install everything. And it is important to mention that you have to use Yarn because here in package. Json you can see that NPM is not being supported. So use Yarn instead so that's it. And once you see something similar then everything is fine. Everything was successfully installed and now we can start angular. Io website locally. And actually all files for that website are located under the AIO folder. This is just regular angular application. You can see it right here. We have different layouts like footer whatever. By the way the most of the content for angular. Io located under the content folder right here. And every page has a dedicated. Md file. For instance we can open the start page and here you can see index file. This is the content for the page angular. Io start. And in most of the cases those empty files, those are files you will be editing and we have to find README file that describes what we have to do in order to run everything. So I will install dependencies also for this website. So I will navigate to the AIO website and run Yarn. And the second step is to run Yarn setup command and I believe I could run just Yarn setup because it also installs all dependencies. But okay, never mind. Now we can run Yarn start and then if we navigate to localhost 4200 you can see that our application kind of work but we have only header and some Bunner. But we don't have the content. And the thing is that we have to build our content first. And in order to do this you have to run Serve and sync command. This command will compile the content from empty files and start to serve our application. So once you run it after some time you can navigate to localhost to 4200. And now you can see that our angular. Io website is being served but locally at this time. So let's navigate to our Resources and Education tab. And as I said, we're going to add the link to the golden front and YouTube channel right here. So we have to find a file that contains the source code for this list. And I don't know about you but when I have to find something in the project, in the big project I see first time I just grab some string, then go to vs code or any other editor and just do the global search and such a way I find the file or the component I am looking for. And here we go. So it turns out that it is a JSON file, namely resources dot. Json and looks like somewhere here we have to enter just our item and I will place it maybe somewhere next to this line. So I just replaced the key to decoded front end so it should be some unique key I suppose. And I just adjust the description. I say that this is the YouTube channel about Angular and web development the title and I will place the link to my YouTube channel right here. So everything looks fine. I save it and let's try to reload and check if our item was added. So let's try to find and here we go. Decoded front end was added. Now let's try to click and check if we have the correct link. Okay, so everything looks fine. So let's go back and now we can commit our changes. But before we start committing we have to figure out the proper commit message. It is very important. So let's jump to our forked angular repo and open the contributing. Md file and there you can find the commit message format section and here you can see the proper format. So it has a type. It could be either blcidocs and in our case it is dogs so we can paste it here. Then we have to define the scope and scope. It is one of the packages listed right there. But in case of documentation you have to drop this scope section. Okay, so in our case you just have to use semicolon and then you can add some string which describes basically our changes. So I say just like add decoded front end YouTube channel to resources list. So now we can commit and push our changes to our forked angular report. Right? But most probably while you're working on your changes there could be new updates from the original repo and you can see that our master branch inside our forked repo is 55 KMB behind the angular master. So in order to synchronize, in order to grab those changes from original angular repo into our forked version, you have to fetch and merge those changes into your forex version. So this is how you can do it. And now what you have to do is to go back to your vs code and we're going to switch to master branch in order to pull changes from our remote repo to our local repo. So I run the command git pool and now we have to switch back to our feature branch and rebase changes from Master into our branch to be sure that we have no conflicts or something like that. And after that we have to push our changes to our feature branch. So I run the command get push minus minus force with Lease command. It is more safe version of minus force flag. By the way, while you're working in your personal branch, you can force push without any problems. You just should not force push it to shared branches. So the branches where some your other colleagues are working as well. But if you do it in a personal branch, it is absolutely fine to force push it. Now we can go back to the GitHub to complete our pull request. Just click this button and you will see the form you have to fill out. Also you can edit your message a little bit. Don't forget to set proper check boxes like this one. That commit message follows our guidelines. Then we have to set the check box here. To be honest, I'm not sure if we should set it in front of documentation content changes or Angular annual application changes. Let's see, in case if we set it wrong we will be asked to redo it. So it is fine for now. This part I think we can remove. And also we have to say that we don't have any breaking changes right here. And then you are ready to create a pull request or draft pull request. If you are not finished yet your changes, you can create a draft but we are done and I create the regular pull request and this is pretty much it. You just have to wait until all checks will be and just wait until someone from Angular Core team will get back to you and leave either some recommendations or merge your changes to the repo. By the way, if you did a mistake like I did in the pull request description, you can always edit it. My mistake was that I don't need any spaces between those brackets, so I'm going to remove them and I can update my commit. And now you can see that checkboxes were properly rendered. And also you can add some additional description like I would like to add my YouTube channel, blah blah blah. And now we can save it and we are basically done. All right guys, that was it. I hope you enjoyed this video. I hope it was useful. So now you can start collaborating to Angular documentation, making the whole Angular ecosystem better and easier for newcomers. So thank you very much for your attention. Please let me know in the comment section. What do you think about this video? Did you like it? Was it useful? And so on and see you in two weeks in the next video. So don't forget to subscribe and share this video. I wish you productive week ahead. Stay safe and see You In The next video.