Chapters

23 Chapters | 2:07:02 |

01

A World without Build Systems?

4:04
02

Doing Modern JS Right in your Browser

7:41
03

Installing AssetMapper

3:03
04

Mapping Assets

6:01
05

CSS & Background Images

3:26
06

3rd Party CSS

6:09
07

Adding Fonts

3:02
08

Tailwind CSS

5:47
09

JavaScript & importmap

7:38
10

importmap:require - 3rd Party JS Libs

5:07
11

Importing Specific Package Files

4:54
12

Adding Stimulus

8:04
13

Symfony UX Stimulus Packages

4:00
14

Lazy Stimulus Controllers

2:28
15

Debugging

5:12
16

Page-Specific CSS & JS

5:05
17

Excluding Files

3:53
18

Deploying to Platform.sh

6:29
19

Configuring the Platform.sh Deploy

9:08
20

Deploying the Assets

5:04
21

Long-Term Caching, Compression & File Combining

5:27
22

Optimizing & Profiling

6:06
23

Preloading

9:14

> Symfony > AssetMapper: Modern JS with Zero Build System

Buy Access to Course

23.

Preloading

|

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Challenge

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

6 Comments

Sort By

Login or Register to join the conversation

Diarill 2 years ago

Hello SymfonyCast and thank you for this tutorial.
I would also like to know why the symfony console importmap:require @fullcalendar/core command does not import the fullcalendar/main.css file?

|

weaverryan SFCASTS Diarill 2 years ago

Hey @Diarill!

Apologies for my super slow reply! That's a good question :). This is kind of up to the library. So let's look at the @fullcalendar/core library - specifically the package.json file - https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.11/package.json

There are a few important keys in here, like main and module, which specify the main JavaScript file under specific situations. What they don't have here is the style key. That is a way to advertise a main CSS file for the package. And that's what AssetMapper relies on for the automatic installation of a CSS file when requiring a JS package. For example, you can see a style key in bootstrap's package.json file - https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/package.json

Does that help?

Cheers!

|

julien_bonnier 2 years ago

Hey friends,

I finished the course but I'm still wondering, what is the best way to use AssetMapper with EasyAdmin?

Should I override EA templates so I can use AssetMapper or is there a better way?

I see that EasyCorp\Bundle\EasyAdminBundle\Config\Assets has a addWebpackEncoreEntry() method, but it doesn't seem to have something for AssetMapper just yet...

Best,

Ju

|

Victor SFCASTS julien_bonnier 2 years ago

Hey Ju,

Hm, fairly speaking, I'm not sure about the best way because I didn't work with it yet. But take a look at this thread maybe: https://github.com/EasyCorp/EasyAdminBundle/issues/5843 - it might be useful for you as relates to AssetMapper. But yeah, maybe there will be a better integration in the future, feel free to suggest your ideas on EA repo if you have some or open a PR.

Cheers!

|

julien_bonnier Victor 2 years ago

Hey Victor,

So far, I simply extended the layout.html.twig template from the bundle and it works just fine, but I think this is something that should be implemented in the bundle itself.

{# templates/bundles/EasyAdminBundle/layout.html.twig #}

{% extends '@!EasyAdmin/layout.html.twig' %}

{% block head_javascript %}
    {{ parent() }}
    {{ importmap() }}
{% endblock %}

This application is only an admin panel (no front office).

Some people might want to use something different such as {{ importmap('admin') }} on a more standard app.

Cheers!

1 |

Victor SFCASTS julien_bonnier 2 years ago edited

Hey @julien_bonnier ,

Yeah, makes sense to me, it would be good to have it out of the box. Though not sure how to make it more dynamic, not all people use importmaps. If you have some ideas with a universal solution - feel free to open a PR to the bundle.

And thanks for sharing your solution with others, might be useful.

Cheers!

|

This tutorial is built on Symfony 6 but works great on Symfony 7!

Symfony 6.3

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "^4.0", // v4.2.0
        "doctrine/doctrine-bundle": "^2.7", // 2.10.0
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.2.4
        "doctrine/orm": "^2.12", // 2.15.2
        "knplabs/knp-time-bundle": "^1.18", // v1.20.0
        "pagerfanta/doctrine-orm-adapter": "^4.0", // v4.1.0
        "pagerfanta/twig": "^4.0", // v4.1.0
        "stof/doctrine-extensions-bundle": "^1.7", // v1.7.1
        "symfony/asset": "6.3.*", // v6.3.0
        "symfony/asset-mapper": "6.3.*", // v6.3.0
        "symfony/console": "6.3.*", // v6.3.0
        "symfony/dotenv": "6.3.*", // v6.3.0
        "symfony/flex": "^2", // v2.3.1
        "symfony/framework-bundle": "6.3.*", // v6.3.0
        "symfony/http-client": "6.3.*", // v6.3.0
        "symfony/monolog-bundle": "^3.0", // v3.8.0
        "symfony/proxy-manager-bridge": "6.3.*", // v6.3.0
        "symfony/runtime": "6.3.*", // v6.3.0
        "symfony/stimulus-bundle": "^2.9", // v2.9.1
        "symfony/twig-bundle": "6.3.*", // v6.3.0
        "symfony/ux-turbo": "^2.9", // v2.9.1
        "symfony/web-link": "6.3.*", // v6.3.0
        "symfony/yaml": "6.3.*", // v6.3.0
        "twig/extra-bundle": "^2.12|^3.0", // v3.6.1
        "twig/twig": "^2.12|^3.0" // v3.6.1
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.4
        "symfony/debug-bundle": "6.3.*", // v6.3.0
        "symfony/maker-bundle": "^1.41", // v1.49.0
        "symfony/stopwatch": "6.3.*", // v6.3.0
        "symfony/web-profiler-bundle": "6.3.*", // v6.3.0
        "zenstruck/foundry": "^1.21" // v1.33.0
    }
}

Previous Chapter

Next Challenge