If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.
With a Subscription, click any sentence in the script to jump to that part of the video!
Login SubscribeAhora tenemos CSS -que estamos construyendo con Tailwind-, tenemos JavaScript, estamos incorporando JavaScript de terceros y estamos utilizando sintaxis JavaScript moderna. ¡Nuestra aplicación tiene todo lo que tiene una aplicación real! Claro, es un poco pequeña, pero estamos casi listos para desplegarla.
Antes de hacerlo, hagamos una rápida auditoría de los activos que están dentro de AssetMapper. Busca tu terminal y ejecuta:
php bin/console debug:asset
Esto enumera todas nuestras rutas de activos, que incluyen nuestra ruta de activos principal - assets/
- más algunas de bundles que han expuesto sus propios directorios. A continuación se muestra una lista de todos los archivos que se expondrán públicamente.
Ejecutamos este comando para ver si hay algo en esta lista que no queramos exponer públicamente. Por ejemplo, este archivo assets/styles/app.css
. Esto es realmente un archivo fuente: no está pensado para que el usuario lo descargue directamente. Estamos utilizando Tailwind para incorporarlo a app.tailwind.css
, y eso es lo que el usuario descargará. No es un gran problema que esté disponible públicamente, pero es un buen ejemplo de cómo podemos ocultar archivos "fuente" que no queremos exponer.
Empieza ejecutando
php bin/console config:dump framework asset_mapper
Estamos pidiendo al sistema que nos dé ejemplos de configuración para todo lo que se puede configurar en framework
, asset_mapper
. Cuando instalamos AssetMapper por primera vez, su receta nos dio un archivo config/packages/asset_mapper.yaml
. Aquí tenemosframework
, asset_mapper
, y una clave llamada paths
. Cuando ejecutamos este comando... efectivamente, aquí arriba aparece paths
. Debajo, tenemos otras cosas interesantes.
La primera es excluded_patterns
. Así es como vamos a ocultar determinados archivos o rutas, y hablaremos más de ello en un minuto. También puedes controlar elpublic_prefix
, que es a donde salen tus archivos en el directorio public/
.
Este extensions
no es superimportante... es sobre todo para el entorno dev
... y hay algunas cosas más como tu importmap_path
, e incluso algunos atributos que puedes poner en la etiqueta <script>
que es volcada por la función importmap()
.
Hay algunas cosas buenas aquí... pero no tendrás que preocuparte de la mayoría de ellas, aparte de excluded_patterns
.
Copia esa clave, gira hasta asset_mapper.yaml
, y en el mismo nivel que paths
, pega. Queremos excluir assets/styles/app.css
.
framework: | |
asset_mapper: | |
... lines 3 - 5 | |
excluded_patterns: | |
- 'assets/styles/app.css' |
Pero esto no es del todo correcto. Para comprobarlo, ejecuta
php bin/console debug:asset
de nuevo. Si miras hacia arriba... ¡ assets/styles/app.css
sigue ahí! Eso es porqueexcluded_patterns
debe ser un glob. En otras palabras, cámbialo por*/assets/styles/app.css
... y rodéalo de comillas.
framework: | |
asset_mapper: | |
... lines 3 - 5 | |
excluded_patterns: | |
- '*/assets/styles/app.css' |
Esto significa que se ignorará cualquier "ruta del sistema de archivos" que termine en /assets/styles/app.css
. Y cuando volvamos a probar el comando...
php bin/console debug:asset
Genial. Esto es lo que queremos ver. Todos los archivos que estén aquí se volcarán en el directorio/public/assets
. El hecho de que assets/styles/app.css
no esté aquí significa que no se volcará en el directorio public/
.
¡Creo que es hora de desplegar nuestro sitio! Vamos a configurar un despliegue a continuación en plataforma.sh.
Hey @jmsche!
Ah yes - do not add excluded_patterns
if you're using the bundle. That bundle is slick: you DO want assets/styles/app.css
to be included in the asset mapper. The clever part from the bundle is that the contents of this are "intercepted" and the final, built contents are swapped in. So, assets/styles/app.css
is a mapped asset, but the contents are the compiled contents. Life is much easier with the bundle :).
Cheers!
// composer.json
{
"require": {
"php": ">=8.1",
"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
}
}
Hey, I don't know if it's because I use Tailwind bundle, but Tailwind styles are not loaded anymore (404) after applying the excluded_patterns config.
Did I miss something?