Webpack encore dev-server doesnt reload and doesnt recognize app.js

1

I’m trying to use dev-server in docker containers with devilbox .

Devilbox port: 80 and host: 127.0.0.1.

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 ?

2

Have you set the domain correctly. I mean is http://inmogence.loc accessible?

3

I dont understand what do you mean exactly. I can enter visit de page normaly. The problem is with dev-server only. And I open the port exactly. The only thing is that i dont know very well how to open the port in docker to has acces outside, but allso I’ve tried to run the command inside the php container and it doesn’t work neither.

4

The ports to the outside world can be set in .env file see: https://devilbox.readthedocs.io/en/latest/configuration-files/env-file.html?highlight=env#host-port-httpd

80 port is exposed by default.

This is not needed http://inmogence.loc:80 this is enough http://inmogence.loc

If you don’t have Auto-DNS you need to set in your hosts file
127.0.0.1 inmogence.loc

5

Hi. I have Auto-DNS but I’m gonna try without the port than package.json file.
Thanks