You can find the documentation for the "Bring Your Own Starter Kit" feature of AdonisJS here:
https://docs.adonisjs.com/guides/installation#bring-your-starter-kit
In this lesson, we'll take a look at AdonisJS' bring your own kit feature that allows us to use Git repositories as starter kits when creating a new AdonisJS application.
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
You can find the documentation for the "Bring Your Own Starter Kit" feature of AdonisJS here:
https://docs.adonisjs.com/guides/installation#bring-your-starter-kit
(upbeat music)
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
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
using any repository that we have out on GitHub,
GitLab, Bitbucket,
and I think there's a couple other
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
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
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,
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.
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.
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
to clone down this particular repository
to start working with it.
However, we can specify the identifier
for the repository itself,
which is atacast/letslearnadonisjs6
directly into the AdonisJS init command.
We could do so by specifying the starter kit
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,
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.
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.
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.
And then we could specify the actual repository identifier,
which for mine is attacast/letslearnadonisjs6.
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
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.
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,
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,
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.
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.
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.
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.
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,
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
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
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.
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
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
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
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,
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.
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,
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
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,
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.
I'm gonna jump into our kit example one.
Let's stop the server.
We could run this same command,
adding in a hash 2.7_setting_tailwind_css.
And if we were to actually run this,
it would clone down the starter kit
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,
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
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.
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
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!