Check out a free preview of the full Production-Grade Angular course

The "Adding Swagger" Lesson is part of the full, Production-Grade Angular course featured in this preview video. Here's what you'd learn in this lesson:

Lukas demonstrates how to add Swagger, a dedicated module that Nest offers that facilitates the building of RESTful APIs.

Preview
Close

Transcript from the "Adding Swagger" Lesson

[00:00:00]
>> I actually couldn't believe that I could do this like this, but here we are. I think this is neat. We're gonna go yarn add, Nest swagger and swagger-ui-express. We're going to add this in. And when this is done, we're going to go make one small modification to our code base.

[00:00:30]
And I am not going to type this out by hand, but it will be impressive. None the less. All right. So I think we're good here. Let me just double check. Get again, lock files, lovely. I'm not gonna let that bother me. Now what I'm going to do is I'm going to go into the main TS and we're going to clean this up.

[00:01:03]
And so I'm going to just introduce a new method here. I'm gonna paste it in and then we can kind of talk about what it's doing. And we may need to wait for the application to stop compiling, all right? So we need to import Document, Builder and the swagger module, all right?

[00:01:31]
From here I've added the Configure swagger Method. And I'm just creating a New Document Builder, which we're gonna see what this looks like in just a moment. But I'm setting the title description, set version, build, whatever. And then I am creating a document. And then I'm saying set this up.

[00:01:54]
So this is just basic configuration. You can copy it off of the documentation. Or you can copy it from the repo but I really didn't invent this other than I created kind of a extracted it out into a standalone function for me to call. And then from here, we are going to call configure swagger and I believe I pass the app.

[00:02:20]
Please double check. Yep, could it be that easy? True story. So just real quick. I'm just configuring the Document Builder. And then I'm creating the document. And then I'm setting it up. So kinda three main steps in here. Let me just also double check I'll show there's something really silly.

[00:02:51]
All right, so, is happened here. This is where I'm going to need mark to cue some epic music in the background in post production, so start thinking about maybe Carmen Bruner or something. What do we got here? Swagger in about a single method. And so if I wanna get widgets, try it out, boom.

[00:03:33]
So it's kind of weird in a way, I did wrestle with, do I talk about nest. When I talk about production Angular, and the answer is, I believe anything that helps you build higher quality production apps, especially something so integrated and so aligned with the angular ecosystem. Absolutely, I think in a way, I feel like I would be morally remiss not to say like, hey, here's this awesome tool.

[00:04:02]
And if you understand Angular, then you pretty much understand how to build APIs, which when you're building production apps, invariably, you are going to need to consume an API typically faster than the backend team can produce it. This is a great way to supplement those efforts. And I've had some situations or I've had a lot of situations where you offer to kind of stub that out and actually take the pressure off the back end team and you get a high five is that you're actually providing value to the back end team.

[00:04:43]
By not Essentially turning up the heat for them to get something done when they're probably overloaded. And so this is a way to really take ownership of the entire stack as you start to build this out and remove that dependency from the back end team, and as long as you have consensus on the data model.

[00:05:07]
Then you can continue to accelerate your development without creating unnecessary risk down the road. So I'm gonna pause here. I'm gonna take one more loving look at this sweet, Swagger API, and, From here, I'm going to pause and ask, does anybody have any questions, comments about what they've just seen in the context of a what I would consider a full-stack Angular app, at this point?

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now