Playing Next Lesson In
seconds

Transcript

  1. - So now that we have everything installed on our system that we're gonna need throughout this series, we're ready to go ahead and create our first AdonisJS 6 project.

  2. So in order to do this, we're gonna need to jump into our terminal. So let's go ahead and open that up. Now for all of my code-based projects, I like to put them all inside of a folder called code.

  3. So I'm gonna CD into that folder. If you have a place that you like to put your code on your computer, go ahead and head into that directory now. If you don't, maybe consider creating a folder called code.

  4. You can create a folder by doing make dir or mkdir, and then provide in the folder names. So it'd be something like code. And then after you run that command,

  5. you could then CD into code to jump into that folder like we are right here. I'm already within a folder called code. So I'm going to bypass running that command there.

  6. And I'm gonna clear my terminal out. So now let's actually create our project. So we're gonna need to run a command against NPM. So we'll do NPM init, and the command's called AdonisJS.

  7. And then we'll wanna target the latest version of that. And this command is gonna walk us through the process of actually creating our AdonisJS project. But before we actually run this command, we're gonna wanna provide it a project name.

  8. I'm gonna call mine let's learn AdonisJS 6. Now we're ready to go ahead and hit enter to run it. It's gonna ask us which starter kit we would like to use. And it has three options.

  9. We have the slim starter kit, the web starter kit, and the API starter kit. Now back in our first lesson, we talked about batteries that AdonisJS can come with.

  10. These starter kits determine how many batteries we get included and what type of batteries we get included for the particular purpose that we select.

  11. For example, if we were to select the slim starter kit, it would come with the bare bone number of batteries that we would need to actually get our server up and running. We could always add additional batteries on top of it

  12. once we start with that slim starter kit, but it's gonna be the leanest option that we have to get started with AdonisJS. The web starter kit is gonna include everything that we need to start up a web server.

  13. This is gonna include things like session support, the edge template engine, and so on and so forth. And then the API starter kit's gonna contain things you need to create an API, where you have your client side application

  14. or what's running the browser completely separated from your AdonisJS project. So depending on what you need for your particular project, you'll want to select the appropriate starter kit for that.

  15. For us, that's gonna be the web starter kit. So let's go ahead and select the web starter kit here. It's gonna ask us whether or not we want to install our dependencies. It's gonna use npm to do so. Whenever you installed Node.js,

  16. npm installed alongside of that. The two go hand in hand with one another. So we're A-okay to go ahead and have it install our dependencies for us. These dependencies are gonna be all of the different

  17. packages from AdonisJS and other package creators to actually run our underlying server. So these are things AdonisJS created themselves,

  18. as well as packages that they rely on to get to the underlying Adonis server. So let's go ahead and install those. So it's gonna install those packages like it's doing right now.

  19. And it's gonna prepare our application, which it already has done. And now it's configuring AdonisJS Lucid, and now it's done. So let's go ahead and scroll back up a little bit and finish running through what exactly it did.

  20. So first it downloaded the web starter kit from their GitHub repository. The starter kit is essentially all of the code that we're gonna start with whenever we actually dive into our code base.

  21. So if we were to compare our starter code with the web starter kit that they have on their repository, it would be a match. Then it's gonna install the packages specifically for that web starter kit,

  22. since we told it to right up here. Then it's gonna start preparing our application and to do so it's going to install and configure Lucid. By default, it's going to have it set to the SQLite database.

  23. Now, as we covered in our last lesson, we're gonna be using Postgres as our database driver. However, whatever database driver you use doesn't really matter too much because Lucid is going to abstract that away for the most part.

  24. So if you already have SQLite installed or if you have MySQL or MSSQL, that's a-okay. You can go ahead and use those drivers. Whenever we install our Postgres driver for Lucid,

  25. just go ahead and select the driver that you need. If you're using SQLite, then you're already set. And if none of that made sense, don't worry, we're gonna walk through it. And then lastly, it's gonna configure authentication

  26. and it's gonna specifically do so with the session guard. The session guard essentially is just going to use browser sessions in order to maintain the statefulness of our authentication.

  27. Cool. So all of those different actions get us down to our starting AdonisJS project. So we can go ahead and CD into our project now by running CD.

  28. Let's learn AdonisJS 6. We can run npm run dev to actually boot the server up. So let's do npm run dev. And there we go.

  29. So now our server address is ready at 127.0.0.1 colon 3333. The HTTP 127.0.0.1 is our host name.

  30. And then the colon separates our host name from the port. 3333 is then our port. The 127.0.0.1 specifies that the server's running on our machine.

  31. And then the port is kind of like the street address. It's the specific address on our machine that the server's running. So if we go ahead and open this particular address

  32. up in our browser, we can command or control click directly on this and it will open it up within our browser just like so, and we'll see it works.

  33. Now in other places, you may also see 127.0.0.1 replaced with localhost. Localhost is just a human friendly string

  34. that means 127.0.0.1. So they are interchangeable. So if we go ahead and hit enter here, you see we get the exact same thing. Cool, so let's go ahead and hide our browser away here for a second.

  35. And let's finish walking through what this command states. So you'll see it also mentions that the file system watcher is enabled. Essentially the AdonisJS server has started in development mode.

  36. And since it knows that it's in development mode, it knows that we're gonna make frequent changes to it. To help us out with that, it's going to watch our file system for those changes.

  37. And whenever it recognizes any of those changes, it will automatically apply it to our running server so that we can just see it immediately within our browser, which is pretty nice and convenient.

  38. All right, so now let's go ahead and open up our project within our text editor. So here's Visual Studio Code. We can go ahead and hit open here. Let's head into the directory that we installed our application within.

  39. So mine's within code. I'm gonna wanna scroll down a little bit to the Let's Learn AdonisJS 6. Just select the folder right here and then hit open. That's gonna open up all of the files and folders

  40. that we have within that folder that make up our project.

Creating A New AdonisJS 6 Project

@tomgobich
Published by
@tomgobich
In This Lesson

We'll create our first AdonisJS 6 project and learn how we can boot it up and open it within VS Code.

Join the Discussion 17 comments

Create a free account to join in on the discussion
  1. I am new to adonis, I think we need to pay attention more to this than just the hyped who look for stability. Thankyou so much for the great work by making this tutorials.

    1
    1. Responding to fadli-hidayatullah
      @tomgobich

      Thank you for watching, Fadli! I hope you find as much enjoyment in working with AdonisJS as I have! 😊

      2
  2. thanks for this tutorial, but I have an issue when running, npm run dev.
    I got error like this
    Error: Cannot find package 'luxon'

    1
    1. Responding to mathius-kormasela
      @tomgobich

      Hi Mathius! Is this a brand new AdonisJS project? If so, make sure you're using at least version 20.6 of NodeJS. If you are, can you please share the repo? I can take a look and see if anything stands out.

      0
      1. Responding to tomgobich
        1
        1. Responding to mathius-kormasela
          @tomgobich

          Hmm… I just pulled down your repo, and ran npm i and it booted up a-okay. I'm using Node v20.14 as well. Maybe try deleting your package-lock.json and node_modules and rerunning npm i? Might've been some issue with NPM cache.

          0
          1. Responding to tomgobich

            ok, thank you

            1
            1. Responding to mathius-kormasela
              @tomgobich

              Anytime!!

              0
              1. Responding to tomgobich

                works well after giving permission to npm to access .npm folder.

                1
                1. Responding to mathius-kormasela
                  @tomgobich

                  Oh, good find! Happy to hear you were able to get it figured out!

                  0
  3. Hello / Good evening!

    I'm trying to install Adonis ts but I'm stuck at the installation level. Need help please!

    CUSTOMIZE PROJECT

    > Select the project structure · api

    > Enter the project name · hello-world

    > Setup eslint? (y/N) · true

    > Setup prettier? (y/N) · true

    RUNNING TASKS

    > Scaffold project 110 ms

    > Install dependencies 39 ms

    spawn EINVAL

    > Configure installed packages

    [ error ] Unable to create project. Cleaning up

    node:fs:1215

    binding.rmdir(pathModule.toNamespacedPath(path));

    ^

    1
    1. Responding to marley-apong
      @tomgobich

      Hi Marley! These steps don't seem in line with an AdonisJS 6 installation, what command did you use to try and install this project? Also, what NodeJS version are you using? Note, AdonisJS 6 requires NodeJS v20.6 or greater.

      1
      1. Responding to tomgobich

        Hello!

        For installing AdonisJS, I used the command npm init adonis-ts-app@latest hello-world with Node.js v20.16.0. At some point, I also used PNPM with pnpm create adonis-ts-app hello-world. I encountered the same error as you.

        0
        1. Responding to marley-apong
          @tomgobich

          The command to create a new AdonisJS 6 project is npm init adonisjs@latest, the same command shown in this lesson. Try giving that a go instead.

          0
          1. Responding to tomgobich

            Ok thanks, it's fine !

            0
  4. @davide-zerrilli
    1
    1. Responding to davide-zerrilli
      @tomgobich

      Hi Davide! Rick Strahl's blog is a fantastic resource, especially for .NET devs! If you don't have any localhost projects making use of HSTS, you should be able to just clear out your browser's HSTS cache to get things working again. You can find AdonisJS' HSTS config within config/shield.ts.

      If however, you'd like to work with or need to work with HTTPS locally, you may have luck giving Caddy a try! I've never worked with it, but it automatically comes with and renews TLS certs for HTTPS and works on localhost.

      0