VS Code includes an integrated terminal. To open its panel, we can hit cmd/ctrl + j or head to Menubar -> View -> Terminal.
If you have a separate terminal application you prefer, feel free to use it. For simplicity, I'll be using this integrated terminal throughout this series to interact with the command line.
To create a new AdonisJS project, we can use NPM's create command to scaffold a new AdonisJS project. We'll add @latest to target the latest production-ready version.
npm create adonisjs@latest # Need to install the following packages: # create-adonisjs@XX.XX.XX # Ok to proceed? (y) yCopied!
This will ask us if you're okay with installing the create-adonisjs package; select "yes" here. This is the package that'll create our AdonisJS project.
> npx > "create-adonisjs" _ _ _ _ ____ / \ __| | ___ _ __ (_)___ | / ___| / _ \ / _` |/ _ \| '_ \| / __|_ | \___ \ / ___ \ (_| | (_) | | | | \__ \ |_| |___) | /_/ \_\__,_|\___/|_| |_|_|___/\___/|____/ ❯ Where should we create your new project? › lets-learn-adonisjs-7Copied!
Next, it'll ask us where we'd like our project created. This is the folder name it'll place our project within, so feel free to name this whatever you'd like. I'll be naming mine "lets-learn-adonisjs-7."
❯ Where should we create your new project? · lets-learn-adonisjs-7 ❯ Select the kind of app you want to create? … Press <ENTER> to select ❯ Hypermedia app React app (using Inertia) Vue app (using Inertia) API (monorepo)Copied!
Then, it'll ask us what type of project we'd like to create. At the time I'm writing this, there are four options.
Hypermedia app
This will give us a full-stack application using EdgeJS as it's templating engine.React app
Creates a full-stack Inertia application using React to render pages.Vue app
Creates a full-stack Inertia application using Vue to render pages.API
Creates a monorepo that uses Turbo, containing anappsdirectory with a separatebackendandfrontendwithin the same repository for maximum type-safety. This also includes web and API authentication, configured and ready to go.
All four of these starter kits come with similar pre-prepared code for our database and authentication to help you get going. The Inertia applications allow you to use AdonisJS as your server and have a fully-functioning React or Vue application as your frontend within the same project with Inertia as a communication layer between the two.
For this series, we'll be using the Hypermedia app, so let's select that option. Once selected, the create-adonisjs package will download the Hypermedia Starter Kit to the new folder we've specified in the first step. Then, it'll install its dependencies using NPM, prepare our application, and run the migrations for our database.
When all is done, you should see something like the following.
❯ Where should we create your new project? · lets-learn-adonisjs-7 ❯ Select the kind of app you want to create? · Hypermedia app ❯ Download starter kit (238 ms) ❯ Install packages (29 s) ❯ Prepare application (270 ms) Application ready ❯ Migrate database (534 ms) Database migrated ╭──────────────────────────────────────────────────────────────────╮ │ Your AdonisJS project has been created successfully! │ │──────────────────────────────────────────────────────────────────│ │ │ │ ❯ cd lets-learn-adonisjs-7 │ │ ❯ npm run dev │ │ ❯ Open http://localhost:3333 │ │ ❯ │ │ ❯ Have any questions? │ │ ❯ Join our Discord server - https://discord.gg/vDcEjq6 │ │ │ ╰──────────────────────────────────────────────────────────────────╯Copied!
The starter kits will use a file-based database by default, called SQLite. This is the easiest database to use, as it requires zero prep work, so we'll be using it throughout this series.
Switching Database Drivers
If you're building a project and want to use a different driver, like PostgreSQL or MySQL, all you need to do is cd into your new project and reconfigure Lucid using the node ace configure @adonisjs/lucid command. Include the --force flag to override existing files, like the config/database.ts file.
> $ cd example-project > $ node ace configure @adonisjs/lucid --force ❯ Select the database you want to use … Press <ENTER> to select ❯ SQLite LibSQL MySQL PostgreSQL MS SQLCopied!
By running node ace we're interacting with AdonisJS's Command Line Interface, called Ace CLI. The configure command mentioned above will execute configuration steps defined by the installed package its run for. There's also node ace add <package> which allows us to install a package and configure it in one go.
Opening Our Project
Fantastic, we're now ready to open our project within VS Code! Select File -> Open Folder, then select the folder of the project you've created above and click "Open."
With the File Explorer open, you should see several folders listed within it, like app, bin, config, etc. Our goal in the next lesson is to get familiar with our project structure, so we understand what these files and folders are for.
Let's open our terminal back up with cmd/ctrl + j. We can easily start our new application by running npm run dev or by directly using the Ace CLI with node ace serve --hmr, both commands do the same.
The serve command is what starts our application in development mode. With it, it'll also watch our file system for changes. When a change is detected, it'll automatically restart the server to pick up that change.
The --hmr flag instructs the dev server to use Hot Module Replacement (HMR) to apply detected changes by dynamically updating just the changed file directly. This doesn't require our page to reload or the server to restart; the change will just magically appear.
Once run, you should see something like the following printed out in your terminal:
[ info ] starting server in hmr mode... [ info ] loading hooks... [ info ] generating indexes... [ info ] codegen: created 3 file(s) [ info ] starting HTTP server... [20:30:32.048] INFO (88931): started HTTP server on localhost:3333 ╭─────────────────────────────────────────────────╮ │ │ │ Server address: http://localhost:3333 │ │ Mode: hmr │ │ Ready in: 408 ms │ │ Press h to show help │ │ │ ╰─────────────────────────────────────────────────╯ [ info ] watching file system for changes...Copied!
Jump into your browser and head to the Server address listed, http://localhost:3333 to see your new AdonisJS 7 server!
