Chapters

23 Chapters | 2:07:02 |

01

¿Un mundo sin sistemas de construcción?

4:04
02

Hacer JS moderno directamente en tu navegador

7:41
03

Instalación de AssetMapper

3:03
04

Mapear Activos

6:01
05

CSS e imágenes de fondo

3:26
06

cSS de terceros

6:09
07

Añadir fuentes

3:02
08

CSS de Tailwind

5:47
09

JavaScript y mapa de importación

7:38
10

importmap:require - Libs JS de terceros

5:07
11

Importar archivos específicos de un paquete

4:54
12

Añadir Stimulus

8:04
13

Paquetes Symfony UX Stimulus

4:00
14

Controladores de Stimulus perezosos

2:28
15

Depurando

5:12
16

CSS y JS específicos de la página

5:05
17

Excluir archivos

3:53
18

Despliegue en Platform.sh

6:29
19

Configurar el despliegue de platform.sh

9:08
20

Desplegar los activos

5:04
21

Almacenamiento en caché a largo plazo, compresión y combinación de archivos

5:27
22

Optimización y perfiles

6:06
23

Carga previa

9:14

> Symfony > AssetMapper: JS Moderno sin Sistema de Compilación

Buy Access to Course

07.

Añadir fuentes

|

|

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 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

Amelielecoz 2 years ago

I confirm that the indexation issue on Jsdeliver has been fixed ! See here

1 |

Victor SFCASTS Amelielecoz 2 years ago edited

Hey @Amelielecoz ,

Thanks for confirming it! Great news :)

Cheers!

|

Sucram 2 years ago

Hi - I want to use the free fontawesome package. Therefore I have added it via bin/console importmap:require @fortawesome/fontawesome-free. But I only see the corresponding css file within the vendors folder. Do I have to manually download the font file and place it inside public/ or assets/?

|

weaverryan SFCASTS Sucram 2 years ago

Hey @Sucram!

For FontAwesome, I prefer to use their "kits" https://fontawesome.com/docs/web/setup/use-kit. And also, soon, we will release an icon package for Symfony UX so you can easily render svg icons (which are better for accessibility and performance) :).

But if you wanted to install it with importmap:require, what you want is a CSS file. And so you can't require @fortawesome/fontawesome-free, as that will always give you a JavaScript file (I'm not sure what that js file would be for fontawesome - but not what). For CSS files, I use jsdelivr to browse the package - https://www.jsdelivr.com/package/npm/@fortawesome/fontawesome-free?tab=files - e.g. https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.css

To grab that file, run:

php bin/console importmap:require @fortawesome/fontawesome-free/css/all.css

Iirc, that will also download the font files needed.

Let me know if that helps!

Cheers!

|

Sucram weaverryan 2 years ago edited

Hi @Ryan,
thanks for your detailed response!

php bin/console importmap:require @fortawesome/fontawesome-free/css/all.css

That totally did it.

Up to now I used webpack together with yarn and I was a little bit confused because yarn fetches the complete package with all files and at first glance importmap:require seems to be a equivalent for me.

Anyway - I have to get used to the asset mapper and have to take a deeper look into the documentation.
Thanks for your feedback and btw - I really love your tutorials!

Cheers - Marcus!

|

Rufnex 2 years ago

i wonder how to proceed to store the fonts locally and not retrieve them from a CND.

|

sadikoff Rufnex 2 years ago

Hey @Rufnex,

You can just download any font you need to you public/ or assets/ directory and create your own css file to use them

Cheers!

1 |

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 Chapter