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

12.

Adding Stimulus

|

|

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 Challenge

Next Chapter

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

7 Comments

Sort By

Login or Register to join the conversation

Ashraf-H 9 months ago edited

Rest in peace Ryan,
you will always be remembered thank you for educate me <3
i will be forever grateful

1 |

Singollo 2 years ago edited

I had a problem with installing symfony/stimulus-bundle using composer - the composer.lock locked twig on uncompatible version 3.6.1:

Problem 1
    - symfony/stimulus-bundle[v2.18.0, ..., v2.18.1] require twig/twig ^2.15.3|^3.8 -> found twig/twig[v2.15.3, ..., v2.16.0, v3.8.0, ..., v3.10.3] but the package is fixed to v3.6.1 (lock file version) by a partial update and that version does not match. Make sure you list it as an argument for the update command.
    - Root composer.json requires symfony/stimulus-bundle ^2.18 -> satisfiable by symfony/stimulus-bundle[v2.18.0, v2.18.1].

Fortunately, you can simple upgrade twig version: composer update twig/twig and then install stimulus-bundle as described

|

Victor SFCASTS Singollo 2 years ago edited

Hey @Singollo ,

We use symfony/stimulus-bundle v2.9.1 in the video, so to match the code in the video we recommend you install that exact version. For this, you would need to run:

composer require "symfony/stimulus-bundle:^2.9.1"

That command should work when you follow the tutorial from scratch, but if you already upgraded the twig/twig package - you need to downgrade it. Or you can follow the tutorial on a fresher version, but keen in mind of some possible changes.

The exact versions of packages that are used in the course project code you can easily see on this page:
https://symfonycasts.com/screencast/asset-mapper/stimulus#versions

Cheers!

1 |

MolloKhan SFCASTS Singollo 2 years ago edited

Hey @Singollo

Thank you for sharing your solution. We'll find a way to avoid that issue from happening in the tutorial code

Cheers!

|

Lubna 2 years ago

Thank you! All is clear, i was just wondering about how can I import (stimulus-use) for some features like "useClickOutside". Many thanks in advance :)

|

sadikoff Lubna 2 years ago edited

Hello @Lubna

Easy as any other JS package add it with php bin/console importmap:require 'stimulus-use' and use it as usual.

Cheers!

1 |

Lubna sadikoff 2 years ago

Just that easy! It works well, thanks a lot and have a nice day!

|

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 Challenge

Next Chapter