How to dockerize adonisJS 6 with vite and tailwindcss

[IzliaB]

I created an image of my project using version 6 of Adonis. I managed to successfully run the project container, but when making requests, it returns an error stating that the stylesheet is not found.

I am using version 20.11.1 of node. I use Edge to generate templates, configured Tailwind CSS for styles but processed them with Vite. What I am generating are PDFs, and I generate the PDFs with Playwright.

I created the image below, and I'm not sure if there's anything else I need to ensure to get the styles.

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"]

In the adonisrc.ts file, only the template files and public files are being called. I'm not sure if I need to configure something here to include all files from the resources directory.

  metaFiles: [
    {
      pattern: 'resources/views/**/*.edge',
      reloadServer: true,
    },
    {
      pattern: 'public/**',
      reloadServer: false,
    },
  ],

Here's the configuration from the vite.config.js file:

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],
    },
  },
})

Any kind of help will be appreciated.

[IzliaB]

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