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

15.

Depurando

|

|

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

6 Comments

Sort By

Login or Register to join the conversation

Jamuel 1 year ago

Hi. I use phpStorm (lastest) and during dev all of my {{ asset() }} are marked as missing by the IDE (squiggly underlines under the asset's name and path). FWIW I have the symfony plugin enabled as well.

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

But as soon as I compile the assets with symfony console asset-map:compile the missing assets are "found". Are there any tricks to get phpstorm to find the assets during dev?

|

MolloKhan SFCASTS Jamuel 1 year ago edited

Hey @Jamuel

Have you tried reindexing your IDE? It may fix the issue "Settings -> Symfony -> Clear Index"

Cheers!

|

Jamuel MolloKhan 1 year ago

Yes--I've tried that. Can you confirm the correct behavior?

|

MolloKhan SFCASTS Jamuel 1 year ago

I just gave it a try. Sadly, it does not work. I believe the Symfony plugin does not support it yet, and it makes sense because those assets are loaded dynamically in the dev environment

|

bremic 2 years ago

Hi Folks, I have a question that I hope someone can give me a tip on:

I have installed Asset Mapper in an existing project and added a css file and a test image as described. In the source code, the css file and the test image have a version hash. Nevertheless, I get a 404 error in the console for both files. In the Symfony Profiler under "last 10" the assets are not listed. When I run "php bin/console asset-map:compile", the image and CSS are loaded.

Does anyone have an idea what I could be doing wrong?

|

weaverryan SFCASTS bremic 2 years ago

Yo @bremic!

I have some ideas :). First:

In the Symfony Profiler under "last 10" the assets are not listed

That was an awesome idea to debug! However, because they can cause a lot of noise in the profiler, even though the requests for the assets are handled by Symfony in dev, they are not profiled. So those not showing up here is normal.

Anyway, my best guess is that the URLs are correct, but they're not being processed by Symfony -e.g. due to some missing rewrite rule. For example, your browser requests /assets/styles/app-123456abcdef.css and, instead of that going through Symfony, your web server triggers a 404. Sometimes people will have their web server configured to not pass URLs ending in .css or .js through Symfony.

I would open one of these URLs in a new tab and see if that 404 comes from Symfony or your web server.

Let me know if this helps!

Cheers!

|

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