Lesson 9: Install Node.js and NPM inside a Docker Container

docker compose build web docker compose up -d --renew-anon-volumes db web nginx docker compose exec web node --version docker compose exec web npm --version docker compose exec web npm ci docker compose exec web npm run build docker compose exec web php artisan migrate --force 

docker compose exec web node -e "console.log(require('fs').existsSync('public/build/manifest.json'))" docker compose exec web npm ls --depth=0 docker compose down 

FROM php:8.2-fpm WORKDIR /var/www/html RUN apt-get update && apt-get install -y \  libzip-dev \  libpq-dev \  unzip \  && docker-php-ext-install zip pdo_mysql pdo_pgsql pcntl \  && rm -rf /var/lib/apt/lists/* RUN pecl install mongodb-1.21.2 \  && docker-php-ext-enable mongodb COPY --from=composer:2 /usr/bin/composer /usr/local/bin/composer ENV COMPOSER_HOME=/tmp/composer COPY --from=node:22-bookworm-slim /usr/local/bin/node /usr/local/bin/node COPY --from=node:22-bookworm-slim /usr/local/lib/node_modules /usr/local/lib/node_modules RUN ln -s ../lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npm \  && ln -s ../lib/node_modules/npm/bin/npx-cli.js /usr/local/bin/npx \  && node --version && npm --version ENV NPM_CONFIG_CACHE=/tmp/npm-cache COPY --chown=www-data:www-data . /var/www/html RUN COMPOSER_ALLOW_SUPERUSER=1 composer install --no-interaction --prefer-dist --optimize-autoloader \  && mkdir -p node_modules \  && chown -R www-data:www-data vendor storage bootstrap/cache node_modules /tmp/composer \  && chmod -R 775 storage bootstrap/cache 

x-laravel-environment: &laravel-environment DB_URL: "" DB_SOCKET: "" DB_CONNECTION: mysql DB_HOST: db DB_PORT: 3306 DB_DATABASE: laravel_app DB_USERNAME: root DB_PASSWORD: root QUEUE_CONNECTION: database DB_QUEUE_RETRY_AFTER: 90 x-laravel-service: &laravel-service build: context: . dockerfile: Dockerfile image: my-laravel-app working_dir: /var/www/html user: "www-data" volumes: - .:/var/www/html - /var/www/html/vendor - /var/www/html/node_modules - /var/www/html/storage - /var/www/html/bootstrap/cache environment: <<: *laravel-environment SCHEDULER_DEMO_ENABLED: "false" depends_on: db: condition: service_healthy services: web: <<: *laravel-service scheduler: <<: *laravel-service profiles: ["scheduler"] init: true command: ["php", "artisan", "schedule:work", "--no-interaction"] restart: unless-stopped environment: <<: *laravel-environment CACHE_STORE: file SCHEDULER_DEMO_ENABLED: "true" worker: <<: *laravel-service profiles: ["queue"] init: true command: ["php", "artisan", "queue:work", "database", "--queue=emails", "--sleep=1", "--tries=3", "--timeout=30", "--max-time=3600", "--no-interaction"] restart: unless-stopped stop_grace_period: 45s nginx: image: nginx:latest ports: - "${APP_PORT:-8080}:80" volumes: - .:/var/www/html:ro - ./.docker/nginx/default.conf:/etc/nginx/conf.d/default.conf:ro depends_on: - web db: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: root MYSQL_DATABASE: laravel_app ports: - "${DB_FORWARD_PORT:-3308}:3306" volumes: - dbdata:/var/lib/mysql healthcheck: test: ["CMD-SHELL", "mysqladmin ping -h 127.0.0.1 -p\"$${MYSQL_ROOT_PASSWORD}\" --silent"] interval: 5s timeout: 5s retries: 20 start_period: 20s volumes: dbdata: 

{ "$schema": "https://www.schemastore.org/package.json", "private": true, "type": "module", "scripts": { "build": "vite build", "dev": "vite" }, "devDependencies": { "@tailwindcss/vite": "^4.0.0", "axios": "^1.11.0", "concurrently": "^9.0.1", "laravel-vite-plugin": "^2.0.0", "tailwindcss": "^4.0.0", "vite": "^7.0.7" } } 

<?php use App\Http\Controllers\SchedulerDemoController; use App\Mail\QueueDemoMail; use App\Models\MongoNote; use Illuminate\Support\Facades\Route; Route::get('/', function () { return view('welcome'); }); Route::get('/scheduler-demo', SchedulerDemoController::class)->name('scheduler-demo'); Route::get('/queue-demo/mail-preview', fn () => new QueueDemoMail('Laravel Developer', 'preview-only')) ->name('queue-demo.mail-preview'); Route::get('/mongo-demo', fn () => view('mongo-demo', [ 'notes' => MongoNote::orderByDesc('created_at')->limit(20)->get(), ]))->name('mongo-demo'); Route::view('/frontend-demo', 'frontend-demo')->name('frontend-demo'); 

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Lesson 9 · Node, npm and Vite</title> @vite(['resources/css/app.css', 'resources/js/app.js']) </head> <body class="min-h-screen bg-slate-950 px-6 py-20 font-sans text-slate-100"> <main class="mx-auto max-w-3xl rounded-3xl border border-slate-700 bg-slate-900 p-10"> <p class="mb-4 text-sm font-bold tracking-widest text-red-400">LESSON 9 · LARAVEL + DOCKER</p> <h1 class="mb-6 text-4xl font-bold">Node.js, npm and Vite inside Docker</h1> <p class="mb-8 text-lg text-slate-300">This Blade page loads the actual compiled CSS and JavaScript assets. Click the button to check the JavaScript module.</p> <button id="frontend-demo-button" type="button" class="cursor-pointer rounded-xl bg-red-500 px-6 py-3 font-bold text-white hover:bg-red-600 focus:outline-2 focus:outline-offset-4 focus:outline-white">Test JavaScript</button> </main> </body> </html> 

import './bootstrap'; document.querySelector('#frontend-demo-button')?.addEventListener('click', (event) => { event.currentTarget.textContent = 'JavaScript is working!'; }); 

@import 'tailwindcss'; @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; @source '../../storage/framework/views/*.php'; @source '../**/*.blade.php'; @source '../**/*.js'; @theme { --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; } 

import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import tailwindcss from '@tailwindcss/vite'; export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true, }), tailwindcss(), ], server: { watch: { ignored: ['**/storage/framework/views/**'], }, }, });