> Symfony 6 >

Course Overview

AssetMapper: Modern JS with Zero Build System

  • 979 students
  • EN/ES Captions
  • EN/ES Script
  • Certificate of Completion

Your Guides

About this course

Ever wanted to just... write modern JavaScript and have it work without needing to fuss with a build system?

Me too! And finally - thanks to advances in the web, web servers & new component from Symfony, it's possible! Hello AssetMapper! In this tutorial, we'll:

  • The basics of modern JavaScript in a browser, why & how things finally "just work" & shim
  • Installing the new AssetMapper component
  • Understanding asset "logical paths" & versioning
  • Working with the new importmap.php file & importmap:require
  • Using CSS, along with pre-processors like Sass or Tailwind
  • Adding StimulusBundle & 3rd party UX controllers
  • Lazy Stimulus controllers!
  • Finding package files and (optionally) downloading them
  • Page-specific CSS & JS
  • Deploying!
  • Measuring & tweaking performance + preloading

With AssetMapper, it's back to the beautiful basics of coding, refreshing and getting back to work.

Next courses in the Symfony 6: Tools, Tools, Tools! section of the Symfony 6 Track!

11 Comments

Sort By
Login or Register to join the conversation
Milica-S avatar Milica-S 5 days ago

Hi! How can I dynamically load versioned images in my JavaScript file, specifically using jQuery? I'm looking to incorporate images into my webpage via JavaScript, and I'm curious about the best approach for accessing images with versioning applied.

| Reply |

Hey @Milica-S!

That's an excellent question! Currently, it's not possible with AssetMapper - and maybe it will never be. In Webpack Encore, you can import images to get their versioned filename... but that's really a Webpack trick: it doesn't make sense in a browser environment to import images.

And, it is probably ok that this doesn't work :). There are 2 alternative solutions:

1) Pass the image filenames to your JavaScript. If using Stimulus, you would do this with values - https://stimulus.hotwired.dev/reference/values - e.g.

<div
    {{ stimulus_controller('gallery', {
        images: images
    }) }}
>

Where images is an array of the image filenames. To populate this in a controller, you should be able to autowire the Symfony\Component\Asset\Packages and pass the "logical path" to any of your images.

2) An even BETTER approach is just to... generate the <img> tags in Twig. Even if you wanted to do something fancy with your images in JavaScript, you could still start with all of the <img> tags in Twig - e.g.

<div data-controller="gallery">
    <img src="{{ asset('logical-path1.png') }}">
    <img src="{{ asset('logical-path2.png') }}">
</div>

If you need to do something specifically with the <img> tags, you could use Stimulus targets to easily fetch those items.

So, this feature doesn't exist, but that's in part because we're embracing passing things TO JavaScript or, better, rendering the HTML in Twig instead of JavaScript.

Cheers!

| Reply |
BigBenJr avatar BigBenJr 12 days ago

Thanks for the tutorial. But I wonder if enabling versioning for images is a good idea in a SEO perspective for 2 reasons:

1) If I want my pictures to be well ranked on Google image, it would be bad if the url changed every time I do a slight modification on the image (for example correction of an error or improving quality of the image). I guess that to get a good position on google search, images are like web pages, you don't want them to change their url but be stable as pyramid.

2) Bu the way my images already exist in my website without any version number in their name. So if I decide now to enable versioning, all url will change ! My google ranking will collapse and will have to restart from scratch, is that correct ?

| Reply |

Is it possible (would you recommend) using react or vue, ux-turbo, stimulus, assetmapper AND webpack encore at the same time in one project? I really like assetmapper so i want to use it in my new project but i also would like to keep my "react or vue-parts" in my new project. I understand that for vue i nee a build system (in this case webpack encore). Can i use it next to eachother like standalone modules or should there be some other method to make sure they can live next to eachother in the same project? If i check the symfony docs it seems that react is easier to handle with assetmapper. Is it then possible to use react without a build system?

| Reply |

Hey @lexhartman!

Good question! You can use vue, ux-turbo, stimulus, etc with Webpack Encore just fine. So the REAL question is: can I use Encore & AssetMapper in the same project. The answer is: theoretically yes, but I wouldn't recommend it. They weren't designed with this in mind, so you would likely need to do some manual, weird stuff to get them to play together nicely.

I really like assetmapper so i want to use it in my new project but i also would like to keep my "react or vue-parts" in my new project

Get rid of those parts ;). Ok, real answer: you DO need a build system still for React and Vue. React is actually fairly easy: you just need something to convert the .jsx files to .js files... then those can be served directly via AssetMapper. We do this on ux.symfony.com. It's not ideal - but works - https://github.com/symfony/ux/blob/2.x/ux.symfony.com/package.json#L12

Vue is much harder, because the SFC can even contain styling. I actually could NOT figure out a way to make this work. Vue REALLY wants you to be inside a full build system like Vite or Webpack that handles JS, CSS, etc. In the end, for ux.symfony.com, I had to NOT use SFC - and instead use the template key: https://github.com/symfony/ux/blob/2.x/ux.symfony.com/assets/vue/controllers/PackageSearch.js

If i check the symfony docs it seems that react is easier to handle with assetmapper. Is it then possible to use react without a build system?

Actually, it's HARDER to use React with AssetMapper. Well, React isn't too bad. But the point is, React & Vue need a build. AssetMapper, by design, doesn't provide that. My overall advice these days is: (1) build a full SPA with something like React/Vue and use their tooling all the way and Symfony as an API OR (2) get rid of React/Vue and build a HTML-powered app like we do in the LAST Stack tutorial - https://symfonycasts.com/screencast/last-stack. That's what we do and it feels GREAT

Cheers!

1 | Reply |

Thanks for the comprehensive answer!

For my purpose i would prefer scenario 2 (get rid of React/Vue and build a HTML-powered app like we do in the LAST Stack tutorial). BUT i am lazy and i really like the https://jsonforms.io/ for quick and dynamic building forms/ questionnary's/ quizes (it uses React or Vue) instead of doing all the complex and hard work with entities and formtypes and so on. Is there any way (or maybe an alternative) that you can think of using this json formbuilder without React or Vue? Otherwise i am going for scenario 1 😅

| Reply |

Hey @lexhartman!

that you can think of using this json formbuilder without React or Vue?

I don't know that library, but I don't think there's anything quite the automatic. I don't mind Symfony's form types at all - but fair enough if you want to use something like this :). If you build this with React, you could still have a fairly simple path to scenario 1.

Cheers!

| Reply |
Ruslan avatar Ruslan 7 months ago

Hi. When we will test for Stymulus controllers? :)

| Reply |

Hey @Ruslan!

By "test for Stimulus controllers", you do mean actually write tests (e.g. unit/functional tests) for Stimulus controllers? If so, not in this tutorial - but that IS something we should chat about. We're releasing some testing courses, that should be part of it somewhere I realize 🤔.

2 | Reply |
Fabrice avatar Fabrice 7 months ago

Hello! I didn't know where to propose the idea, so I put it here:

A course to learn how to master DataTable with Symfony would be great! There are so many things to do with this library. Use Ajax, add fields at the top of each column to filter, add checkboxes, events.

All why not using Stimulus?

By the way, I've always wondered if it was possible to override EasyAdmin to use DataTables instead, and have it use Ajax requests.

In short, if one day you decide to create this course, it will be insane!

| Reply |

Hey @Fabrice

Thank you for your feedback! I'll share it with the team

By the way, I've always wondered if it was possible to override EasyAdmin to use DataTables instead and have it use Ajax requests.

Honestly, I don't know how hard/easy it would be to do so. I know you can override a bunch of stuff of EasyAdmin though

Cheers!

1 | Reply |

Delete comment?

Share this comment

astronaut with balloons in space

"Houston: no signs of life"
Start the conversation!