Adding Remix to an existing AdonisJS 6 project

Requirements:

• AdonisJS 6
• The @adonisjs/vite plugin

Install and configure @adonisjs/vite using the official documentation

Install remix-adonisjs:

npm install @matstack/remix-adonisjs
node ace configure @matstack/remix-adonisjs

INFO

Make sure that the vite_provider is placed above the remix_provider in adonisrc.ts

Add this to your adonisrc.ts file:

  assetsBundler: false,
  hooks: {
    onBuildStarting: [() => import('@matstack/remix-adonisjs/build_hook')],
  },

Update your tsconfig.json compiler options to include these lines:

  "compilerOptions": {
    "outDir": "./build/",
    "module": "ES2022",
    "moduleResolution": "bundler",
    "lib": ["ES2019", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",
    [...]
  }

Add a route handler to start/routes.ts that invokes the Remix request handler for all HTTP verbs:

router.any('*', async ({ remixHandler }) => {
  return remixHandler()
})

You should now have a working remix-adonisjs application!