Adonisjs 6: How to dockerize with vite and tailwindcss?

Question

I'm encountering issues while dockerizing my project developed in AdonisJS 6. I have configured my project using Edge and TailwindCSS to process PDFs with Playwright, and I've used Vite to set up the styles. Everything worked fine in my local environment; however, when trying to dockerize the project, I ran into problems.

Initially, I had difficulties with the folder structure. I asked for help in the official Discord community, where they provided me with an example image in which all files are moved to a single folder.

Then, I had problems with the port. I was informed that I needed to change from "localhost" to "0.0.0.0," and I also had issues copying the .env file.

After solving these problems and managing to run the container, I now face issues with CSS files. I've been trying to dockerize the project for a whole week without success. The error I'm receiving is "Cannot find 'resources/css/file.css' chunk in the manifest file."

I'm using Node.js in version 20.11.1.

I've tried various solutions without success, and I'm seeking guidance on how to fix this specific issue when dockerizing an AdonisJS 6 project configured with TailwindCSS using Vite.

I appreciate any help or suggestions you can offer. Thank you in advance!

Dockerfile

FROM node:20.11.1-alpine as base

RUN apk add --no-cache \
    libxkbcommon \
    dbus \
    ttf-freefont \
    udev \
    xvfb \
    zlib \
    chromium \
    chromium-chromedriver \
    nss \
    freetype \
    freetype-dev \
    harfbuzz \
    ca-certificates \
    && rm -rf /var/cache/apk/*

# install dependences
FROM base as deps
WORKDIR /app
COPY . .
COPY package.json package-lock.json ./
RUN npm install
RUN npx playwright install

# Production only deps stage
FROM base as production-deps
WORKDIR /app
ADD package.json package-lock.json ./
RUN npm install

# Build
FROM base as build
WORKDIR /app
COPY --from=deps /app/node_modules /app/node_modules
COPY . .
COPY .env.example .env
RUN npm run build

FROM base
ENV NODE_ENV=production
WORKDIR /app
COPY --from=production-deps /app/node_modules /app/node_modules
COPY --from=build /app/build /app
COPY .env /app
EXPOSE 3333
CMD ["node", "./bin/server.js"]

vite.config.js

import { defineConfig } from 'vite'
import adonisjs from '@adonisjs/vite/client'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
export default defineConfig({
  plugins: [
    adonisjs({
      /**
       * Entrypoints of your application. Each entrypoint will
       * result in a separate bundle.
       */
      entrypoints: ['resources/js/app.js'],
      /**
       * Paths to watch and reload the browser on file change
       */
      reload: ['resources/views/**/*.edge', 'resources/fonts/**/*.tff'],
    }),
  ],
  css: {
    postcss: {
      plugins: [tailwindcss, autoprefixer],
    },
  },
})**

adonisrc.ts

import { defineConfig } from '@adonisjs/core/app'

export default defineConfig({
  /*
  |--------------------------------------------------------------------------
  | Commands
  |--------------------------------------------------------------------------
  |
  | List of ace commands to register from packages. The application commands
  | will be scanned automatically from the "./commands" directory.
  |
  */
  commands: [() => import('@adonisjs/core/commands'), () => import('@adonisjs/lucid/commands')],

  /*
  |--------------------------------------------------------------------------
  | Service providers
  |--------------------------------------------------------------------------
  |
  | List of service providers to import and register when booting the
  | application
  |
  */
  providers: [
    () => import('@adonisjs/core/providers/app_provider'),
    () => import('@adonisjs/core/providers/hash_provider'),
    {
      file: () => import('@adonisjs/core/providers/repl_provider'),
      environment: ['repl', 'test'],
    },
    () => import('@adonisjs/core/providers/vinejs_provider'),
    () => import('@adonisjs/cors/cors_provider'),
    () => import('@adonisjs/lucid/database_provider'),
    () => import('@adonisjs/session/session_provider'),
    () => import('@adonisjs/auth/auth_provider'),
    () => import('@adonisjs/core/providers/edge_provider'),
    () => import('@adonisjs/vite/vite_provider'),
  ],

  /*
  |--------------------------------------------------------------------------
  | Preloads
  |--------------------------------------------------------------------------
  |
  | List of modules to import before starting the application.
  |
  */
  preloads: [
    () => import('#start/routes'),
    () => import('#start/kernel'),
    () => import('#start/globals'),
  ],

  /*
  |--------------------------------------------------------------------------
  | Tests
  |--------------------------------------------------------------------------
  |
  | List of test suites to organize tests by their type. Feel free to remove
  | and add additional suites.
  |
  */
  tests: {
    suites: [
      {
        files: ['tests/unit/**/*.spec(.ts|.js)'],
        name: 'unit',
        timeout: 2000,
      },
      {
        files: ['tests/functional/**/*.spec(.ts|.js)'],
        name: 'functional',
        timeout: 30000,
      },
    ],
    forceExit: false,
  },
  metaFiles: [
    {
      pattern: 'resources/views/**/*.edge',
      reloadServer: true,
    },
    {
      pattern: 'resources/**',
      reloadServer: true,
    },
    {
      pattern: 'public/**',
      reloadServer: false,
    },
  ],
})

The project structure was left as suggested by the official documentation folder structure , but when creating the container, the files are moved inside the "app" folder.

Answer 1

The answer to the question is provided by the documentation. I hadn't fully understood how the Vite configuration worked. Vite is responsible for creating the manifest.json file that generates the necessary style and script files for the templates.

In my case, I had several CSS files in resources, so each of these files must be declared in the entry point of the vite.config file.

I'm leaving you the documentation where this is explained better.Vite Experimental