Creating Our AdonisJS App With InertiaJS

In this lesson, we'll create a new AdonisJS 6 application with the InertiaJS Starter Kit. We'll then walk through the Inertia-specific aspects of our project structure and briefly discuss the configuration steps taken when adding Inertia.

Published
Aug 15
Duration
11m 26s

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

⏳ Chapters

00:00 - Adding Inertia to an Existing Project
01:10 - New AdonisJS Project with the InertiaJS Starter Kit
03:15 - Filling Out Our Environment Variables
04:16 - InertiaJS Project Structure
07:57 - Reference Directives
09:15 - InertiaJS Project Structure Cont.

Join The Discussion! (6 Comments)

Please sign in or sign up for free to join in on the dicussion.

  1. Commented 16 days ago

    Hi, what is the reason for having the inertia directory in the root instead of in the resources folder? According to the docs, in the vite section, Adonisjs recommends having frontend assets in the resources folder.

    1

    Please sign in or sign up for free to reply

    1. Commented 16 days ago

      Hi Thenial! I don't know the exact reason, this is a change that was made in v1.0.0-19 pre-release. I believe it was done for cleanliness reasons. Since, you can have Inertia and non-Inertia pages, mix-and-matching both with them all within resources can lead to things being a little difficult to sift through. Having them completely separated does ease that a bit.

      I would add an asterisks next to that section of the docs specifically for Inertia assets. 😉

      0

      Please sign in or sign up for free to reply

      1. Commented 16 days ago

        Hi, thanks for the reply! and that makes sense. If I choose to have everything inside the resources folder, would that affect the build in any way?

        0

        Please sign in or sign up for free to reply

        1. Commented 15 days ago

          Anytime! Nope, I haven't tried it, but it should be perfectly fine! Just be sure to update the entry points within the below.

          • config/inertia.ts

          • resources/views/inertia_layout.edge

          • vite.config.ts

          In your config/inertia.ts, there's a property called entrypoint you'll want to add to the base of the config that points to wherever you're client-side entrypoint is. Then, if you're using SSR, you'll also want to update the one nested inside the ssr property of the config.

          I'd reckon it'd look something like:

          const inertiaConfig = defineConfig({
            // ... the other stuff
          
            entrypoint: 'resources/js/app.ts', // client-side entrypoint
            ssr: {
              enabled: true,
              entrypoint: 'resources/js/ssr.ts', // server-side entrypoint
            },
          })
          Copied!
          0

          Please sign in or sign up for free to reply

          1. Commented 14 days ago

            Works perfectly, Thanks!

            0

            Please sign in or sign up for free to reply

            1. Commented 14 days ago

              Awesome!! Anytime!

              0

              Please sign in or sign up for free to reply