Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
API Routes
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:02 To make your API serve its purpose, typically you needed routes or endpoints that do their job.
00:00:08 That way, frontend apps or mobile apps, or really anyone that you allow, can hit those endpoints to get the desired data.
00:00:15 So, let's go ahead and create a couple of routes.
00:00:18 We'll do it in a super organized way.
00:00:21 By first creating a new folder, which we'll call routes.
00:00:25 Now, you could have totally had all your app's routes within a single app.js file.
00:00:30 Something like this.
00:00:32 But of course, not all routes are just one-liners.
00:00:35 They require more code and specialized logic.
00:00:39 For that reason, we'll separate our routes based on their functionality.
00:00:43 We can do it with separate files.
00:00:45 I'll create a new file and name it auth.routes.js.
00:00:50 This will be our first separate router.
00:00:52 Let's import router with a capital R coming from Express.
00:00:58 And then let's initialize it by saying const auth router is equal to router, which we call like this.
00:01:04 Then similar to how you did the app.get, now you can do auth router.get, or in this case, it'll be a post route.
00:01:14 to forward slash sign dash up.
00:01:17 And then you already know it, you can define a callback function that'll be executed once you call that API route.
00:01:24 In this case, I will simply return a string of sign up.
00:01:28 But to return something from an API, it is not enough just to return it.
00:01:33 you have to actually send it by using the res.send method, and then pass over the text as body.
00:01:39 And that response typically won't be just a single string.
00:01:43 Usually, they're in a JSON format, where you have something that looks like this.
00:01:48 a JavaScript object with different properties right inside of it.
00:01:53 In this case, I can render a title and it can be sign up.
00:01:58 We can duplicate this one two times to create two other routes.
00:02:02 The second one will be for sign in and the title will say sign in.
00:02:08 And the third one will be sign out, where we can say sign out.
00:02:12 Of course, we haven't yet implemented actual functionalities for these routes.
00:02:17 Right now, they're just returning a piece of text.
00:02:19 But very soon, we can insert functions that are gonna deal with the logic of whatever that route is supposed to do right here.
00:02:27 For now, we're just creating the structure.
00:02:29 And at the end, you also have to export default that router.
00:02:33 Perfect.
00:02:34 These are auth routes.
00:02:36 So now let's create another one.
00:02:38 I'll create it for a user, user.routes.js.
00:02:44 You know the drill.
00:02:45 We import the router coming from Express.
00:02:49 Then we instantiate it by saying const userRouter is equal to an instance of the router.
00:02:56 And then you can define the userRouter and then different routes.
00:03:00 For example, we can have a route that gets all users.
00:03:05 That will look something like this.
00:03:07 userRouter.get forward slash.
00:03:10 We get the rec and the res, and then we simply return a response.
00:03:14 In this case, we can have an immediate return.
00:03:16 So we can do something like res.send.
00:03:19 And we can give it a title, something like fetch all users.
00:03:26 Or we can be consistent with our HTTP verbs.
00:03:28 So this will be get all users and we can duplicate it a couple more times.
00:03:35 The second one will not get all the users, but it'll get the details of a singular user.
00:03:42 So in this case, we're using this special colon and then ID property, which stands for dynamic parameter.
00:03:50 So for example, You can have a static parameter, forward slash users, for example, which is always going to look like this.
00:03:57 And whenever somebody hits it, they're going to get back all the users.
00:04:01 But we also have dynamic parameters where it can look something like this.
00:04:07 Get users, one, two, three, or something else.
00:04:11 And every time, it'll get different user details.
00:04:15 Perfect.
00:04:16 So in this case, we'll say get user details.
00:04:21 The third one can be a post route under forward slash.
00:04:26 Oh, this one was also just a forward slash.
00:04:28 So keep in mind, you can have multiple routes with the same endpoint, but they have to be different HTTP verbs.
00:04:36 So one can be get and the other one can be post.
00:04:39 This one we'll use to create a new user.
00:04:43 And I think they're too close together.
00:04:45 So let's give them some space to breathe.
00:04:48 We can also have another put route.
00:04:52 Puts are typically used for updates.
00:04:54 So we have to know which user to update.
00:04:56 So also specify the dynamic ID parameter.
00:04:59 And this one will update the user by ID.
00:05:03 So update user.
00:05:05 And finally, the last one can be user router delete.
00:05:09 And we also have to know which user to delete.
00:05:11 So we'll also get that ID and the title of that route will be delete a user.
00:05:18 Perfect.
00:05:18 Finally, let's export default.userRouter and we'll be able to use them very soon within our app.
00:05:25 Now that we know the drill, creating one more file will be super simple.
00:05:30 Let's just call it subscription.routes.js.
00:05:34 Once again, we'll import a new router coming from Express.
00:05:39 We'll instantiate it by saying const subscriptionRouter is equal to the call of the router.
00:05:45 And then we can define different routes by saying subscription router dot.
00:05:50 And then we can define different endpoint as well as the handler.
00:05:53 Let's start with just forward slash.
00:05:56 This one will res dot send a title.
00:06:01 of get all subscriptions.
00:06:05 So if we're being descriptive enough, we don't even have to add a comment of what exactly this one does.
00:06:10 We can already know just by looking at it.
00:06:12 And typically, if you're following well-written HTTP REST API guidelines, you'll always know exactly what which route does.
00:06:20 If you Google for REST API naming conventions and best practices, you'll very quickly understand how it works.
00:06:26 Make sure that your URLs are named with nouns to specify the resource instead of using verbs.
00:06:32 So the URIs themselves shouldn't indicate any CRUD operations.
00:06:37 You shouldn't say create items, get employees, update prices, and so on.
00:06:41 You should do what we're doing in this video where you're going to have users or subscriptions and then you can either have a specific item ID or you can
00:06:49 just have forward slash subscriptions and get all of them.
00:06:53 Same thing here.
00:06:54 Use pluralized nouns for resources like items or employees.
00:06:58 That's bad.
00:06:59 You always want to use plural, similar to what we're doing with users or subscriptions, use hyphens to connect different words together,
00:07:07 and so on and so forth, and so on.
00:07:10 But I'm already teaching you all of those practices, so you don't really have to think about them.
00:07:14 Just learn how to do things properly.
00:07:16 Oh, and you might wonder, like, Not that long ago, we already had a user route that was a get route that started with a forward slash.
00:07:25 But here we have a subscription route, which can also be .get and also the forward slash.
00:07:31 So wouldn't those routes clash?
00:07:33 Well, not really.
00:07:34 Let me show you why.
00:07:36 I will export default this subscription router so we can use it within the app.
00:07:42 As a matter of fact, we'll import all of these routes right within our app.js.
00:07:47 You don't have to explicitly code them within here, but they definitely have to be imported here because the app is the center of your application.
00:07:55 So let's import the user router coming from dot slash routes forward slash user dot routes dot js.
00:08:04 And let's also duplicate it two times and import the second router, which is the auth router coming from routes auth routes.js and finally we have a subscription
00:08:18 router which is coming from routes-subscription.routes.js Once you import them, you have to put them to use.
00:08:27 Right here below the app, we can say app.use.
00:08:31 And we typically use the use keyword with something like middleware where you want to maybe tell your application that it's going to be using JSON.
00:08:38 But we also use use when you want to say which routes you want to use.
00:08:44 So in this case, we can say app.use.
00:08:47 forward slash API, forward slash V1, forward slash auth.
00:08:53 And then here we can render the auth router.
00:08:58 This means that you can get to this signup by first heading over to forward slash API, forward slash v1, forward slash auth,
00:09:09 and then sign up like this.
00:09:12 Hopefully that makes sense.
00:09:13 So you're prepending whatever is here, and then you're attaching these additional routes to it.
00:09:19 In a similar way, we can add the users.
00:09:24 Keep in mind, good practice to keep it plural.
00:09:27 And then we can also add the subscriptions.
00:09:30 This is going to be the user router.
00:09:32 And finally, we're going to have the subscription router.
00:09:38 And the answer is that these two don't clash because this is API v1 users, and this one is API v1 subscriptions.
00:09:48 Perfect.
00:09:49 Now let's finalize our subscription routes, and then we'll be able to make calls to our API so I can show you how that works.
00:09:55 For now, I'll duplicate it a couple of times and create some space just so we can see what's happening.
00:10:00 The second one will get subscription by ID.
00:10:03 So it'll still be get, but it'll have a colon ID right here, and it'll be get subscription details.
00:10:13 The third one can be a post which we'll use to create a subscription.
00:10:18 So this will be a create subscription.
00:10:21 After that, we also need to update the subscription.
00:10:24 So we'll say put based on a specific ID, update a subscription.
00:10:32 After that, we need to be able to delete a subscription.
00:10:35 We're basically dealing with CRUD functionalities right here.
00:10:38 A foundational element of every single API out there.
00:10:43 You need to be able to delete, create, or read, or update literally anything out there.
00:10:49 And on top of all of these basic CRUD operations, we'll also need to get all the subscriptions belonging to a specific user.
00:10:57 So we can make it something like forward slash user, forward slash, and then ID.
00:11:03 That way, we can try to extract all the subscriptions of a specific user.
00:11:08 So get all user subscriptions.
00:11:11 We'll also have another put right here below, which will cancel a user subscription.
00:11:17 So this one will go to forward slash colon ID forward slash cancel, and we'll call it cancel.
00:11:26 And finally we'll create one more route which will get us all upcoming renewals.
00:11:34 That way we can know which subscriptions are coming soon.
00:11:37 So I'll say get upcoming renewals.
00:11:41 Perfect.
00:11:42 This seems like a lot of routes but they're nicely contained within their own file and we're importing them here so we can actually use them.
00:11:50 So what do you say that we put it to the test?
00:11:52 Our application is running on localhost 5500. So if you open it up, you'll see that it works.
00:11:59 And if we try to maybe get all subscriptions, that's going to be under API V1 subscriptions.
00:12:07 So we can append that to localhost 5000 URL.
00:12:10 And you can see that my browser automatically turns this into a JSON format.
00:12:16 And we even have this nice pretty print option, which returns it in a nicer format.
00:12:21 Title, get all subscriptions.
00:12:23 If we had to V1 users.
00:12:27 You can get all users.
00:12:29 But these JSON outputs are never meant to be read by a user on a site.
00:12:34 I mean, sure, you can make GET requests using the browser, because when searching for a website, a browser automatically makes a GET request and outputs
00:12:43 the HTML for you.
00:12:44 In this case, that response is JSON data.
00:12:47 But to test other types of HTTP requests, you'll need an HTTP client, like Postman or Insomnia, or even modern lightweight HTTP clients like HTTPy,
00:13:00 which has a very simplistic interface, but still gets the job done.
00:13:04 And there's also another one which I found to be very popular, which is called simply Bruno, allowing you to make all sorts of different HTTP requests.
00:13:12 Nowadays, there's also HTTP clients built right into your editor.
00:13:17 So just Google the name of your editor and try to find a package that does that for you.
00:13:21 I really needed something simple, and HTTPy delivered.
00:13:25 It's just a free download.
00:13:26 I installed it on my device, and now I can make GET requests similar to what my browser can do, but I can also very easily switch it to a POST request,
00:13:36 for example.
00:13:37 And if I try it, you can see that we get a title of Create Subscription, which means that we have now successfully hit not only our GET routes,
00:13:46 but also the create routes.
00:13:49 We know that because we got this JSON back right from our API, create subscription.
00:13:54 In the next lesson, let's set up our database, which will make us one step closer to implementing real functionality to store and retrieve subscriptions.