00:00
(upbeat music)
00:02
All right, so this is a good point to stop
00:07
and take a brief aside.
00:09
So let's talk about starter kits.
00:11
Yes, those things that we selected from
00:12
whenever we first created our project.
00:14
We had the slim, web and API options to select from.
00:17
However, we can actually bring our own
00:20
whenever we create a new project
00:21
using any repository that we have out on GitHub,
00:25
GitLab, Bitbucket,
00:27
and I think there's a couple other
00:29
Git repository based solutions that it supports.
00:32
So for this, we'll want to dive into our terminal.
00:34
To keep things separated,
00:35
I'm going to be working within our code directory
00:38
inside of a separate directory called kits.
00:40
If we take a look at what I have within here so far,
00:43
there's absolutely nothing.
00:44
So it's an empty directory.
00:45
Let's get our init command backup
00:48
to create a new AdonisJS project.
00:49
So that's npm init adonisjs@latest.
00:53
And let's stop right here.
00:54
Instead of providing in a name for our project,
00:57
we can instead specify a kit,
01:00
which is essentially a GitHub repository.
01:02
So let's open up our browser and let's head into GitHub.
01:05
So specifically, let's head into the Atacast GitHub.
01:07
So github.com/atacasts.
01:10
And I have the code that we've been working with so far
01:12
within a repository at let's learn AdonisJS 6.
01:16
So let's head into here.
01:17
Traditionally within GitHub,
01:19
you'd be able to go into the code
01:20
and you can either download it as a zip
01:22
or you can copy the HTTPS, SSH, or GitHub CLI commands
01:25
to clone down this particular repository
01:28
to start working with it.
01:29
However, we can specify the identifier
01:31
for the repository itself,
01:33
which is atacast/letslearnadonisjs6
01:36
directly into the AdonisJS init command.
01:39
We could do so by specifying the starter kit
01:41
that we wanna use by doing hyphen hyphen,
01:43
which will allow us to reach down the level
01:45
to the underlying command
01:46
to provide additional arguments to it.
01:48
And I wanna provide hyphen K,
01:50
which we'll use to specify the particular starter kit
01:53
that we wanna actually use
01:54
to initiate our AdonisJS project.
01:56
For this value, I wanna do equals
01:58
and then put the actual value within strings.
02:00
The first portion of this value should be the Git provider
02:03
that we have our repository hosted on.
02:05
So that's gonna be GitHub, GitLab, Bitbucket, so on.
02:09
So I have my code out on GitHub,
02:10
so I'm gonna type in GitHub here.
02:12
We'll separate the provider from the actual repository
02:14
that we wanna specify using a colon.
02:16
And then we could specify the actual repository identifier,
02:19
which for mine is attacast/letslearnadonisjs6.
02:24
If we go ahead and hit Enter here,
02:27
it's gonna ask us where it should place our project.
02:29
And I'm gonna call this kit example
02:31
so that we can easily differentiate it
02:33
from our actual letslearnadonisjs6 code base.
02:35
I'll hit Enter here.
02:36
It's gonna ask us if we want to install our dependencies.
02:39
By default, it will use npm.
02:41
We can hit yes for that.
02:42
And it's gonna download our starter kit
02:43
from our actual GitHub repository as our starting point,
02:46
install the packages, which it's doing right now.
02:48
And there we go.
02:49
I completed successfully,
02:50
and you'll note that the steps are relatively similar
02:52
to starting with your traditional AdonisJS starter point.
02:55
So now we're ready to go ahead and CD into our kit example,
02:58
and we get started up by running npm run dev.
03:01
Now, I do wanna note that I don't have
03:02
our Let's Learn server up and running,
03:03
so 3333 for the port is open and available,
03:06
so this code base will use that.
03:08
Let's go ahead and open this up in our browser.
03:09
So let's Command + click on that,
03:11
and it will open it up, and voila,
03:12
it looks the exact same
03:13
as our letslearnadonisjs code base.
03:15
In fact, let's open our terminal back up.
03:17
Let's open up a new tab by doing Command + T,
03:19
and then I'm gonna go CD into our letslearn code base.
03:22
So CD, go back two directories,
03:24
and it should be letslearnadonisjs 6.
03:26
We can npm run dev here.
03:28
Since 3333 is already taken for the port,
03:30
this will go to a random port.
03:32
We can Command + click on this, it will open it up,
03:34
and there we go.
03:35
So we have two different servers running
03:37
with the exact same code base, pretty much.
03:39
We can dive into our movies for each one,
03:41
and they'll look the exact same.
03:42
Additionally, if we hide our browser away,
03:44
let's open up our text editor.
03:46
So here's our letslearnadonisjs 6 code base.
03:48
I'm gonna go ahead and bring a new window in
03:50
for Visual Studio Code.
03:51
We'll just kind of put this off to the side a little bit
03:54
so that we can see both of the file structures.
03:56
And I'm gonna hit Open.
03:57
Let's go into Code, Kits,
03:59
and let's open up our kit example.
04:00
Squish this down just a little bit more
04:02
so that we can actually see a bit of the code.
04:04
Take this in a little bit.
04:05
Okay, so within here, on the backdrop,
04:07
we're looking at our routed.
04:08
So let's go ahead and open up our start routes
04:11
within our kit example.
04:12
And you'll see it's using the exact same code here
04:15
as what we have in our letslearnadonisjs 6 series.
04:17
And that's because our letslearnadonisjs 6 repository
04:20
was actually used as the starting point
04:22
for a brand new kit example application,
04:24
meaning the two code bases are a one-for-one match.
04:27
They use the exact same code
04:29
despite being two completely different projects.
04:31
Now, there's several different reasons
04:32
that you can make use of these
04:34
bring-your-own-starter-kits for.
04:35
First, if we open up our browser again,
04:37
let's head back into our GitHub tab
04:38
for our letslearnadonisjs 6 repository.
04:41
I've been making a commit for most of the different lessons
04:43
that we have that have actual code changes within it.
04:45
As you can see, we have 2.15,
04:47
all the way to 2.4, 2.14, so on and so forth.
04:51
Additionally, I've been putting those lessons
04:52
in a separate branch.
04:53
So we have 2.4, 2.7, 10, 13, 14, and 15.
04:56
So as we continue along with the series,
04:58
you can use the starter kit to jump into the series
05:00
at any point in time,
05:02
because, let me go to this empty tab that's not working,
05:05
let's head to docs.adonisjs.com,
05:07
head into the installation step,
05:08
and let's go to the bring-your-own-starter-kit section.
05:10
If we scroll down a little bit,
05:12
note that you can use private repositories
05:14
using this custom starter kit as well.
05:16
And you can also specify a particular branch
05:18
or commit that you wanna specify too.
05:20
Meaning that you could do a hash,
05:22
whatever the branch name is,
05:23
to clone at a particular branch point in time
05:26
for your AdonisJS application starter point.
05:29
So if you wanted to start at lesson 2.7,
05:31
you could jump into your terminal.
05:33
I'm gonna jump into our kit example one.
05:35
Let's stop the server.
05:36
We could run this same command,
05:38
adding in a hash 2.7_setting_tailwind_css.
05:43
And if we were to actually run this,
05:45
it would clone down the starter kit
05:46
at that particular 2.7 point in time.
05:49
And this can get pretty cool as well.
05:50
So as we continue along with the series
05:52
and we learn about authentication, forms, file uploads,
05:55
all of that fun stuff,
05:56
you can create your own repository starter point
05:59
for all of your AdonisJS applications
06:02
and create them from that starter point
06:03
so that you don't have to rewrite the bootstrapping code
06:05
for that application over and over again,
06:07
assuming that they're gonna be set up relatively the same.
06:10
So this feature can be used
06:12
to streamline your application process with AdonisJS.
06:15
And as people find out about it and make use of it,
06:17
I'm sure some community templates will come out
06:19
and come into play as well in the future.
06:21
Okay, so that ends our aside.
06:23
We're gonna go back to our Let's Learn AdonisJS 6 code
06:25
based on the next lesson and move onward from there.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!