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