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! (2 Comments)
Please sign in or sign up for free to join in on the dicussion.
thomas-de-groof
@tomgobich first, thank you for the well explained, thorough course - learning a lot!
So far all lessons in this course worked exactly like your explanation in the videos.
Unfortunately here I'm facing an error when running the command
npm init adonisjs@latest -- -K="github:adocasts/lets-learn-adonisjs-6"
.Console output: https://www.dropbox.com/scl/fi/7q9rrrymypef26twm2jn3/Screenshot-2024-10-24-at-23.33.30.png?rlkey=1k8h9bxu38ncfd5gofawssmo3&dl=0
Please sign in or sign up for free to reply
thomas-de-groof
Console output of running
npm install
manually: https://www.dropbox.com/scl/fi/7lp0c6mxqffpe5e2i0od5/Screenshot-2024-10-24-at-23.36.38.png?rlkey=v1oyt11enigq57et95lfthaiz&dl=0Bumping the
vine
dependency inpackage.json
seems to solve it:"@vinejs/vine": "^2.1.0"
Please sign in or sign up for free to reply