Getting Started With AdonisJS 4.0

[Music] hey guys welcome to a new series on the Adonis J s framework initially this was gonna be an hour-long crash course but I

couldn't get it under an hour so I decided to break it up into a few different videos now I've been asked over and over for a crash course on Adonis but I wanted to wait until

version 4.0 was officially released and it has been and that's what we'll be using version 4.0 so in this series you'll learn what Adonis is what the folder structure looks like how to use

the CLI how to create routes controllers models views form validation and more so we're gonna build a basic blog application the application itself isn't going to be very feature full are very

special it's not about the application though it's about giving you the knowledge to create your own apps so without further ado let's get started with Adonis Jas coding dojo is a

programming school that turns beginners into developers and only 14 weeks over 90% of their grads land jobs within three months of graduating often making over 70 K per year to learn more visit

coding dojo com or click the link in the description below alright so before we get started let's talk about what this technology is what is Adonis j/s so it's a it's a no js' web framework and if you

don't know what nodejs is you're probably new to this channel but it's a JavaScript runtime that can be used to build very powerful asynchronous JavaScript applications on the server so

there's a lot of frameworks that run on top of node the most popular being Express which I use quite a bit and on this channel but you also have happy Jas loopback and a ton of others what makes

a dantas unique is that it has a hard core MVC structure it actually kind of reminds me of laravel laravel Ruby on Rails MVC stands for model view controller and if you've never heard of

that it's a design pattern where it basically breaks certain functionalities up into different sections of the application so for example the controller handles all incoming requests

it's responsible for communicating with the model and loading views the model is where all the database interaction goes or anything to do with the data and then the view is

the user interface it's the part of the application that the user sees in the browser so by default Adonis uses the edge template engine which is really easy to use now of

course you could use Adonis as a peer back-end and just return Jason so that you could use something like react or angular on the front-end now this is a course in the in just a dantas so we're

not going to be using any other framework along with it we're gonna use we're just gonna render our views on the server all right so let's go ahead and get started here now I'm using a tool

called get bash for Windows which is a better command line than just the standard windows CMD if you want to use that if you're on Windows you can go to get - SCM comm and you can download that

if you're on Linux or Mac you can just use your standard terminal alright so first thing we need to do is install the CLI okay just like many frameworks Adonis has its own CLI it's actually

very similar to angular it's even see it even looks the same as far as the name it's at Adonis slash CLI just like at angular slash CLI so let's do NPM install obviously you need nodejs

installed because we're using NPM if you don't have no js' just go to node.js org and download and install it now we want to install this globally so you want to add the - key flag that means that we

can use it from anywhere on our system and that we just want to do at Adonis J s slash CLI alright and that'll install it globally all right so now that's installed let's do Adonis - - help and

this will show us all the commands that are available so the CLI is very powerful it allows us to create things like controllers models views database migrations we have the serve command to

start the HTTP server the new command to create a new application so there's a lot you can do with this CLI all right now what I want to do is generate a new application

so I'm actually gonna go into my projects folder you guys can go can create this wherever you want and we're gonna do Adonis new and I'm gonna call this

Adonis 4-0 blog because we're using version 4.0 and I want to make that clear so let's go ahead and run that and it's gonna create a folder called Adonis 4 before 0 blog and it's gonna add all

the files to it ok it's gonna create the whole the entire folder structure so let's CD into Adonis 4-0 blog and I'm going to open my text editor I'm using Visual Studio code so I'm just gonna do

code dot okay and what you don't have to use Visual Studio code whatever editor you're using just go ahead and open up the folder structure inside of it now if you are using vyas code there's a couple

extensions I would suggest one is Adonis j/s itself just search for Adonis Jas and install it that'll give you certain snippets things like that and then also this edge template support extension

which allows you to have syntax highlighting and stuff like that inside of edge templates because that's the template engine that Adonis uses by default now there's one other thing that

you should do and let's go to preferences settings and if you want to use Emmet with edge okay with edge templates then you want to include this Emmet dot included languages and then

just add edge HTML if you don't do this then M it's not going to work inside of your edge templates alright so now that we've gone over that let's go ahead and take a look at the file structure so in

the root here we have our package dot Jason this is a pretty simple package file we have a couple scripts to start and test now we're going to be using something called node Mon I'm sure many

of you are familiar with it it will constantly watch our application or well it'll monitor it and then it'll update it when we make changes that way we don't have to keep resetting the server

and I don't know about in Linux or Mac but when I just run node server j/s or I run Adonis serve every time I stop the server the port gets stuck and I have to go in and do a

net stat and then at a skill and actually kill the port manually so that's kind of a pain in the ass so we're gonna be using node Mon now down here in the dependencies you can see

that basically Adonis is kind of like angular it's just a bunch of different packages and we have the main framework package here which is version 4.0 0.27 alright and then it's Auto loading the

app folder which I'll talk about a little bit so pretty simple package dot JSON file now we have this ace file here the file itself isn't very important but what aces is it bootstraps all of the of

the CLI commands for our projects okay so it allows us to generate controllers models run migrations things like that you can also create your own commands to file at this file itself isn't very

important for us we're not going to touch it or anything but that's what ace does and then down here we have server j/s which is the bootstrap file for the HTTP server now the dot NV file

E&V file is the environment variables we have the host the port which by default is three three three three we have our environment set to development by default and then down here we have our

database stuff so notice that SQL Lite is the default database we're going to be using MySQL so later on we're going to configure this file to to link to our MySQL database all right so that's the

route now if we look in the app folder actually let's start with the public folder public is where all your static assets go so images CSS files client-side JavaScript files things like

that and then in the app folder this is where our controllers and models go there's not a controllers folder by default but as soon as we generate a controller it'll appear in this folder

alright and notice that we are we have a default model of user and token now we're not going to get into authentication and users in this in this series well at least at the point that

I'm at now I may continue it later basically what I want to do is just get you building a basic crud application and then maybe later on we can either add to

it or we can create a different application all right so let's see we also have the resources folder this is where the views are by default there's a welcome dot edge view this is what we're

gonna see when we start up the server initially just like laravel there's you know the views are in the resources folder there's a lot of similarities to laravel actually now we also have a

Start folder this is where we have our app dot JS file which is where we load any providers that we're using later on we're going to use a validator provider for form validation and we're going to

add that to this file kernel Jas is where all the middleware is registered and then we have our routes JS file which we're going to use quite a bit this is where we create all of our

routes notice by default there's a route for slash which is the home page and it's just rendering the welcome view which we just looked at now usually you're not going to want to just render

a view from the routes file you're gonna want to you're gonna want to map a route to a controller method and then render the view from the controller all right so yeah we'll get to that in a little

bit and then the last folder we have full second to last is the config this just has different different config files so if the main app J s we have authentication cores for cross-site

origins if you want to you if you want to make requests from different domain names database j s different connections SQL Lite SQL postgrads

like I said we're gonna be using MySQL now you don't want to edit this config file you want to edit the dot env file okay you also have a sessions config file so the last one is database and

this just has your migrations notice there's two migrations by default one is going to be the users table and one is going to be the tokens table all right so when we go and we create our posts

migration and run it it's also going to run these two migrations and create these tables as well now if you don't know what migrations are it they're basically files that will

edit our database so in this case it's gonna create a table for us you'll see there's an up and a down method the up is going to create the database the tokens table it's gonna create all of

these fields so basically increments is going to give us an ID field with Auto increment it's going to give us a user ID field a token type is revoked

and then some time stamp fields now this is what will happen when we run the migration but we also have the option to rollback the migration and that's gonna run the down method and what that will

do is just drop the entire tokens table all right so you can always go back if you if you make a mistake or let's say you you need to add another field here you forgot to add a field you could

always rollback and then add it here and then run the migration again and this makes it much easier than having to go into you know PHP myadmin or into the SQL shell and actually

creating all your fields and stuff like that your tables all we have to do is create the database and then we can just run migrations alright so and we don't even have to create these files from

scratch we use the CLI to create the the migration files so let's go ahead and run the server now like I said I'm gonna use something called node Mon so I'm gonna clear this out and we're gonna do

NPM install - B for global and then node 1 alright so now that we have that installed let's go ahead and run node Mon server dot J s alright so now that started the server and you can see it's

on port 3 3 3 3 so I'm going to open up a browser here and we're gonna go to localhost port 3 333 and it gives us this default view right here so this is actually the welcome view that we looked

at let me just where are we so this is if we go to resources views welcome dot edge alright now you saw that little animation at the beginning that actually from the CSS file notice that

all of this is just standard HTML except for this part here this is the syntax we use to include expressions and variables and things like that the double curly brace is similar to angular similar to

underscore and we can call this CSS function put in the file name and it's going to automatically load style dot CSS from our public folder so if we go to public you'll see style dot CSS and

if I go down here you can see the keyframes and that's where that little animation came from all right now what I want to do is create a whole new homepage so I'm gonna go to the routes

file which is in start routes j s and then I'm also gonna open up my terminal inside V s code all right I'm gonna let the server run on this get bash window and then for my CLI commands I'm going

to use the integrated terminal and to open that envious code you can do shift tilde or you can do view integrated terminal all right so what I'm gonna do is generate a new view and to do that we

can say add honest make : view and then let's create a view called home alright and what that did is it created this this file called home dot edge so I'm just going to put an h1 in here now to

use Emmet like I just did you have to add that that option I showed you in the beginning and then let's just say home we'll put a paragraph and we'll just say welcome to the Dantas j/s 4.0 blog so

that's our home let's save it now to map this to our home page we need to go to our routes and notice right here where it says render welcome I'm gonna change this to render home and save ok we'll

reload that and now we have our home page now I want to talk a little bit more about routes before we move further so usually we're gonna do route get or host or put delete whatever type of HTTP

requests that that we want to respond to so let's do route get and let's put in here slash test alright now we can do whatever we want when a route is hit so for instance we can put an arrow

function in here like this and then we can just say hello world so if we save that and we go to slash test and you'll see we get hello world now if you're not comfortable with arrow functions then

you could just go let's do row get and we'll say let's do slash test too and you could just put function and you could return and we'll just say hello there and save and now we can just go to

test two and we get hello there alright so you can use either format now if you want parameters in your URL for instance if we want to go to likes test slash and then three and you want to get that

three then see what I'm gonna do is just copy this and we'll say test slash and then colon ID okay so so we want to take in an ID parameter and then we can access that I'm just going to put a

template string in here which is part of es6 so I'm going to use these back ticks not single quotes and I'm just gonna say this is the ID and then we'll put in our es6 expression or variable syntax which

is a money sign in curly braces and we'll say params dot ID and one thing I forgot is to pass in right here params like that alright so we'll save that and then let's go to test slash 3 and we get

this is the ID 3 if I put in 500 we get this is the ID 500 all right so just to just a little bit of experimentation with routes but this is just for testing I'm gonna comment that out alright so

I'm gonna save this and in the next video what I want to do is create a controller because like I said what we're gonna want to do is map routes to controller methods and then render views

from there instead of just rendering it like this the home page is the only view that I want to render from the actual row alright so in the next video we'll go ahead and create our post controller

coding dojo is a programming school that turns beginners into developers in only 14 weeks if you're serious about landing a career in tech but lack the formal education or background coding dojo will

get you there in no time with over 3,000 graduates to date over 90% of their grads land jobs within three months of graduating often making over 70 K per year at tech firms of all sizes from

companies like Google to local startups to learn more visit coding dojo com or click the link in the description below