Ugly welcome.blade.php page in production following this guide- https://docs.docker.com/guides/frameworks/laravel/production-setup/#create-a-dockerfile-for-nginx-production

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:

The custom font Epilogue is not being used. Its actually using a font that I believe I used once sometime ago.
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...

Tray2

2 months ago

Level 73

You need to run npm run build and make sure you deploy those files.

FireBlade

2 months ago

Level 2

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

Tray2

2 months ago

Level 73

I would start by making sure that the JS and CSS is in the /public/assets directory, because they likely aren't.

FireBlade

2 months ago

Level 2

Looks like this line is not processed in production:

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

FireBlade

2 months ago

Level 2

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

Please or to participate in this conversation.