Routes and How To Create Them
In this lesson, we'll learn how to define routes within AdonisJS and how those routes work.
- Author
- Tom Gobich
- Published
- Jan 24
- Duration
- 5m 23s
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
Transcript
Routes and How To Create Them
-
(upbeat music)
-
- So two lessons ago,
-
we learned how we were getting to our homepage,
-
but how can we add additional pages?
-
After all, a web server is not too great
-
if you're just limited to one page.
-
We know that our routes are defined
-
within our routes.ts file within our start directory.
-
And we know that we can import a router from AdonisJS
-
that allows us to define our routes
-
as we saw with our homepage.
-
So let's try to add in an additional route
-
by typing router. and let's see what our options are.
-
So we see a lot of things here.
-
If we scroll down,
-
we'll continue to see a lot of things here,
-
but overall you'll see a couple of things stand out.
-
First, there's the on that we have for our homepage.
-
This on method is really just a shorthand
-
that allows us to define a pattern.
-
So we could do something like slash movie,
-
and it will allow us to redirect to a different URL
-
or path for this specific path
-
that we defined for this route.
-
So slash movie, we could send that off to somewhere else
-
like imdb.com or something like that.
-
We can render as we see with our homepage,
-
a specific page that we provide in.
-
So this is rendering on a page@pages/home,
-
which is that it works page that we see
-
whenever we visit our web server in our browser.
-
So we have that as an option.
-
We have additional route information via property,
-
and we could set a handler for this route as well.
-
But this on method is really just meant as a shorthand
-
whenever there's one of those specific actions
-
that you wanna provide for the route that you've defined.
-
If there's more meaningful work
-
that you wanna do with that route,
-
that's where we would wanna reach for something
-
like an HTT verb to define the verb
-
that would describe the routes actions
-
and purpose or intent.
-
So for those we have get,
-
which is meant for get requests,
-
getting information or showing pages.
-
We have post, which is meant for posting information
-
and is essentially used for creating records.
-
Put, which is usually used for updating records.
-
Patch, which is usually used for updating
-
a single property on a record
-
or small batches of particular properties for a record.
-
And then lastly, delete, which as you probably assume
-
is used for deleting records.
-
Now, whenever I say records,
-
I'm talking typically about a database.
-
Databases are made up of tables.
-
And as you might be familiar with tables,
-
they have columns and they have rows.
-
Rows would make up the individual record
-
in this particular use case.
-
So you would add in a record or add in a row
-
or delete a row, update a row, so on and so forth.
-
Those make up the different HTT verbs
-
that we have as options for our route.
-
The actual argument options for these
-
are gonna be relatively the same throughout.
-
So for our get request,
-
we're gonna have a pattern option
-
and then we're gonna find a handler as the second argument.
-
The pattern is what's used to match the route
-
to the particular request.
-
For example, whenever we went to our homepage,
-
it has a pattern of just slash,
-
which matches the request for our homepage.
-
But if we dive back into our browser
-
and we try to visit a URL at slash movies,
-
we're gonna get an error.
-
And that's because it cannot find a route
-
matching the URL that we've tried to get.
-
And it's at this point,
-
you may be wondering why you see code blocks
-
over here on the right
-
and you see specific information saying,
-
you cannot get a specific URL.
-
And we have this option to say, show more frames.
-
Well, this is just a developer friendly environment
-
that AdonisJS provides
-
to give us more contextual information
-
as developers about the error that we've run into.
-
Since we have our server running in a dev environment
-
and AdonisJS knows that,
-
it's gonna serve us up some additional information
-
to help us debug the issues that we run into.
-
Whenever we actually deploy our application out
-
into a production based environment
-
and it switches into a production environment
-
for our server,
-
it's gonna know not to show this
-
and we'll be able to set different options
-
that we could show the user
-
instead of this particular page.
-
So don't worry,
-
this is just a developer friendly page
-
AdonisJS is showing us.
-
It's not what the underlying user would see
-
if this were an application running in production.
-
Okay, so we know that it cannot get slash movies.
-
There's an extra slash on there,
-
but that doesn't really matter.
-
We could get rid of that as well.
-
And we'd get the exact same thing.
-
So let's fix this by defining a route for slash movies.
-
So let's hide our browser back away
-
and let's set our get request to slash movies.
-
Now we need to define what we wanna do
-
whenever we get a request going to slash movies.
-
And that's where our handler comes into play.
-
The handler can either be asynchronous
-
or asynchronous function.
-
We'll go ahead and make ours async
-
and it's provided contextual information
-
that I'm gonna abbreviate as just CTX here
-
about the particular request.
-
This is also known as the HTTP context.
-
If we have a river,
-
we'll get this tool tip within Visual Studio Code
-
that says that this is a parameter for our function.
-
We've called it CTX and its type is HTTP context.
-
If we type out CTX dot,
-
you'll see a lot of things like auth,
-
logger, params, request response,
-
route, session, and view down here
-
that we can use to determine
-
how we wanna handle this particular request.
-
Request will contain information about the request.
-
Things like headers, cookies, all of that fun stuff.
-
Response will then allow us to define
-
how we wanna respond to the request.
-
So whether that's sending JSON information,
-
an image, a file, or really anything that you can think of
-
that a server might send back.
-
Response is also useful for setting statuses
-
for the HTTP response, cookies, headers,
-
and all that fun stuff too.
-
Session will allow us to get or set things
-
onto the user's session
-
and view allows us to reach into the edge template system.
-
But if we wanted to,
-
we could just send back a simple string from this method
-
that says my awesome movie,
-
and that would work a-okay too.
-
So let's go ahead and give that a try.
-
So let's give this a save.
-
Since our server is watching our file system,
-
it's gonna pick up that we made that change.
-
So our server is ready to go for it.
-
We can jump back into our browser.
-
We've defined our route for slash movies.
-
So we should be good to give this page a refresh.
-
And there we go, we get my awesome movie.
-
Introduction
-
Fundamentals
-
2.0Routes and How To Create Them5m 23s
-
2.1Rendering a View for a Route6m 29s
-
2.2Linking Between Routes7m 51s
-
2.3Loading A Movie Using Route Parameters9m 17s
-
2.4Validating Route Parameters6m 6s
-
2.5Vite and Our Assets6m 38s
-
2.6Setting Up Tailwind CSS9m 5s
-
2.7Reading and Supporting Markdown Content4m 32s
-
2.8Listing Movies from their Markdown Files8m 51s
-
2.9Extracting Reusable Code with Services7m 4s
-
2.10Cleaning Up Routes with Controllers4m 52s
-
2.11Defining A Structure for our Movie using Models9m 38s
-
2.12Singleton Services and the Idea of Caching6m 11s
-
2.13Environment Variables and their Validation4m 16s
-
2.14Improved Caching with Redis10m 44s
-
2.15Deleting Items and Flushing our Redis Cache6m 46s
-
2.16Quick Start Apps with Custom Starter Kits6m 28s
-
2.17Easy Imports with NodeJS Subpath Imports8m 40s
-
-
Building Views with EdgeJS
-
3.0EdgeJS Templating Basics8m 49s
-
3.1HTML Attribute and Class Utilities6m 9s
-
3.2Making A Reusable Movie Card Component10m 24s
-
3.3Component Tags, State, and Props4m 53s
-
3.4Use Slots To Make A Button Component6m 56s
-
3.5Extracting A Layout Component5m 13s
-
3.6State vs Share Data Flow2m 59s
-
3.7Share vs Global Data Flow6m 7s
-
3.8Form Basics and CSRF Protection6m 13s
-
3.9HTTP Method Spoofing HTML Forms3m 3s
-
3.10Easy SVG Icons with Edge Iconify7m 57s
-
-
Database and Lucid ORM Basics
-
4.0Configuring Lucid and our Database Connection4m 3s
-
4.1Understanding our Database Schema9m 35s
-
4.2Introducing and Defining Database Migrations18m 35s
-
4.3The Flow of Migrations8m 28s
-
4.4Introducing Lucid Models5m 43s
-
4.5Defining Our Models6m 49s
-
4.6The Basics of CRUD11m 56s
-
4.7Defining Required Data with Seeders11m 11s
-
4.8Stubbing Fake Data with Model Factories13m 48s
-
4.9Querying Our Movies with the Query Builder15m 30s
-
4.10Unmapped and Computed Model Properties3m 24s
-
4.11Altering Tables with Migrations7m 6s
-
4.12Adding A Profile Model, Migration, Factory, and Controller2m 57s
-
4.13SQL Parameters and Injection Protection9m 19s
-
4.14Reusable Query Statements with Model Query Scopes8m 11s
-
4.15Tapping into Model Factory States9m 15s
-
4.16Querying Recently Released and Coming Soon Movies4m 59s
-
4.17Generating A Unique Movie Slug With Model Hooks7m 59s
-
-
Lucid ORM Relationships
-
5.0Defining One to One Relationships Within Lucid Models5m 49s
-
5.1Model Factory Relationships2m 54s
-
5.2Querying Relationships and Eager Vs Lazy Loading5m 17s
-
5.3Cascading and Deleting Model Relationships5m 16s
-
5.4Defining One to Many Relationships with Lucid Models6m 56s
-
5.5Seeding Movies with One to Many Model Factory Relationships5m 24s
-
5.6Listing A Director's Movies with Relationship Existence Queries8m 41s
-
5.7Listing and Counting a Writer's Movies8m 41s
-
5.8Using Eager and Lazy Loading to Load A Movie's Writer and Director5m 18s
-
5.9Defining Many-To-Many Relationships and Pivot Columns9m 48s
-
5.10Many-To-Many Model Factory Relationships4m 50s
-
5.11A Deep Dive Into Relationship CRUD with Models18m 5s
-
5.12How To Create Factory Relationships from a Pool of Data13m 55s
-
5.13How To Query, Sort, and Filter by Pivot Table Data9m 47s
-
-
Working With Forms
-
6.0Accepting Form Data12m 15s
-
6.1Validating Form Data with VineJS9m 29s
-
6.2Displaying Validation Errors and Validating from our Request7m 16s
-
6.3Reusing Old Form Values After A Validation Error2m 3s
-
6.4Creating An EdgeJS Form Input Component5m 28s
-
6.5Creating A Login Form and Validator5m 1s
-
6.6How To Create A Custom VineJS Validation Rule9m 7s
-
-
Authentication & Middleware
-
The Flow of Middleware7m 49s
-
Authenticating A Newly Registered User4m 14s
-
Checking For and Populating an Authenticated User2m 10s
-
Logging Out An Authenticated User2m 24s
-
Logging In An Existing User6m 54s
-
Remembering A User's Authenticated Session6m 55s
-
Protecting Routes with Auth, Guest, and Admin Middleware5m 36s
-
-
Filtering and Paginating Queries
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!