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
Quick Start Apps with Custom Starter Kits
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.
- Author
- Tom Gobich
- Published
- Feb 06
- Duration
- 6m 28s
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
Transcript
Quick Start Apps with Custom Starter Kits
-
(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.
-
Introduction
-
Fundamentals
-
2.0Routes and How To Create Them5m 23s
-
2.1Rendering a View for a Route6m 29s
-
2.2Linking Between Routes7m 51s
-
2.3Loading A Movie Using Route Parameters9m 17s
-
2.4Validating Route Parameters6m 6s
-
2.5Vite and Our Assets6m 38s
-
2.6Setting Up Tailwind CSS9m 5s
-
2.7Reading and Supporting Markdown Content4m 32s
-
2.8Listing Movies from their Markdown Files8m 51s
-
2.9Extracting Reusable Code with Services7m 4s
-
2.10Cleaning Up Routes with Controllers4m 52s
-
2.11Defining A Structure for our Movie using Models9m 38s
-
2.12Singleton Services and the Idea of Caching6m 11s
-
2.13Environment Variables and their Validation4m 16s
-
2.14Improved Caching with Redis10m 44s
-
2.15Deleting Items and Flushing our Redis Cache6m 46s
-
2.16Quick Start Apps with Custom Starter Kits6m 28s
-
2.17Easy Imports with NodeJS Subpath Imports8m 40s
-
-
Building Views with EdgeJS
-
3.0EdgeJS Templating Basics8m 49s
-
3.1HTML Attribute and Class Utilities6m 9s
-
3.2Making A Reusable Movie Card Component10m 24s
-
3.3Component Tags, State, and Props4m 53s
-
3.4Use Slots To Make A Button Component6m 56s
-
3.5Extracting A Layout Component5m 13s
-
3.6State vs Share Data Flow2m 59s
-
3.7Share vs Global Data Flow6m 7s
-
3.8Form Basics and CSRF Protection6m 13s
-
3.9HTTP Method Spoofing HTML Forms3m 3s
-
3.10Easy SVG Icons with Edge Iconify7m 57s
-
-
Database and Lucid ORM Basics
-
4.0Configuring Lucid and our Database Connection4m 3s
-
4.1Understanding our Database Schema9m 35s
-
4.2Introducing and Defining Database Migrations18m 35s
-
4.3The Flow of Migrations8m 28s
-
4.4Introducing Lucid Models5m 43s
-
4.5Defining Our Models6m 49s
-
4.6The Basics of CRUD11m 56s
-
4.7Defining Required Data with Seeders11m 11s
-
4.8Stubbing Fake Data with Model Factories13m 48s
-
4.9Querying Our Movies with the Query Builder15m 30s
-
4.10Unmapped and Computed Model Properties3m 24s
-
4.11Altering Tables with Migrations7m 6s
-
4.12Adding A Profile Model, Migration, Factory, and Controller2m 57s
-
4.13SQL Parameters and Injection Protection9m 19s
-
4.14Reusable Query Statements with Model Query Scopes8m 11s
-
4.15Tapping into Model Factory States9m 15s
-
4.16Querying Recently Released and Coming Soon Movies4m 59s
-
4.17Generating A Unique Movie Slug With Model Hooks7m 59s
-
-
Lucid ORM Relationships
-
5.0Defining One to One Relationships Within Lucid Models5m 49s
-
5.1Model Factory Relationships2m 54s
-
5.2Querying Relationships and Eager Vs Lazy Loading5m 17s
-
5.3Cascading and Deleting Model Relationships5m 16s
-
5.4Defining One to Many Relationships with Lucid Models6m 56s
-
5.5Seeding Movies with One to Many Model Factory Relationships5m 24s
-
5.6Listing A Director's Movies with Relationship Existence Queries8m 41s
-
5.7Listing and Counting a Writer's Movies8m 41s
-
5.8Using Eager and Lazy Loading to Load A Movie's Writer and Director5m 18s
-
5.9Defining Many-To-Many Relationships and Pivot Columns9m 48s
-
5.10Many-To-Many Model Factory Relationships4m 50s
-
5.11A Deep Dive Into Relationship CRUD with Models18m 5s
-
5.12How To Create Factory Relationships from a Pool of Data13m 55s
-
5.13How To Query, Sort, and Filter by Pivot Table Data9m 47s
-
-
Working With Forms
-
6.0Accepting Form Data12m 15s
-
6.1Validating Form Data with VineJS9m 29s
-
6.2Displaying Validation Errors and Validating from our Request7m 16s
-
6.3Reusing Old Form Values After A Validation Error2m 3s
-
6.4Creating An EdgeJS Form Input Component5m 28s
-
6.5Creating A Login Form and Validator5m 1s
-
6.6How To Create A Custom VineJS Validation Rule9m 7s
-
-
Authentication & Middleware
-
The Flow of Middleware7m 49s
-
Authenticating A Newly Registered User4m 14s
-
Checking For and Populating an Authenticated User2m 10s
-
Logging Out An Authenticated User2m 24s
-
Logging In An Existing User6m 54s
-
Remembering A User's Authenticated Session6m 55s
-
Protecting Routes with Auth, Guest, and Admin Middleware5m 36s
-
-
Filtering and Paginating Queries
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!