Skip to content

[local dev server] docker / symfony / webpack encore >> GET http://localhost:8080/build/app.css net::ERR_EMPTY_RESPONSE #948

@cedricgeffroy

Description

@cedricgeffroy

Hello,

I spent days trying to figure out the root cause of an issue I have. After reviewing all similar issues I decided to post details here.
Let me know if this should have been posted on Stackoverflow.

I am playing with a multi containers docker setup.

Symfony app is accessible from http://localhost:81/
But the browser console returns:

GET http://localhost:8080/build/app.css net::ERR_EMPTY_RESPONSE
GET http://localhost:8080/build/app.js net::ERR_EMPTY_RESPONSE

I've tried tenth of different configurations & modifications of docker-compose.yml / webpack.config.js / package.json without success.
My guess is the issue is in the docker-compose.yml file.

docker-compose.yml

version: '3.8'

services:
  db:
    container_name: db
    image: postgres:12
    restart: always
    volumes:
      - db_data:/var/lib/postgresql/data
    environment:
        POSTGRES_PASSWORD: password
        POSTGRES_DB: testdb
    ports:
        - "15432:5432"

  php-fpm:
    container_name: php-fpm
    build:
      context: ./php-fpm
    depends_on:
      - db
    volumes:
      - ./../:/var/www
      - ./php-fpm/php.ini:/usr/local/etc/php/php.ini

  nginx:
    container_name: nginx
    build:
      context: ./nginx
    volumes:
      - ./../:/var/www
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./nginx/sites/:/etc/nginx/sites-available
      - ./nginx/conf.d/:/etc/nginx/conf.d
      - ./logs:/var/log
    depends_on:
      - php-fpm
    ports:
      - "81:80"
      - "444:443"
      - "8080:8080"

  maildev:
    container_name: maildev
    image: maildev/maildev
    ports:
        - "1080:80"
    command: bin/maildev --web 80 --smtp 25 --hide-extensions STARTTLS

volumes:
  db_data:

webpack.config.js

const Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')

    .addEntry('app', './assets/app.js')

    .enableStimulusBridge('./assets/controllers.json')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())

    .enableVersioning(Encore.isProduction())

    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })

    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // Recommended by https://symfony.com/doc/current/frontend/encore/dev-server.html#cors-issues
    .configureDevServerOptions(options => {
        options.firewall = false;
    })
;

// Recommended by https://symfony.com/doc/current/frontend/encore/virtual-machine.html
Encore.configureWatchOptions(watchOptions => {
    watchOptions.poll = 250; // check for changes every 250 ms
});

module.exports = Encore.getWebpackConfig();

package.json

{
    "devDependencies": {
        "@symfony/stimulus-bridge": "^2.0.0",
        "@symfony/webpack-encore": "^1.0.0",
        "core-js": "^3.0.0",
        "regenerator-runtime": "^0.13.2",
        "stimulus": "^2.0.0",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server --port 8080 --host localhost",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions