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

[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"
    }
}

[claytron5000]

It looks like you're trying to serve the encore files out of the nginx server. While that might work, I've had success setting up a separate encore container to serve the generated files.

Here's the service I'm using.

 encore:
        image: node:14.10-alpine
        volumes:
            - .:/var/www/symfony:consistent
        working_dir: /var/www/symfony
        # for webpack-encore v1, "--disable-host-check" is replaced with "--firewall false"
        command: >
            sh -c "yarn install &&
                   yarn encore dev-server --hot --port 9999 --host 0.0.0.0 --disable-host-check"
        ports:
            - "9999:9999"

In this service, I'm automatically running the dev server.

The thing that took me a while to get my head around, was that encore was serving on a different port from the main application. So you'll access the site on localhost:81, which will serve you an HTML page with the following script tag(or something like it):

<script src="localhost:9999/assets/app.js"></script>

If you're accessing the site from localhost, this should be fine, but if you're accessing the site from another computer(I'm doing this on a local network), you'll need to run a proxy to get those generated files).

Finally, to run your scripts, you'll do something like this:

> docker-compose run encore yarn build

[cedricgeffroy]

Thank you @claytron5000
I really appreciate your taking the time to share your config.
I will try with a separate container.

For others, as a FYI.
My version has this PR.
https://github.com/symfony/webpack-encore/pull/939/files

So it's not related,
as suggested by @Kocal and @leevigraham on #947