Symfony Webpack not working server return 404 in CSS/JS

I working on Symfony project but when I want implement Tailwind I have problem when I want render images it return 404.. I went through the whole internet and found no answer please help me

btw. Rendering Image through url also not working

webpack.config.js

const path = require('path');

// 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
    .setOutputPath('public/build/')
    .setPublicPath(Encore.isProduction() ? '/build' : '/test/public/build')
    .copyFiles([
        {
            from: './assets/images',
            to: 'images/[path][name].[ext]',
        }
    ])
    .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;
    })
    .enableSassLoader()
    .enablePostCssLoader((options) => {
        options.postcssOptions = {
            // the directory where the postcss.config.js file is stored
            config: './postcss.config.js',
        };
    })
    .splitEntryChunks()
    .setPublicPath('/build')
;

module.exports = Encore.getWebpackConfig();

tailwind.config.js

    purge: [
        './templates/**/*.html.twig',
        './assets/**/*.css',
        './assets/**/*.js',
        './assets/**/*.vue',
    ],
    media: false,
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],

}

assets/app.js

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.css';

// start the Stimulus application
import './bootstrap';

twig usage

<div class="flex justify-center mr-16">
                                <img class="h-12 align-middle rounded-full" src="{{ asset('images/avatar.png') }}" alt="">
                            </div>

Answer

Ok so I fixed it, I don’t know why, but I found this https://github.com/EresDev/HandwerkerFullstack/commit/3a1d9baf2caacf8e4b27404b111d47da1bd67a68

and just changed

.setPublicPath(Encore.isProduction() ? '/build' : '/test/public/build')

.setPublicPath('/build')

Maybe it will help

Advertisement

Answer