CODEWITHSUNDEEP
symfonywebpacktwigsymfony7
user3296316
user3296316

Reputation: 157

Symfony 7 assets are loaded with wrong context path

I am developing a web application with Symfony 7.0. I have a given UI template (Velzon). There is a public/assets folder as well as a assets on top. No I have created a simple Controller with the path /user/list. I want to render the template user_admin/list.html.twig.

In the template, which should be rendered, are css/js like this:

<!-- Layout config Js -->
<script src="assets/js/layout.js"></script>
<!-- Bootstrap Css -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- Icons Css -->
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<!-- App Css-->
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" />
<!-- custom Css-->
<link href="assets/css/custom.min.css" rel="stylesheet" type="text/css" />

When I call a route with /, all assets are loaded correctly. When I call the new controller /user/list, no assets can be loaded because the files could not be found, e.g.

list:15 
 GET http://localhost:8000/user/assets/libs/jsvectormap/css/jsvectormap.min.css net::ERR_ABORTED 404 (Not Found)
list:17 
 GET http://localhost:8000/user/assets/libs/swiper/swiper-bundle.min.css net::ERR_ABORTED 404 (Not Found)

Every request to a resource has a prefix "user". I think, this is the reason why it is not working. Does anybody know how to solve this issue?

I think the project is using Webpack, here you can see the config:

// webpack.config.js
const Encore = require('@symfony/webpack-encore');
const RtlCssPlugin = require('rtlcss-webpack-plugin');

Encore
  .setOutputPath('public/assets/')
  .setPublicPath('/assets')
  .addEntry('app', './assets/scss/config/default/app.scss')
  .addEntry('bootstrap', './assets/scss/config/default/bootstrap.scss')
  .addEntry('icons', './assets/scss/icons.scss')
  .addEntry('custom', './assets/scss/config/default/custom.scss')
  .enableSingleRuntimeChunk()
  .enableSassLoader()
  .configureFilenames({
    css: 'css/[name].min.css',
  })

  .copyFiles({
    from: './assets/fonts',
    to: 'fonts/[name].[ext]',
  })

  .copyFiles({
    from: './assets/images',
    to: 'images/[path][name].[ext]',
  })

  .copyFiles({
    from: './assets/js',
    to: 'js/[path][name].[ext]',
  })

  .copyFiles({
    from: './assets/json',
    to: 'json/[name].[ext]',
  })

  .copyFiles({
    from: './assets/lang',
    to: 'lang/[name].[ext]',
  })

  .copyFiles({
    from: './assets/libs',
    to: 'libs/[path][name].[ext]',
  })

  /*
   * RTL CSS GENERATION
   */
  // .addLoader({
  //   test: /\.scss$/,
  //   use: [
  //     'css-loader',
  //     'sass-loader',
  //     {
  //       loader: 'sass-loader',
  //       options: {
  //         // rtlcss options, if needed
  //       },
  //     },
  //   ],
  // })

  // .webpackConfig({
  //   plugins: [
  //       new RtlCssPlugin()
  //   ],
  //   stats: {
  //       children: true,
  //   },
  // })

  .addPlugin(new RtlCssPlugin({
    filename: 'css/[name]-rtl.min.css',
  }))

  /*
   * FEATURE CONFIG
   */
  .cleanupOutputBeforeBuild()
  .enableBuildNotifications();

module.exports = Encore.getWebpackConfig();

Upvotes: 0

Views: 235

Answers (1)

Julien B.
Julien B.

Reputation: 3324

You should use Twig's asset function to get the correct path.

<!-- Layout config Js -->
<script src="{{ asset('assets/js/layout.js') }}"></script>
<!-- Bootstrap Css -->
<link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
<!-- Icons Css -->
<link href="{{ asset('assets/css/icons.min.css') }}" rel="stylesheet" type="text/css" />
<!-- App Css-->
<link href="{{ asset('assets/css/app.min.css') }}" rel="stylesheet" type="text/css" />
<!-- custom Css-->
<link href="{{ asset('assets/css/custom.min.css') }}" rel="stylesheet" type="text/css" />

Alternatively, you can prefix your paths with / if you're public directory is not in a sub-directory (ie /site).

But generally speaking, the asset function is there to ensure you have the correct path.

As mentioned by @DarkBee, you need the Twig Bridge for that, but chances are you already have it if you are using Twig, Encore, etc.

Upvotes: 0

Related Questions