Chapters

20 Chapters | 1:53:05 |

01

Setting up our Symfony App

4:34
02

Getting to Know our Tiny Project

4:14
03

Routes, Controllers & Responses

6:17
04

Magical Flex Recipes

5:40
05

Twig & Templates

8:12
06

Twig Template Inheritance

3:50
07

Debugging with the Amazing Profiler

4:28
08

Creating JSON API Endpoints

7:17
09

Services: The Backbone of Everything

7:47
10

Creating your own Service

7:04
11

Fancier Routes: Requirements, Wildcards, and More

6:56
12

Generating URLs

5:31
13

CSS & JavaScript with Asset Mapper

6:17
14

Tailwind CSS

6:15
15

Twig Partials & for Loops

2:44
16

PHP Enums

3:30
17

Smart Model Methods & Making the Design Dynamic

4:44
18

Stimulus: Writing Pro JavaScript

8:00
19

Turbo: Your Single Page App

4:32
20

Maker Bundle: Let's Generate Some Code!

5:13

> Symfony > Cosmic Coding with Symfony 7

13.

CSS & JavaScript with Asset Mapper

|

|

Autoplay

Previous Challenge

Next Challenge

Login or Register to check out the script

15 Comments

Sort By

Login or Register to join the conversation

MartinE 2 years ago edited

Hi, I'm on Debian12 with Symfony7.1 I dont kow if that make any difference but
when I execute this command in terminal:

composer require symfony/asset-mapper

I recieve this error at the end of the recipe installer:

Executing script cache:clear [KO]
 [KO]
Script cache:clear returned with error code 1
!!  
!!  In DecoratorServicePass.php line 88:
!!                                                                                 
!!    The service "asset_mapper.asset_package" has a dependency on a non-existent  
!!     service "assets._default_package".                                          
!!                                                                                 
!!  
!!  
Script @auto-scripts was called via post-update-cmd

Symfony server: The service "asset_mapper.asset_package" has a dependency on a non-existent service "assets._default_package".

BUT, when I run:

composer require symfony/asset-mapper symfony/asset

everything goes well with this extra recipe (symfony/asset) as specified in:
https://symfonycasts.com/screencast/asset-mapper/install?playAt=28.188311
I hope this helps if sombody have the same problem

6 |

Victor SFCASTS MartinE 2 years ago

Hey Martin,

Thanks for this tip! Did you download the course code from this page and start from the start/ directory? I see we're using Symfony v7.0 in this course while you mentioned you're on 7.1 which means you may start a new project from scratch on the latest Symfony version. If so, yes, you need to bring that package as well as you did in your last command. That package was already pre-installed in the course project code, that's why it works out of the box. Though following our courses on a newer Symfony is OK and it's up to users, we do recommend to follow them by downloading the course code and start from the start/ dir.

Cheers!

1 |

MartinE Victor 2 years ago

I had not realized that I was using Symfony 7.1, I like to do the project from scratch, so I will understand it better, I am very new to this, also finding problems and solving them makes me learn :). I'm already on unit 18 and everything works fine. Thank you :) .

|

Victor SFCASTS MartinE 2 years ago

Hey Martin,

No problem :) Yeah, sure, it's up to you! You indeed can follow the course on a newer Symfony version. We usually add notes to the video and scripts when something is changed in a newer version that should help to users. But if you ever get stuck following our courses on a newer version - feel free to ask for help in the comments below the video and our support team will help you. You will miss some reconfiguration content this way that we prepared to for the tutorial start, we usually add some files to the empty Symfony project to make it nicer and save some times during the course, but with some little copy/paste I think you can easily bring that code into your empty project.

Cheers!

1 |

Mahmut-A 1 year ago

hello,

I have 2 questions about asset.

If I use asset function, do I have to put css, css,images files under assets directory? As far as I make test, I see, if I put images under assets directory, it is being versioned. however, if images are under public directory, I did not notice versioning.
I have a url route, which is /index. this is rendering main page. however, I wanted to test that, if I use /mahmut/index route, page is opening without css or js.. When I search, I found that all css,js must be called by asset(), instead of hardcoded path of files. could you please tell what is logic of this? when I convert them to {{asset()}}, mahmut/index url worked well.

|

sadikoff Mahmut-A 1 year ago

Hello,

yep ideally you should have all assets under assets/ folder and then Symfony can process them and add versioning and so on
the logic as I said previously to process them correctly add versioning and correct paths in case you change your app folder so you can have more ways to configure and serve your app

Cheers!

|

Thomas-H 1 year ago

First of all - thank you very much for the great tutorial. It definitely makes me want to do more.

However, there is a problem with Twig and the asset maker. You can see this in the video at 03:54 (base.html.twig, line 15): asset() marks the file 'images/starshop-logo.png' as “Missing asset”, recognizable by the yellow background. Autocompletion does not work either, only “index.php” is suggested here. This can also be seen again and again in the following videos of the course.

I have already tried a few things, for example deleting the .idea folder and creating a new one, but the problem persists.

BUT! When I download your finished project and open it in PhpStorm, everything works perfectly (then it is base.html.twig, line 19), here I also have autocomplete available. What is different here?

Many thanks in advance!

|

Victor SFCASTS Thomas-H 1 year ago

Hey Thomas,

Hm, difficult to say, you would probably need to compare both projects locally to see the difference. It might be so that PhpStorm just didn't finish the indexing of your project yet? Follow that path in the public/ dir, i.e. make sure you have that public/images/starshop-logo.png file there. Also, you might need to compile your assets with bin/console asset-map:compile to physically moved those files to the public/ dir. Also, make sure you have the Symfony PhpStorm plugin installed, enabled, and configured properly. But if those files are already in the public/ dir and it still does not autocomplete - try to restart your PhpStorm IDE maybe, not sure what else might be wrong.

Cheers!

|

Thomas-H Victor 1 year ago

Hello Victor,

Thank you for your quick and detailed reply. I will probably invest a little more time and try to find out what the problem is. If I have any news, I'll let you know.

Cheers!

|

John-S 2 years ago

I also had the same error that was mentioned by user martinE.

Question about git reset:
Nevertheless I ran into another problem. Let say I only installed symfony/asset-mapper(without symfony/asset).
At this point my whole script with all the routes is completely broken and I can't even run php/bin console commands. I get cmd error:

C:\xampp\htdocs\sfdem>php bin/console
In DecoratorServicePass.php line 88:
  The service "asset_mapper.asset_package" has a dependency on a non-existent service "assets._default_package".

and browser error:

Symfony\Component\DependencyInjection\Exception\
ServiceNotFoundException

I ran
git reset --hard HEAD
and
git clean -fd
I also tried:
git reset --hard 14546d1(my previous safe save)

It deleted all the 'asset mapper' files from staging area and project folder. My git head is at my previous commit before installing asset -mapper. Nevertheless my script is still broken. If I haven't googled the solution that i need to install symfony/asset i would be completely stuck at this point(with the previous 2 errors mentioned). It's a big problem in the sense that If I ran into the same problem in the future and can't google the solution my whole work will be broken.

Why didn't my git reset worked ?

|

Victor SFCASTS John-S 2 years ago edited

Hey John-S,

If you rollback some files with Git, you still may need to clear the cache... also, you may need to rerun "composer install" and "yarn install --force" commands as well if you rollback some changes related to a new package installation. The reason is that some folders like Composer's vendor/ and NodeJS's node_modules/ are git-ignored, and so Git do not roll back files in there that were added/changed, so to keep them, in sync with the rollback-ed composer.lock and yarn.lock files you need to rerun those commands.

I hope that helps!

Cheers!

|

Adam-E 2 years ago

Hi there! Unfortunately the video cuts right after the Exception shows up at 6:17, I'm pretty sure we're missing 1 or 2 minutes of explanations according to the script.

Thank you again for this tutorial!

|

MolloKhan SFCASTS Adam-E 2 years ago edited

Hey @Adam-E

Are you talking about this chapter? I see it finishes where it should be and the next video continues exactly where this one ends.

Did I miss anything?

1 |

Adam-E MolloKhan 2 years ago edited

Hello @MolloKhan

I'm sorry, I don't know why yesterday my video ended right after the Exception "Did you forget to run composer require symfony/asset. Unknown function "asset"."

Everything seems to work perfectly now !

Thank you for reactivity

|

MolloKhan SFCASTS Adam-E 2 years ago

It could have been a Vimeo outage. That's where we store our videos :)

|

This tutorial works perfectly with both Symfony 7 & 8!

Symfony 7

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "php-cs-fixer/shim": "^3.46", // v3.46.0
        "phpdocumentor/reflection-docblock": "^5.3", // 5.3.0
        "phpstan/phpdoc-parser": "^1.25", // 1.25.0
        "symfony/asset": "7.0.*", // v7.0.3
        "symfony/asset-mapper": "7.0.*", // v7.0.2
        "symfony/console": "7.0.*", // v7.0.2
        "symfony/dotenv": "7.0.*", // v7.0.2
        "symfony/flex": "^2", // v2.4.3
        "symfony/framework-bundle": "7.0.*", // v7.0.2
        "symfony/monolog-bundle": "^3.0", // v3.10.0
        "symfony/property-access": "7.0.*", // v7.0.0
        "symfony/property-info": "7.0.*", // v7.0.0
        "symfony/runtime": "7.0.*", // v7.0.0
        "symfony/serializer": "7.0.*", // v7.0.2
        "symfony/stimulus-bundle": "^2.13", // v2.13.3
        "symfony/twig-bundle": "7.0.*", // v7.0.0
        "symfony/ux-turbo": "^2.13", // v2.13.2
        "symfony/yaml": "7.0.*", // v7.0.0
        "symfonycasts/tailwind-bundle": "^0.7.1", // v0.7.1
        "twig/extra-bundle": "^2.12|^3.0", // v3.8.0
        "twig/twig": "^2.12|^3.0" // v3.8.0
    },
    "require-dev": {
        "symfony/debug-bundle": "7.0.*", // v7.0.0
        "symfony/maker-bundle": "^1.52", // v1.53.0
        "symfony/stopwatch": "7.0.*", // v7.0.0
        "symfony/web-profiler-bundle": "7.0.*" // v7.0.2
    }
}

Previous Challenge

Next Challenge