From Beginner to Pro: AdonisJS 5 for Web Development (2023)

Explore routing fundamentals in AdonisJS by defining routes with HTTP methods, mapping the slash and about pages, and using routes.ts to register handlers.

Master http context and route parameters in AdonisJS 5 by destructuring params to access URL data, while exploring request, response, and authentication properties.

Validate route parameters with AdonisJS params matchers and the where method, using regex or built-in matchers, and explore query strings for request data.

learn to group routes with a common prefix using route.group and the prefix method to create api routes such as api/about and api/posts.

Learn to create controllers in AdonisJS to handle HTTP requests, moving away from inline route handlers, using ACE to generate a post controller, and naming controllers by feature.

Map a post route to a controller index method in AdonisJS 5, using the http context and a json response with status 200.

Learn to build dynamic web pages with AdonisJS edge template engine by creating views, passing data, and using conditionals, loops, components, and layouts.

Verify and configure Adonis views, then create and render a post index view via CLI and a controller, demonstrating async/await rendering of HTML.

Install edge template support and a beautify formatter, configure settings.json to format edge templates, and enhance AdonisJS workflow by installing controller and view extensions for quick navigation.

Pass data to AdonisJS 5 views via render with state objects, access values using double curly braces, and implement conditionals (if, else if, else, unless) for post visibility.

Master data rendering in AdonisJS 5 by using Adonis Zeus loops to iterate arrays and objects, pass data to the index view, and render tables with conditional content.

Build and customize a main edge layout with a navbar using Bootstrap, override content sections, and render home, about, and contact pages via routes in AdonisJS 5.

Extract reusable markup into partials, such as a navbar, header, and footer, and include them across AdonisJS 5 layouts. Create a navbar partial in the partials directory and reuse it.

Create reusable components in AdonisJS 5 to replace partials and pass data dynamically in the components directory. Build a button component with an overridable bootstrap class and render it in views.

Explore the basics of working with databases in Adonis, including creating schema, migrations, the query builder, and seeders, plus building a todo app with a MySQL backend.

Download and install zamp, a cross-platform web server bundle with Apache, MariaDB, and PHP and Perl interpreters, to run a local development environment and use phpMyAdmin for database management.

Create and understand a users table migration in AdonisJS, defining id, email, password, first name, last name, and remember me token, and use up and down methods to manage schema.

Add email as a string field, not nullable and unique, and include password, first name, last name, and a nullable remember me token in the migration, then run the migrations.

Explore AdonisJS 5 migration commands, including run, status, rollback, reset, refresh, and fresh, and learn how up and down methods shape table changes.

Learn to read data from the database by creating a get route and querying the users table with the query builder to select all rows.

Learn to implement the create operation in AdonisJS 5 by building a post route and using the insert query builder to add users, with async try-catch error handling.

update a specific user record in AdonisJS 5 using a put route, restructure request data, and apply a where id condition to update first and last name.

Learn to implement delete operation in AdonisJS 5 by creating a delete route for users, using id parameter, and deleting via the database module with try/catch and await.

Learn to seed a database in AdonisJS 5 by creating and running seeders, populating the users table with initial test data using multi insert.

Learn to execute raw SQL with the AdonisJS raw query builder using placeholders, bindings, and dynamic column names, and introduction to ORM with lucid models.

Discover how lucid, the AdonisJS 5 ORM, uses the active record pattern to map models to database tables and enable create queries with readable JavaScript methods.

Define user model columns with the aggregate column decorator, including email, password, first name, last name, remember me token, created at, and updated at, and explore serialize options.

Explore creating a user via a static store user method on the adonisjs 5 user model, using the static create method to insert a record in an asynchronous workflow.

Learn how to securely hash user passwords in AdonisJS 5 by using before save hooks, understanding the dollar dirty property, and integrating the hash driver for safe database storage.

Explore building a full-stack todo application with AdonisJS 5, featuring authentication, signup and login flows, and complete task CRUD (create, read, update, delete) across user-specific views.

Learn to implement authentication and authorization with Adonis and the Bouncer package, validate forms, and model a one-to-many relation between users and tasks, using routes, middlewares, and flash sessions.

Install bootstrap via npm for the AdonisJS project, override primary, secondary, and danger colors by adding constants.css and app.css, then import them with bootstrap.

Create a reusable layout in AdonisJS 5 by adding layouts/main.h, applying it with a layout tag across pages, override the title with set, and inject content into a content section.

Learn to extract the navbar into a partial, import bootstrap js to enable toggling, and include the partial in the main layout for reuse across pages.

Register a get signup route in AdonisJS 5, render the signup view via an auth controller, create the signup view, and use route helpers or named aliases to navigate.

Add signup page markup using bootstrap to mirror production, including first name, last name, email, and password fields with sign up and login buttons, and set up a responsive layout.

Create a post route for the sign up form and validate its input with AdonisJS, using a post schema for first name, last name, email, and password.

Learn to define custom error messages in AdonisJS 5 validation, set field-specific rules for first name, last name, email, and password, and display them with UI feedback.

Implement user creation in AdonisJS 5 by validating signup data, preventing duplicate emails, storing new users via the user model, and displaying flash and toast messages for success or errors.

Add bootstrap toast messages by creating a partial, including it in the main view, wiring a toast instance in app.js, and rendering session flash messages as toasts.

Learn to render success and error toasts by flashing session data in the signup flow, destructuring the session, and redirecting on success to the slash url, or back on error.

Register a get /login route that renders the login page via auth controller login with the view auth/login and layouts/main, and wire the navbar link with the route helper.

Register a login post route and implement form validation for email and password in AdonisJS 5, using a schema and custom messages to ensure valid input before login.

Explore AdonisJS 5 authentication with web sessions, API tokens, and basic auth, including cookies and token persistence, when to use each guard, and social OAuth authentication.

Install the Adonis auth package using Lucid for user data, set up providers and web card, and implement login with the auth attempt method.

Understand how AdonisJS auth middleware protects private routes by validating authentication and redirecting unauthenticated users to login, while silent auth middleware offers optional checks and auth state in templates.

Apply silent auth middleware in AdonisJS 5 by configuring it as a global middleware in kernel.ts, enabling auth.user to reflect the currently logged-in user for use in the UI.

Get logout route connected to the auth controller logout, invoking auth.logout() and redirecting to the login route; update the navbar to use the route helper for logout.

Consolidate get and post into a single route using Route.route with a common pattern and a signup alias sign, and handle both methods in one auth controller method.

Implement full task CRUD in an AdonisJS 5 app, enabling show, edit, delete, and create for a logged-in user, and explain the one-to-many relationship between user and task.

Explain the entity design: the user table with its primary key and the task table with title, description, priority enum (default important), and a not nullable user_id foreign key.

Create a task model and migration in AdonisJS 5 with make:model -m, define id, title, description, priority, and user_id key with cascade, plus model-level relations.

Define a hasmany relationship on the user model with the hasmany decorator, using user_id as the foreign key and id as the local key.

Learn to implement full crud for tasks in AdonisJS 5 by using resourceful routes and a task controller, including index and create views and route setup.

Define a resourceful route for task index, add a route handler and index view, render via layout, and use the task index route alias for navigation.

Register the create route handler in AdonisJS 5, render the task create page, and build the form with title, description, and priority, using flash messages and validation helpers.

Add a post route for creating tasks, implement the store method in the task controller, and build a class-based validator for title, description, and priority.

Implement the AdonisJS 5 store route by adding a static store task method on the task model to save a new task with title, description, priority, and user id.

fetch all tasks for the currently logged-in user using AdonisJS 5's has many relationship and preload, via a get all task by user ID method in the task index.

Shows updating the task index page by fetching tasks for the current user and rendering them with Bootstrap cards, badges, and action buttons, including description slicing and priority styling.

Create and wire a show route handler in AdonisJS 5 to fetch a task by id, render its show view, and link from the index page.

Update the tasks show view markup with a bootstrap breadcrumb and responsive card layout, render title, description, and priority, and demonstrate component reuse and route linking in AdonisJS 5.

Create the edit task route in AdonisJS 5, fetch the task by id, and render a prefilled update form (title, description, priority) in a new edit view reachable at /task/:id/edit.

Learn to implement the edit task form in AdonisJS by reusing create task markup, passing default values for title, description, and priority, and rendering the selected dropdown.

Add a task update route with an id param, bind the update task validator to validate the request body, and enable method spoofing for put requests through the task.update route.

Introduce a static update task method in the task model for AdonisJS 5, with optional title, description, and priority, fetch by id, save, and redirect to the show page.

Learn to add a delete task route in AdonisJS 5, including a destroy handler, route wiring, form spoofing, and a confirmation prompt to delete tasks.

Configure and apply the auth middleware to protect routes using the web guard, register it as a named middleware, and redirect unauthenticated users to the login page at /.

Implement and understand authorization with the AdonisJS bouncer package, using actions to restrict anonymous users from unauthorized resources and learn how it differs from middleware.

Install and configure the bouncer package in AdonisJS 5, define actions or policies to enforce task ownership, and authorize show, edit, update, and destroy routes with csrf protection.

Learn how to enable csrf protection in AdonisJS 5, generate and verify per request tokens, and secure login and form submissions with a hidden csrf input and shield middleware.

Build a Pinterest-like web app Paris with AdonisJS 5, covering image uploads, post creation with title, description and tags, user profiles, social login, and AWS S3 storage.

Outline: implement authentication and authorization with form validation, cover user-to-task one-to-many, user-to-profile one-to-one, and post-to-tag many-to-many relations, plus social auth, transactions, and drive uploads to AWS S3 or cloud storage.

Clone the Adonis bootstrap five boilerplate, install dependencies with npm install or yarn, create a dot env from the env example, and run the server to verify bootstrap font.

Create a reusable layout and a navbar partial in AdonisJS 5, override content via sections, and integrate login and signup links for both development and production builds.

Add a get signup route in AdonisJS 5, create an auth controller, render the signup view, and update the navbar to use route helpers for navigation.

Create a responsive signup form using Bootstrap grid and floating labels, including first name, last name, email, and password fields with signup and login buttons, enhanced with Font Awesome icons.

Add a post sign up route and form validation in AdonisJS 5, linking get and post requests to the sign up page, validating first name, last name, email, and password.

Implement front-end signup form error rendering in AdonisJS 5 by using route helpers and flask messages to show per-field validation errors and highlight invalid inputs.

Explore the users and profiles tables, review their fields and data types, and understand one-to-one, one-to-many, and many-to-many relationships in an AdonisJS 5 project.

Create a user migration and model in AdonisJS by using node ace make model with -m to generate migration, configure lucid, and add email, password, and remember_me_token fields.

Create the profile migration and model in AdonisJS 5, define first name, last name, storage prefix, url, and social auth, and add a user_id foreign key with on delete cascade.

Define has one and belongs to relationships on user and profile models in AdonisJS 5 to preload related data, using local keys and foreign keys, and prepare for transactional queries.

Learn how transactions ensure atomicity in multi-step SQL operations by wrapping user and profile inserts in a single unit, rolling back on failure and committing on success.

Implement transactional user creation in AdonisJS 5 by building a signup post route handler, performing a unique email check, and inserting user and profile records within a transaction.

Implement a public static update or create profile method in the profile model for AdonisJS 5, using a data payload and a transaction to safely create a user and profile.

Add bootstrap toast messages for signup feedback by passing a success key through the Flask session, wiring window.toast in app.js, and rendering the toast via a layout partial.

Register the login route and build a login view, enabling get and post login requests through an auth controller, with email, password fields and login with Google, GitHub, or Facebook.

Add form validation for login post requests using a schema for email and password, configure AdonisJS auth with the web guard, perform login, flash messages, and redirect home on success.

Update the navbar to reflect auth state using the auth property and silent auth middleware, showing login/signup for guests and a create link with a user dropdown for logged-in users.

Implement a GET logout route handler in AdonisJS 5, registering the route, adding the auth controller method with web guard, session flashes, and redirecting to the home page or login.

Explore how AdonisJS enables social authentication via OAuth, letting users log in with Google, GitHub, or Facebook. Grasp the authorization flow and access tokens used to fetch profile data.

Set up Google OAuth for your app by creating a Google Cloud project, configuring the consent screen, generating OAuth client IDs with email and profile scopes, and adding redirect URLs.

Configure the AdonisJS social authentication package, install and enable google oauth, set up redirect and callback routes, and update env vars with google client id and secret for seamless login.

Create or find a Google OAuth user in AdonisJS 5 from the callback data, and persist a linked profile in a database transaction.

Implement OAuth google callback in AdonisJS 5, create and link user profile with transaction support, auto login, and redirect to a welcome page.

Create GitHub oauth credentials, register the app, and configure the client id and secret in your env; add GitHub routes, redirect, and callback handlers, and test the consent flow.

Create a GitHub OAuth callback that derives first and last names from the user name, then logs in the user. Explain handling existing emails across providers.

Learn to create and register a guest middleware in AdonisJS 5 that blocks logged-in users from accessing login, signup, or OAuth pages and redirects them to the home page.

Explore user authentication, OAuth providers, profile overview, and editing capabilities in AdonisJS 5, including updating names, password, profile image uploaded to AWS S3, and sharing profile links.

Register profile resourceful routes in AdonisJS 5, create the profiles controller, implement show, edit, and update actions, and render the profile show page with the main layout.

Add a static get profile by id method to fetch a profile by id and preload its user, then return it to the profiles show route.

Add markup for the profile show view in AdonisJS 5, including breadcrumb, social-auth image handling, full name and email, and share and edit buttons with a copy-to-clipboard modal.

Add a route handler to render the edit profile page in AdonisJS 5, fetch the profile by id, and pass it as state to the edit view.

Update the edit view with a profile image preview and editable form, using a file input, JavaScript file reader, breadcrumb navigation, and route helpers for home and profile pages.

Add form validation for the edit profile page with a profile update validator for optional fields and demonstrate method spoofing to submit a put request on the update route.

Explore how AdonisJS 5's drive package uploads, reads, deletes, and moves media to cloud storage like aws s3, gcs, and digitalocean spaces, with local development and production switching.

AdonisJS 5 for web development teaches adding business logic to update profile data, including validating the form body and using find or fail to ensure the profile exists.

Implement profile update logic with a database transaction, handle image upload (move to disk) and old image deletion, and manage success or error redirects with flash messages.

Update full name by combining first and last names, and show the uploaded image by reading storage prefix, converting buffer to base64, and displaying it in the profile view.

Fix profile image rendering in the AdonisJS 5 workflow by passing base64 image data as state to the edit view. Remove the default password value to ensure proper password handling.

Sign up, log in, and use social authentication to manage profiles and posts, share profile links, edit or delete posts, and search by title or description.

Create post, tag, and tag_post tables in AdonisJS 5, define fields and foreign keys, and set up a many-to-many relationship for migrations and models.

Create a post model with its migration using AdonisJS 5 commands, define fields (title, description, user_id, storage_prefix), and establish user-post relationships (hasMany and belongsTo).

Create a tag model and its migration in AdonisJS 5, defining a title field as a string of length 50, not nullable and unique.

Create the tag_post pivot table and model with migrations in AdonisJS 5, defining post_id and tag_id with cascade delete and configuring many-to-many and belongs to relationships.

Add a resourceful route for posts in routes.ts, generate a post controller, and implement the post index view to show posts with the post index route alias.

Add a route handler for the post create page and build its view in AdonisJS 5, ensuring the create link maps to post.create and opens the post create page.

Add the markup for the create post page with Bootstrap breadcrumbs, image preview, a two-column responsive layout, and a form for title, description, and image input.

Learn how to build a custom post tag component in an AdonisJS 5 web project, including a tag input, dynamic display, removal, and submitting tags as an array.

Create a tag input component and markup for a post. Validate tags with regex, manage a tags array, and render them in a tag container.

Create and render post tags by building a dynamic tag interface with Bootstrap badges, manage tag indices, and attach click handlers to remove tags for form submission.

Build a class based validator for a post request in AdonisJS 5, defining rules for title, description, post image, and tags with required, max length, size, and alpha constraints.

Create a post store route handler and validate the form body using the post create validator with request.validate, referencing the post.dot.store alias, and handle multipart image uploads.

Learn how to store a post in AdonisJS 5 by implementing migrations, image handling, and transactional creation of posts with tags and attachments.

Import the post model, store a post with description, tags, and user id inside a transaction, then upload the image with move to disk and commit or rollback, using attach.

Learn to implement a responsive masonry layout for a post grid using bootstrap masonry, with download, CDN, or package manager options and data masonry attributes.

Update post index page to show all posts for a logged-in user using find post by user ID, preload posts, and read cloud images as base64 via S3 read service.

Learn to render a created post on the index page and add a show page route in AdonisJS 5, including route helpers, base64 image data, and show view.

Add a get post by ID method on the post model. Fetch details with a query builder and preload the user and profile.

Implement the find related post method to fetch posts sharing tags with a given post, excluding itself, preload posts, and read images via the S3 service.

Update the post show view to a two column layout with image and details, render tags and actions, and link the creator to their profile via a named route.

Add and render the related posts section with bootstrap styling and icons, wire the post creation route, and handle no related posts gracefully.

Add the edit route and handler, render the edit view with the main layout, pass the post id, and link to the named route post.edit.

Add edit view markup for posts, including image preview, title, description, and tags; fetch post by id and update post data on submit.

Prefill an edit view in an AdonisJS 5 app using flash messages to provide default title, description, and tags, then use JavaScript to display and submit updates.

Create the update route handler in AdonisJS 5, then generate and configure a post update validator to validate optional title, description, image, and tags with specified rules and messages.

Update post data after validating the post exists, handle image upload to the logged-in user's directory, manage tags through store tag and sync, all within a transaction.

Update route part-2 guides uploading post images to cloud providers, replacing the old image, and managing a transaction with commit and rollback while syncing post tags in AdonisJS 5.

Add a post delete route and destroy handler with existence checks, database and cloud image deletion, and a transaction to roll back on failure.

Add a post download route in AdonisJS 5 to stream and download a post image, configure headers like content-length and content-disposition, and map the route using a download controller.

Add a search feature in an AdonisJS 5 app by wiring the form to the home route, querying posts by title or description, and preserving input via URL params.

Learn to secure an AdonisJS 5 app by applying auth middleware to protect profile and post routes, show edit options for owners, and use bouncer for authorization.

Configure the auth middleware, set the unauthorized redirect to the login page, and apply the named middleware to protect logout and profile edit/update routes while keeping show public.

Learn to implement AdonisJS 5 bouncer for owner-based authorization, protecting post edit and delete actions with policies and proper auth middleware configuration.

Demonstrate AdonisJS 5 profile policy using bouncer to restrict unauthorized edits, guard update routes, and conditionally show the edit button for the profile owner.

Learn to enforce post-level permissions with AdonisJS 5 by creating a post policy, registering it in bouncer, and restricting update and delete access to the post’s owner.

Learn to replace base64 image buffers with image URLs, using get url and get signed url for public and private cloud objects in AdonisJS 5.

Add masonry layout support to your AdonisJS course using Bootstrap, configure grid and grid-sizer, and ensure images load with a CDN so layout updates after images render across responsive breakpoints.

Update the profile show view to display the user's posts with a reusable post list component, preload posts, and load post images via urls.

Explore API development to connect the Todo Hut app with mobile and external services using AdonisJS 5, enabling seamless data exchange and interapplication communication.

Set up the todo app for API development and design RESTful APIs with clean endpoints. Implement authentication, data serialization with JSON, API testing, and thorough API documentation.

Set up the AdonisJS project by switching to yarn, installing dependencies, removing node_modules, and running the dev server, while noting Redis requirements and cross-platform considerations for Windows, Linux, and macOS.

Download and configure Postman, the API inspector, to communicate with your API and test its responses as you prepare for hands-on coding in upcoming lectures.

Define api routes in a new api/routes.ts and group them with the api prefix. Create signup, login, user, logout, and task resource routes with api-only controllers.

Convert signup validation into a class-based validator for reuse across web and API requests. Apply API namespace and use request.validate to enforce first name, last name, email, and password rules.

Create an AdonisJS 5 signup route handler, validate the signup payload with class-based validation, store the user, and respond with API-friendly 200 ok or 400 bad request.

test signup route with postman, set up a collection and sign up request, fix csrf issues, and enable json error responses via content negotiation.

Implement a class-based login validator in AdonisJS 5, integrate it with web and API login routes, and test with Postman using collection variables and global header presets.

Understand how login differs for web browsers and mobile apps, using cookie-based authentication for web clients and token-based authentication for mobile devices, using app_user_agent header with header_key and client_agent constants.

Differentiate web and mobile login by reading a client header and routing to the appropriate guard. Authenticate with web guard or api guard and return a token for api logins.

Test the login API with postman, validate the form body and the app dash user dash agent header, and observe cookies indicating web login, invalid user agent, and unprocessable entity.

Install Redis on Ubuntu and configure the Adonis Redis provider, updating env settings to enable API authentication and manage login state with token-based authentication for web and mobile.

Create and test a route handler that returns the currently logged in user from the auth context, using an arrow function and cookies to manage authentication.

Implement an api auth middleware in AdonisJS 5, configure the kernel, and protect routes with web and api guards, returning json unauthenticated responses.

Learn to create a logout route handler in AdonisJS 5 that supports web and mobile guards, handles http context, and uses redis for session state.

Implement the task index route in AdonisJS 5 by converting the web task controller to api style, returning JSON responses, handling errors, and testing authentication with postman.

Implement a store route handler in AdonisJS 5 to create tasks, validate fields, return a success message, and test API responses with proper headers for web and API routes.

Implement the update task route in adonisjs 5, returning json responses, validating inputs with min length rules, and addressing empty string handling as you update title and priority.

Implement the destroy route handler in the api task controller and update the success and error responses. Test deletion via a delete request in Postman and verify a 200 status.

Discover what CORS is and why enabling it matters for cross-domain requests in AdonisJS. Configure origins, including wildcard, allowed methods, and cookie settings to permit secure cross-origin access during development.

Update the cookies configuration in session.ts to enable cross-origin API access by setting HttpOnly to true, SameSite to none, and secure to true, ensuring cookies travel with cross-origin requests.

Explore testing with a React client application that interacts with the Adonis todo API, featuring login and a CRUD flow (create, show, edit, delete) with Redux Toolkit and Material UI.

Celebrate completing the AdonisJS course and explore career opportunities as an Adonis developer. Stay updated with trends, contribute to the Adonis community, and keep learning to lead in web development.