@fireblade No one can assist without seeing the actual error, or the code where you try and include Alpine.

Confirmed. I removed all extra code and added the most basic Alpinejs code and found that its working. I think the problem was the code...Thanks a lot...

I have a project in Laravel 9 that I haven't migrated or upgraded where I noticed the problem, so I created a new Laravel 9 project to confirm that the issue was not just that old project ...I believe I will face the same issue even in other versions no ? Kindly assist. Thanks

I have a fresh new Laravel 9 Jetstream-Livewire app with the node_modules and vendor folders deleted. The NGINX container Dockerfile looks like this:

FROM node:22-alpine AS builder

WORKDIR /app

# Copy Laravel application code
COPY ./src/. /app

RUN npm install && npm run build

FROM nginx:1.21-alpine

COPY --from=builder /app/public /var/www/public

COPY ./nginx/nginx.conf /etc/nginx/conf.d/nginx.conf

WORKDIR /var/www/public

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

The main Dockerfile looks like this:

FROM node:22-alpine AS stage-1

WORKDIR /app

# Copy Laravel application code
COPY ./src/. /app

RUN npm install && npm run build

FROM php:8.4-fpm AS builder

RUN apt-get update && apt-get install -y --no-install-recommends \
    curl \
    unzip \
    libpq-dev \
    libonig-dev \
    libssl-dev \
    libxml2-dev \
    libcurl4-openssl-dev \
    libicu-dev \
    libzip-dev \
    && docker-php-ext-install -j$(nproc) \
    pdo_mysql \
    pdo_pgsql \
    pgsql \
    opcache \
    intl \
    zip \
    bcmath \
    soap \
    && pecl install redis \
    && docker-php-ext-enable redis \
    && apt-get autoremove -y && apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

WORKDIR /var/www

COPY ./src/. /var/www

RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer \
    && composer install --no-dev --optimize-autoloader --no-interaction --no-progress --prefer-dist

COPY --from=stage-1 /app/node_modules /var/www/node_modules
COPY --from=stage-1 /app/public/build/ /var/www/public/build/

FROM php:8.4-fpm AS production

RUN apt-get update && apt-get install -y --no-install-recommends \
    libpq-dev \
    libicu-dev \
    libzip-dev \
    libfcgi-bin \
    procps \
    && apt-get autoremove -y && apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

COPY ./php/uploads.ini /usr/local/etc/php/conf.d/uploads.ini

RUN curl -o /usr/local/bin/php-fpm-healthcheck \
    https://raw.githubusercontent.com/renatomefi/php-fpm-healthcheck/master/php-fpm-healthcheck \
    && chmod +x /usr/local/bin/php-fpm-healthcheck

COPY --from=builder /usr/local/lib/php/extensions/ /usr/local/lib/php/extensions/
COPY --from=builder /usr/local/etc/php/conf.d/ /usr/local/etc/php/conf.d/
COPY --from=builder /usr/local/bin/docker-php-ext-* /usr/local/bin/

RUN mv "$PHP_INI_DIR/php.ini-production" "$PHP_INI_DIR/php.ini"
#COPY --from=builder /usr/local/etc/php/php.ini-production /usr/local/etc/php/php.ini
RUN set -eux;{ echo '[www]'; echo 'pm.status_path = /status'; } > /usr/local/etc/php-fpm.d/my-fpm.conf
COPY --from=builder /var/www /var/www
WORKDIR /var/www

RUN chown -R www-data:www-data /var/www
USER www-data

EXPOSE 9000
CMD ["php-fpm"]

However, Alpinejs is not working and the browser console does not show any error...

I have noticed that the NGINX container has different build asset files compared to the PHP-FPM one. It looks like the process flow presented by the guide that favors 2 Dockerfiles is at fault ...What if we had 1 Dockerfile and the containers pick the relevant stages from the same Dockerfile...

I have also noticed that files and folders in the NGINX server are owned by root. I have tried several options including building with --no-cache option but still NGINX tries to read exactly same non-existent file.

For my setup, the Laravel app is inside src folder while all other docker setup files are outside src folder. My Dockerfile for NGINX container:

FROM node:22-alpine AS builder

WORKDIR /app

# Copy Laravel application code
COPY ./src/. /app

RUN npm install && npm run build

FROM nginx:1.21-alpine

COPY --from=builder /app/public /var/www/public

COPY ./nginx/nginx.conf /etc/nginx/conf.d/nginx.conf

WORKDIR /var/www/public

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

The main Dockerfile is:

FROM php:8.4-fpm AS builder

RUN apt-get update && apt-get install -y --no-install-recommends \
    curl \
    unzip \
    libpq-dev \
    libonig-dev \
    libssl-dev \
    libxml2-dev \
    libcurl4-openssl-dev \
    libicu-dev \
    libzip-dev \
    && docker-php-ext-install -j$(nproc) \
    pdo_mysql \
    pdo_pgsql \
    pgsql \
    opcache \
    intl \
    zip \
    bcmath \
    soap \
    && pecl install redis \
    && docker-php-ext-enable redis \
    && apt-get autoremove -y && apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

WORKDIR /var/www

COPY ./src/. /var/www

RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer \
    && composer install --no-dev --optimize-autoloader --no-interaction --no-progress --prefer-dist
   
FROM php:8.4-fpm AS production

RUN apt-get update && apt-get install -y --no-install-recommends \
    libpq-dev \
    libicu-dev \
    libzip-dev \
    libfcgi-bin \
    procps \
    && apt-get autoremove -y && apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

COPY ./php/uploads.ini /usr/local/etc/php/conf.d/uploads.ini

RUN curl -o /usr/local/bin/php-fpm-healthcheck \
    https://raw.githubusercontent.com/renatomefi/php-fpm-healthcheck/master/php-fpm-healthcheck \
    && chmod +x /usr/local/bin/php-fpm-healthcheck

COPY ./src/storage /var/www/storage-init

COPY --from=builder /usr/local/lib/php/extensions/ /usr/local/lib/php/extensions/
COPY --from=builder /usr/local/etc/php/conf.d/ /usr/local/etc/php/conf.d/
COPY --from=builder /usr/local/bin/docker-php-ext-* /usr/local/bin/

RUN mv "$PHP_INI_DIR/php.ini-production" "$PHP_INI_DIR/php.ini"
#COPY --from=builder /usr/local/etc/php/php.ini-production /usr/local/etc/php/php.ini
RUN set -eux;{ echo '[www]'; echo 'pm.status_path = /status'; } > /usr/local/etc/php-fpm.d/my-fpm.conf
COPY --from=builder /var/www /var/www
WORKDIR /var/www

RUN chown -R www-data:www-data /var/www
USER www-data

RUN php artisan config:cache
RUN php artisan view:cache
RUN php artisan route:cache

#ENTRYPOINT ["/usr/local/bin/entrypoint.sh"]

# Expose port 9000 and start php-fpm server
EXPOSE 9000
CMD ["php-fpm"]

And the docker-compose.yml file is:

version: "3.7"
services:
  nginx:
    build:
      context: ./
      dockerfile: ./nginx/Dockerfile
    container_name: nginx
    tty: true
    restart: unless-stopped
    ports:
    - "8456:80"
    env_file:
    - ./src/.env
    volumes:
    - storage-production:/var/www/storage:ro
    depends_on:
      app:
        condition: service_healthy 
    networks:
    - laraapp
  app:
    build:
      context: ./
      dockerfile: Dockerfile
      target: production
    restart: unless-stopped
    image: app-1
    container_name: app
    healthcheck:
      test: ["CMD-SHELL", "php-fpm-healthcheck || exit 1"]
      interval: 10s
      timeout: 5s
      retries: 3
    depends_on:
      db:
        condition: service_healthy  
    env_file:
      - ./src/.env
    volumes:
      - storage-production:/var/www/storage
    ports:
      - "9031:9000"
    networks:
      - laraapp
  db:
    image: mysql/mysql-server:8.0
    container_name: db
    restart: unless-stopped
    tty: true
    ports:
      - "3336:3306"
    env_file:
      - ./src/.env
    healthcheck:
      test: ["CMD", "mysqladmin", "ping", "-h", "localhost", "-u", "root", "===Uy"]
      interval: 10s
      timeout: 5s
      retries: 5
      start_period: 30s
    environment:
      MYSQL_DATABASE: ${DB_DATABASE}
      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_USER: ${DB_USERNAME}
      SERVICE_TAGS: dev
      SERVICE_NAME: mysql
    volumes:
      - ./mysql:/etc/mysql/conf.d/
      - ./mysqlinit:/docker-entrypoint-initdb.d
      - mysqldata:/var/lib/mysql
    networks:
      - laraapp
  redis:
    image: redis:alpine
    restart: unless-stopped # Automatically restart unless the service is explicitly stopped
    networks:
      - laraapp
    ports:
      - "6379:6379"
    healthcheck:
      test: ["CMD", "redis-cli", "ping"]
      interval: 10s
      timeout: 5s
      retries: 3
networks:
  laraapp:
    driver: bridge
volumes:
  mysqldata:
  storage-production:

The problem is that when I deploy the app, NGINX server is reading non-existent CSS file:

"GET /build/assets/app-6483e3d7.css HTTP/1.0" 404 6603

instead of the one actually deployed to the build assets folder, leading to a broken CSS page:

app-b3fca3b4.css

I have also realized that this Tailwind style is not working in a Blade component in production ( this is not in welcome.blade.php as noted above) :

html class="bg-green-700">

forcing me to resort to plain css: html style="background-color:#46854f

My vite.config.js

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        host: '0.0.0.0',
        port: 5173,
        strictPort: true,
        hmr: {
            host: '127.0.0.1'
        }
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
});

Am in Laravel 9.52.21

Looks like this line is not processed in production:

<!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])

The Dockerfile has the command:

RUN npm install && npm run build

and the output is deployed here:

COPY --from=builder /var/www/public /var/www/public

I have a single-page app using only the welcome.blade.php file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{{ config('app.name', 'Laravel App') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> 
        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans antialiased text-black">
        <nav class="">
            <div class="container mx-auto flex items-center justify-between p-2 md:pt-4 md:px-4">
                <div class="flex items-center">
                    <div>
                        <a href="#">
                        </a>
                    </div>
                </div>
                <div class="flex items-center">
                    @if (Route::has('login'))
                        @auth
                            <a href="{{ url('/dashboard') }}" class="text-sm text-gray-700 dark:text-gray-500 ">Dashboard</a>
                        @else
                            <a href="{{ route('login') }}" class="text-black text-sm px-2 py-2 border border-gray-800">Log in &rarr;</a>
                        @endauth
                    @endif
                </div>                
            </div>
        </nav>
        <h1 class="text-2xl lg:text-4xl mb-4 lg:mb-8 font-bold lg:w-[420px]">This is a test header</h1>
    </body>
</html>

This is the NGINX container Dockerfile:

FROM debian AS builder

# Install Node.js and build tools
RUN apt-get update && apt-get install -y --no-install-recommends \
    curl \
    nodejs \
    npm \
    && apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

# Set working directory
WORKDIR /var/www

# Copy Laravel application code
COPY ./src/. /var/www

RUN npm install && npm run build

FROM nginx:1.21-alpine

COPY --from=builder /var/www/public /var/www/public

WORKDIR /var/www/public

EXPOSE 443
CMD ["nginx", "-g", "daemon off;"]

The problem is that once deployed in production, the page looks ugly:

1. The custom font Epilogue is not being used. Its actually using a font that I believe I used once sometime ago.
2. Tailwind CSS on the header element is not applied.

On my development machine, the page looks OK when running Vite development server. Any help is appreciated...

You're running the php artisan command in the NGINX container instead of the PHP container, that's why you getting the error message.

Bit rusty on Docker, but I'll do my best to help.

Have you verified that the public/storage symlink exists inside the Nginx container, not just the PHP container?

Since you're using separate Nginx and PHP-FPM containers, php artisan storage:link runs in the PHP container — but Nginx is the one serving static files.

In your Nginx Dockerfile you only copy:

COPY --from=builder /var/www/public /var/www/public

That means:

The storage directory is not copied

The symlink created in the PHP container is not present

There is no shared volume between containers

So when the browser requests /storage/..., Nginx simply doesn’t have that path — hence the 404.

You have a few options:

Share the entire project directory as a Docker volume between Nginx and PHP

Build both containers from the same source layer so storage and the symlink exist in both

If these are static assets that ship with your app (like quote.svg), consider placing them directly in /public/img instead of storage

Right now, Nginx has no access to the storage directory, which is almost certainly the issue.

I tried rebuilding the NGINX image and I get this error:

Step 6/15 : RUN php artisan storage:link
 ---> Running in a8c64eeb9323
/bin/sh: 1: php: not found

I am considering building the images as you suggest...

This is my NGINX production Dockerfile :

FROM debian AS builder

# Install Node.js and build tools
RUN apt-get update && apt-get install -y --no-install-recommends \
    curl \
    nodejs \
    npm \
    && apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

# Set working directory
WORKDIR /var/www

# Copy Laravel application code
COPY ./src/. /var/www

RUN npm install && npm run build

FROM nginx:1.21-alpine

COPY --from=builder /var/www/public /var/www/public

COPY ./fullchain.pem /etc/nginx/fullchain.pem
COPY ./privkey.pem /etc/nginx/privkey.pem
COPY ./ssl-dhparams.pem /etc/nginx/ssl-dhparams.pem
COPY ./nginx/nginx.conf /etc/nginx/conf.d/

WORKDIR /var/www/public

EXPOSE 443
CMD ["nginx", "-g", "daemon off;"]

This is my PHP-FPM Dockerfile :

FROM php:8.1-fpm AS builder

RUN apt-get update && apt-get install -y \
  curl \
  libpng-dev \
  libonig-dev \
  libxml2-dev \
  libzip-dev \
  zip \
  unzip \
  && docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd zip opcache \
  && apt-get autoremove -y && apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

WORKDIR /var/www

COPY ./src/. /var/www

RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer \
    && composer install --no-dev --optimize-autoloader --no-interaction --no-progress --prefer-dist
   
FROM php:8.1-fpm AS production

ENV PHP_OPCACHE_VALIDATE_TIMESTAMPS="0" \
  PHP_OPCACHE_MAX_ACCELERATED_FILES="10000" \
  PHP_OPCACHE_MEMORY_CONSUMPTION="192" \
  PHP_OPCACHE_MAX_WASTED_PERCENTAGE="10"

RUN apt-get update && apt-get install -y \
  libpng-dev \
  libonig-dev \
  libxml2-dev \
  libzip-dev \
  zip \
  && apt-get autoremove -y && apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
  
COPY ./php/uploads.ini /usr/local/etc/php/conf.d/uploads.ini
RUN sed -i 's/9000/9031/' /usr/local/etc/php-fpm.d/zz-docker.conf

#COPY ./src/storage /var/www/storage-init I can't see this in use ???

COPY --from=builder /usr/local/lib/php/extensions/ /usr/local/lib/php/extensions/
COPY --from=builder /usr/local/etc/php/conf.d/ /usr/local/etc/php/conf.d/
COPY --from=builder /usr/local/bin/docker-php-ext-* /usr/local/bin/

COPY --from=builder /usr/local/etc/php/php.ini-production /usr/local/etc/php/php.ini
RUN sed -i '/\[www\]/a pm.status_path = /status' /usr/local/etc/php-fpm.d/zz-docker.conf
COPY --from=builder /var/www /var/www
WORKDIR /var/www

RUN php artisan config:cache
RUN php artisan route:cache
RUN php artisan view:cache
RUN php artisan storage:link

RUN chown -R www-data:www-data /var/www
USER www-data

# Expose port 9000 and start php-fpm server
EXPOSE 9031
CMD ["php-fpm"]

However, when I start the Laravel app, images are not showing. I even tried adding an image on the welcome.blade.php file as:

<img src="{{asset('/storage/img/quote.svg')}}" alt="">
    </body>
</html>

but on Chrome Developer tools, it shows error 404. Kindly help...

livewire/livewire v2.12.1 A front-end framework ...

When i try it like this I also get array:

@foreach($posts as $post)  
        @if($canDelete)    
              <x-jet-dropdown-link rel="nofollow" href="#!"
                      @click="Livewire.emit('setDeleteRecord',{{App\Models\Post::find($post->id)}});">
                                 {{ __('Delete') }}
              </x-jet-dropdown-link>
              <div class="border-t border-gray-100"></div>
         @endif 
@endforeach

Laravel Framework 9.52.4

When I write the blade view like this :

@foreach($posts as $post)  
        @if($canDelete)    
              <x-jet-dropdown-link rel="nofollow" href="#!"
                      @click="Livewire.emit('setDeleteRecord',{{$post}});">
                                 {{ __('Delete') }}
              </x-jet-dropdown-link>
              <div class="border-t border-gray-100"></div>
         @endif 
@endforeach

The Livewire component does not work:

if($this->model instanceof App\Models\Post) $this->model->delete();

I get an array instead of object.

Yes. There's an authorization check so this is not the issue...

This is how I delete the model:

if ($this->model == 'Post')Post::find($this->recordId)->delete(); elseif 

I have a Livewire component that deletes models :

...

    
    public function setRecord($model,$recordId){
        $this->resetDialog();
        $this->model = $model;
        $this->recordId = $recordId;
    }
...
setRecord is called from Blade template :

```php
@if($canDelete)    
      <x-jet-dropdown-link @click="Livewire.emit('setDeleteRecord','Post',{{$row->id}});">
              {{ __('Delete') }}
      </x-jet-dropdown-link>
      <div class="border-t border-gray-100"></div>
@endif

How can I simplify pass the model from the Blade template without the manual model type "Post" and still delete the model ? Remember I plan to use the same Livewire component with different models eg Item, Location etc ?