🔥 AdonisJS From Scracth Early Access is Now Open!

Creating a new AdonisJS application

In this lesson, we create our first AdonisJS application. We also cover starter kits and the available options.

Transcript

With our development environment all set up, let's now create our first adonis JS application. We can do that using the npm init command that is npm init. Then the name of the package we want to initialize which is adonisjs. We want the latest version of this package so we use at latest. Then the name we want for the application we are building which I will call lean.

Of course, you can name this whatever you like. This will download the create adonis. Js initializer package and begin the installation process. First off, we are prompted to select the starter kit we want to use. Starter kits serve as a starting point for creating applications using the Adonis JS.

They come with the default Adonis JS folder structure. We configured the Adonis JS packages and the necessary tooling you need during development. By default, we have 4 options we can choose from. We can either choose the slim starter kit which is a lean adonis gs application with just the framework core. You will want to use this option if you want something minimal and not the old batteries adonis gs comes with.

Then we have the web starter kit which contains everything you need to build a server rendered application. In addition to the framework core, this contains everything you need to build a server rendered application such as edge for templating engine, vine for validation, lucid ORM authentication, shield for things like cross site request forgery, a static middleware to serve assets from the public directory, and vits for compiling front end assets. Then we have the API starter kit which is a trimmed down version of the web starter kit and it is tailored for creating JSON APIs. Then lastly, we have the inertia startup kit which uses inertia to build server driven single page applications paired with adonis JS and a front end framework. So if you are into inertia and you want to use it in adonis JS, you can select the inertia starter kit.

In this course, we'll be building a server rendered application. And as such, I'm going to select the web starter kit, then I'll press enter. Next, we are prompted to select the authentication guard we want to use. By default, I don't need JS provides 3 authentication options. The first one is using the session guard, which authenticates users using cookies and session.

Then we have access token which authenticates clients using API tokens. Then lastly, we have basic auth which authenticates users using HTTP basic auth. So we can choose to select any of these or we can skip it and configure it later on. Since we are building a server rendered application, the session auth makes sense for what we are building. So select session as the authentication guide we want to use.

Again, I'm going to press enter. Now we are prompted to select the database driver we want to use. Like I said in previous lessons, we will be using MySQL in this course so I'm going to select MySQL. But if you are using a different database, you can select the corresponding driver for the database you are using. This will download the starter kit we selected which is the web starter kit then it will install the necessary dependencies and also configure the necessary packages which in this case is Lucid and auth.

Our first add ons. Js application has been successfully created. So now we can see the Intuit. And just to confirm that the application was indeed created successfully, I'm going to start the application using npm run dev. Then I'll open this in my browser.

And here, we have the application, and we are presented with the default adonis gs welcome page. And the application was indeed created successfully as we are presented with the default adonis gs welcome page. To wrap up this lesson, let's open the project in Versus code. I'm going to stop the server. Then I'll open it up in Versus code using code then dot which means to open the old project inside Versus code.