Question posted in
Some documentation to get you started can be found here.

Webpack Encore : Files are correctly generated but server return 404 error – Apache

I’ve intalled and configured webpack encore on a 4.3 Symfony app. CSS an JS are generated and path looks good but php return a 404 error on those files.

It work in another app, but cannot figure where is the problem

I put files in assets/css and asset/js.
When I run yarn run encore dev files are correctly copied to public/build/css and public/build/js

here is the output : 

 4 files written to public/build
Entrypoint js/app = js/app.css js/app.js
Entrypoint css/cover = css/cover.css

here is my webpack.config.js

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

Encore
    // the project directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')
    // the public path you will use in Symfony's asset() function - e.g. asset('build/some_file.js')
    .setManifestKeyPrefix('build/')

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

    // the following line enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // uncomment to define the assets of the project
    .addEntry('js/app', './assets/js/app.js')
    .addStyleEntry('css/cover', './assets/css/cover.css')

;

module.exports = Encore.getWebpackConfig();

The way I call files in base.html.twig :

{{ encore_entry_link_tags('css/cover') }}

and

{{ encore_entry_script_tags('js/app') }}

And my webpack_encore.yaml

webpack_encore:
    # The path where Encore is building the assets.
    # This should match Encore.setOutputPath() in webpack.config.js.
    output_path: '%kernel.project_dir%/public/build'

I expect the console of my brother stop showing

GET https://louboulangerie.fr/build/css/cover.css net::ERR_ABORTED 404 (Not Found)

Thanks

Edit : After days of searching, I found that if I disable the rewrite rule to https in my vhost, everything is fine. Any idea on how should I proceed ?

Tags:

2

Answers


  1. 0

    Most likely, the entry name is the problem.

    Change this :

    .addEntry('js/app', './assets/js/app.js')
.addStyleEntry('css/cover', './assets/css/cover.css')

    to this :

    .addEntry('app', './assets/js/app.js')
.addStyleEntry('cover', './assets/css/cover.css')

    Then import your assets like this:

    {{ encore_entry_link_tags('cover') }}
{{ encore_entry_script_tags('app') }}

    Furthermore, unless you really need it, you don’t need to add a special style entry.
    Doing this will have the same result :

    webpack.config.js

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

    app.js

    // I prefer to use import instead of require
import "../css/cover.scss";

    base.html.twig

    <head>
    {{ encore_entry_link_tags('app') }}
</head>
<body>
    {{ encore_entry_script_tags('app') }}
</body>
    Login or Signup to reply.
  2. 0

    Hi I can’t comment so I’m goignt to write an answer.

    Few months ago I’ve had the same problem.
    I was not doinf as you inside my twig. What I did was something like
    for exemple :

    <link rel="stylesheet" href="{{ asset("build/app.css") }}"/>

    This work for me. Maybe try to do this way could work for you ?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search