Using encore dev-server with docker devilbox containers

[raulbethencourt]

Hi. I'm trying to use dev-server in docker containers with devilbox and i did all configuration to use dev-server in virtual machine that i found: https://symfony.com/doc/current/frontend/encore/virtual-machine.html But in chrome consol i have this error:

GET http://inmogence.loc/build/app.css net::ERR_ABORTED 404 (Not Found)
(index):98 GET http://inmogence.loc/build/app.js net::ERR_ABORTED 404 (Not Found) 

And also i dont have autorefreshing window when i save.

I do the command $ yarn dev-server and tha answer is:

devilbox@php-7.4.9 in /shared/httpd/inmogence/symfony $ yarn dev-server
yarn run v1.22.4
$ encore dev-server --public http://inmogence.loc:80 --host 127.0.0.1
Running webpack-dev-server ...

ℹ ｢wds｣: Project is running at http://inmogence.loc:80/
ℹ ｢wds｣: webpack output is served from http://inmogence.loc:80/build/
ℹ ｢wds｣: Content not from webpack is served from /shared/httpd/inmogence/symfony/public
ℹ ｢wds｣: 404s will fallback to /index.html
 DONE  Compiled successfully in 866ms                                             9:14:39 PM

 WAIT  Compiling...                                                               9:57:12 PM

 DONE  Compiled successfully in 73ms

So it look that its working.

My webpack.config.js:

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

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('app', './assets/js/app.js')
    //.addEntry('page1', './assets/js/page1.js')
    //.addEntry('page2', './assets/js/page2.js')

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // enables Sass/SCSS support
    //.enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())

    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()

    // uncomment if you use API Platform Admin (composer req api-admin)
    //.enableReactPreset()
    //.addEntry('admin', './assets/js/admin.js')
;

module.exports = Encore.getWebpackConfig();

And my package.json:

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.30.0",
        "core-js": "^3.0.0",
        "regenerator-runtime": "^0.13.2",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server --public http://inmogence.loc:80 --host 127.0.0.1",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}

My build/manifest.json:

{
  "build/app.css": "http://inmogence.loc:80/build/app.css",
  "build/app.js": "http://inmogence.loc:80/build/app.js",
  "build/runtime.js": "http://inmogence.loc:80/build/runtime.js",
  "build/vendors~app.js": "http://inmogence.loc:80/build/vendors~app.js"
}

And my entrypoints.json:

{
  "entrypoints": {
    "app": {
      "js": [
        "http://inmogence.loc:80/build/runtime.js",
        "http://inmogence.loc:80/build/vendors~app.js",
        "http://inmogence.loc:80/build/app.js"
      ],
      "css": [
        "http://inmogence.loc:80/build/app.css"
      ]
    }
  }
}

So any solution ?

[ptmrio]

tried a lot of things, including reverse proxy (similar to Nginx configs in devilbox Docs), exposing 8080 in docker-compose.yml etc, ... didn't get it to work.

So +1

[ptmrio]

Finally I was able to manage this. So this works now somewhat perfect, with a few sideeffects, see below:

First, your start command needs to look something like this: encore dev-server --https --host 0.0.0.0

Note: Symfony does still output localhost if I only configure host in webpack.config.js, also --https needs to be included here for the same reason.

Also tell Devilbox to listen for the webpack-dev-server Port, create a docker-compose.override.yml from the devilbox example file and add the ports to the php container:

version: '2.3'

################################################################################
# SERVICES
################################################################################
services:

  # .....

  # ------------------------------------------------------------
  # PHP
  # ------------------------------------------------------------
  php:
    image: devilbox/php-fpm:${PHP_SERVER}-work-0.109
    hostname: php
    # add ports for webpack dev-server
    ports:
      - "8080:8080" 

Third, for the websocket, add some configuration to Encore in webpack.config.js

    .configureDevServerOptions(options => {
        options.client = {
            host: '0.0.0.0'
        };
        options.firewall = false;
        options.https = true;
    })

The only problem is that the browser marks the page as insecure, as the default webpack-dev-server certificate is only signed for localhost or 127.0.0.1, but not 0.0.0.0. Any suggestions?

Temp fix: open a single created file, like https://0.0.0.0/runtime.js in the browser and add an Exception to the SSL warning.

Webpack Encore 1.0.4 Webpack 5.20.1 Webpack-dev-server: 4.0.0-beta.0 Devilbox 1.7.1

[raulbethencourt]

Thanks. Have you lunch encore dev-server inside php container ?

[ptmrio]

yes, its inside the PHP container.

Forgot to mention, you will also have to update/create docker-compose.override.yml with Ports for PHP container, I'll update my answer ASAP

[raulbethencourt]

Sorry, can you give me the code that you have write in your docker-compose.oveerride.yml ? Thanks

[ptmrio]

I edited my first comment with all the info needed. Also note the versions. Webpack dev server 4 has quite some breaking changes.

[ptmrio]

Hey, @raulbethencourt does it work?

for docker-compose.override.yml you could cp docker-compose.yml docker-compose.override.yml and then simply add this to the php section:

    ports:
      - "8080:8080" 

Still works for me, however its a bit nasty, cause I'll have to add an certificate exception to my browser every now and then.

[raulbethencourt]

Sorry ptmrio Ill check it tomorrow. i been working in other projects and I haven't give it the time. Ill tell you tomorrow. But thanks a lot

[raulbethencourt]

Hi ptmrio. I'm triying but its not working.

devilbox@php-7.4.10 in /shared/httpd/plataform/plataform/public $ yarn dev-server                        │
yarn run v1.22.5                                                                                         │
$ encore dev-server --https --host 0.0.0.0                                                               │
Running webpack-dev-server ...                                                                           │
                                                                                                         │
  WARNING   Webpack is already provided by Webpack Encore, also adding it to your package.json file may c│
ause issues.                                                                                             │
  WARNING   Webpack Encore requires version ^8.0.0 of sass-loader. Your version 10.0.2 is too new. The re│
lated feature *may* still work properly. If you have issues, try downgrading the library, or upgrading En│
core.                                                                                                    │
  WARNING   Webpack Encore requires version ^8.0.0 of sass-loader. Your version 10.0.2 is too new. The re│
lated feature *may* still work properly. If you have issues, try downgrading the library, or upgrading En│
core.                                                                                                    │
ℹ ｢wds｣: Project is running at https://0.0.0.0:8080/                                                     │
ℹ ｢wds｣: webpack output is served from https://0.0.0.0:8080/build/                                       │
ℹ ｢wds｣: Content not from webpack is served from /shared/httpd/plataform/plataform/public                │
ℹ ｢wds｣: 404s will fallback to /index.html                                                               │
 DONE  Compiled successfully in 5221ms       

I'm geting this error if i dont add anithing in webpack.config.js. And.

devilbox@php-7.4.10 in /shared/httpd/plataform/plataform/public $ yarn dev-server                        │
yarn dev-server                                                                                          │
yarn run v1.22.5                                                                                         │
$ encore dev-server --https --host 0.0.0.0                                                               │
Running webpack-dev-server ...                                                                           │
                                                                                                         │
  WARNING   Webpack is already provided by Webpack Encore, also adding it to your package.json file may c│
ause issues.                                                                                             │
  WARNING   Webpack Encore requires version ^8.0.0 of sass-loader. Your version 10.0.2 is too new. The re│
lated feature *may* still work properly. If you have issues, try downgrading the library, or upgrading En│
core.                                                                                                    │
  WARNING   Webpack Encore requires version ^8.0.0 of sass-loader. Your version 10.0.2 is too new. The re│
lated feature *may* still work properly. If you have issues, try downgrading the library, or upgrading En│
core.                                                                                                    │
error Command failed with exit code 1.                                                                   │
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 

this error if i add the lines into the webpack.config.js

[raulbethencourt]

I also did everything you put about docker-compose.override.yml

  networks:
      app_net:
        ipv4_address: 172.16.238.100

  # ------------------------------------------------------------
  # PHP
  # ------------------------------------------------------------
  php:
    image: devilbox/php-fpm:${PHP_SERVER}-work-0.112
    hostname: php
    ports:
      - "8080:8080"

    ##
    ## All .env variables
    ##
    ## Source all variables defined in .env
    ## This also makes any custom variable available in each PHP/HHVM container
    ##
    env_file:
      - ./.env

[legionth]

Thank you @ptmrio the --host 0.0.0.0 did it for me!