Search code examples
symfonytwigassets

Can't load assets on Symfony 4

I'm having trouble with a web app on Symfony 4

I created a twig template and I started to add some assets, in this case with a Js file to complete functionality. But when I go to the browser the Js file is not loading, its appear with 404 error

No route found for \"GET /public/test.js
ymfony\\Component\\Routing\\Exception\\ResourceNotFoundException in /srv/sso-gateway/var/cache/dev/srcDevDebugProjectContainerUrlMatcher.php:50\nStack trace:\n#0 /srv/sso-gateway/vendor/symfony/routing/Matcher/UrlMatcher.php(107):

This is my twig file

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}SSO - DIOCESAN!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
        <link rel="stylesheet" href="{{ asset('app.css') }}" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}
            <script src="../public/test.js"></script>
            {#<script src="{{ asset('assets/vendor/angular/angular.js') }}"></script>#}
        {% endblock %}
    </body>
</html>

As you can see, there are two files, test.js (in /public directory) and app.css (in /web dir), none of them is loading both throw 404 error, I don't know what I'm doing wrong.

I'm using FosRestBundle, I don't know if that error is related with FosRest config.

Here my FosRest config

fos_rest:
    allowed_methods_listener: true
    serializer:
        serialize_null: true
    body_listener:
        array_normalizer: fos_rest.normalizer.camel_keys
    body_converter:
        enabled: true
    disable_csrf_role: ROLE_API
    format_listener:
        rules:
            - { path: '^/sso/menu', priorities: ['html'], fallback_format: 'html', prefer_extension: false }
            - { path: '^/public/request-password', priorities: ['html'], fallback_format: 'html', prefer_extension: true }
            - { path: '^/', priorities: ['json'], fallback_format: 'json', prefer_extension: false }
    routing_loader:
        default_format:  json
        include_format: false
    view:
        view_response_listener: true
        formats:
            json: true
            xml: false
            rss: false
            html: true
        mime_types:
            json: ['application/json', 'application/x-json']
        jsonp_handler: false
    exception:
        enabled: true

Any suggestion? Thanks in advance.

Solution

  • You need to have all the assets in the public dir, not web.

    For this case:

    <script src="../public/test.js"></script>

    Try to add this for absloute url

    EDIT for mistake

    <script src="{{ app.request.schemeAndHttpHost }}/test.js"></script>

    For asset case, check this reference (or you could use the same method used in the last case):

    Including Assets (CSS, JS) in Symfony 4 / Twig Template