Chapters

32 Chapters | 4:16:27 |

01

¡Hola ÚLTIMA PILA!

4:01
02

Mapeador de activos

5:18
03

Módulos JavaScript

6:33
04

paquetes JavaScript de terceros

5:05
05

CSS

6:22
06

Tailwind CSS

9:24
07

Stimulus (estímulo)

6:45
08

Paquetes Symfony UX

6:47
09

Turbo Drive

5:42
10

Marcos Turbo

8:43
11

¡Popover!

11:44
12

Formularios de envío automático

3:37
13

Paginación y ordenación por columnas

8:04
14

Tablas de datos con Turbo Frames

7:03
15

Ver Transiciones

7:04
16

Notificaciones Toast

3:46
17

Tostadas más elegantes: Auto-cierre y Desvanecimiento

7:34
18

Turbo Streams: Actualiza cualquier elemento

5:23
19

Diálogo HTML para Módulos

13:18
20

¡Modal AJAX!

8:29
21

Fantástica UX modal con un estado de carga

8:04
22

Cosas extravagantes en el Éxito del Formulario Modal

8:30
23

¡Más con Modales divertidos! Editar y borrar

10:05
24

Respuestas Turbo Streams

4:24
25

Componentes Twig

10:52
26

Componente Twig modal

11:54
27

Componentes en vivo

11:47
28

Validación en tiempo real y campos de formulario dependientes

11:37
29

Pruebas, Parte 1: Twig y Componentes Vivos

5:32
30

Pruebas Parte 2: Pruebas funcionales

12:36
31

Rendimiento

9:16
32

Bonus: Más sobre Flowbite

11:08

> Symfony > 30 días con LAST Stack

Buy Access to Course

05.

CSS

|

|

Autoplay

Previous Challenge

Next Chapter

Login or register to check out the script

9 Comments

Sort By

Login or Register to join the conversation

Daniele 2 years ago

Hi!
I have downloaded your project from github and am following all the instructions. However, I am getting the error: "styles/app.css" not found.
I tried to create a new symfony project and in this case it works fine and i can see the app.css file.
What could be the problem?

|

MolloKhan SFCASTS Daniele 2 years ago edited

Hey @Daniele

That file is generated by Symfony Flex when you install the AssetMapper library. Perhaps you missed that step :)

Cheers!

|

glioburd 2 years ago edited

Hello!

If I Import local files from my app.js, exemple :

import './styles/app.css';
import alienGreeting from './lib/alien-greeting.js';

They won't be set in the <importmap>:

<script type="importmap">
{
    "imports": {
        "app": "/assets/app-8c433fce8fbdd0399a3ab64a470fa3aa.js",
        "js-confetti": "/assets/vendor/js-confetti/js-confetti.index-64efbb816c72f29f3bcf034b0fa4cc1a.js"
    }
}
</script>

Because I get a forbidden MIME type error ; in the (Firefox) console:

Loading module from “https://localhost:8000/assets/lib/alien-greeting.js” was blocked because of a disallowed MIME type (“text/html”).
Loading module from “https://localhost:8000/assets/styles/app.css” was blocked because of a disallowed MIME type (“text/html”).

Is there anything I need to set in the configuration to manage mimetypes? I haven't found anything like this in the AssetMapper documentation.

Thanks for your help!

|

weaverryan SFCASTS glioburd 2 years ago

Hi @glioburd!

Sorry for my very slow reply! Let's see about our issue :)

Because I get a forbidden MIME type error ; in the (Firefox) console:

My guess is that there is some other problem that has nothing to do with MIME types. My guess is that, if you try to go directly to the URL of either of these files, they won't be JS or CSS files at all! They are likely some sort of error page, which might help uncover the real issue.

However, it also looks weird to me that the files that are being requested do not contain the version hash (e.g. alien-greeting.js instead of something like alien-greeting-1234abcd.js. Also, alien-greeting.js should be in your <importmap>.

So, something IS wrong, but I don't see what. If you're still having this issue, my first recommendation would be to upgrade to the latest Symfony version and clear your Symfony cache. It's possible something just got "stuck".

Cheers!

|

tracer 2 years ago

That sounds really, really fun.

But: What about TypeScript? Besides being from MS it is quite cool, are there ways for AssetMapper to convert TS to JS? And TSX?

Kind regards and thx for the course.

|

weaverryan SFCASTS tracer 2 years ago

Hey @tracer!

Ah, it is fun - I'm really enjoying this :).

But: What about TypeScript? Besides being from MS it is quite cool, are there ways for AssetMapper to convert TS to JS?

Yea! There's a bundle for that! https://github.com/sensiolabs/AssetMapperTypeScriptBundle

So if you like TS, sure, why not :). This builds each .ts -> .js, and then that js is what is exposed by AssetMapper.

And TSX?

Nobody has built it yet, but sure? Why not :). The TypeScript bundle might be able to be extended to support this if it's not already. If you're interested, open an issue there. I know the developers and they're very good and helpful.

Cheers!

|

tracer weaverryan 2 years ago

Thanx for your reply, Ryan.

Oh, there is already a bundle. Wow. I guess you believe that I searched for Asset Mapper and TS before asking here … But I didn't get any helpful results.
So, I'll take my xmas holiday to try converting a fun project with Symfony & React 18 to Asset Mapper.

|

tracer tracer 2 years ago

Well, I'll give that a thought, I'm not bound to React, it was just fun to learn something new (at work my project is a 10 years old Cake2 Project …) I watched your Stimulus tutorials, maybe I'll give that a try.

|

weaverryan SFCASTS tracer 2 years ago

Hey @tracer!

I guess you believe that I searched for Asset Mapper and TS before asking here … But I didn't get any helpful results.

It's all pretty new still, so hopefully it'll be easier to find soon :).

So, I'll take my xmas holiday to try converting a fun project with Symfony & React 18 to Asset Mapper.

The React part might be a problem. It's possible (heck, we do it in ux.symfony.com - https://github.com/symfony/ux/blob/2.x/ux.symfony.com/package.json#L12 ) but there isn't a bundle to go from .jsx -> .js. And, more broadly, my thinking is "If you're building an SPA in React, use React's tools & ecosystem". But if you're building a web app that returns HTML, AssetMapper + Stimulus + Turbo can give you a great UX & DX. So, there are 2 paths and both are valid.

Let me know if that makes sense :).

Cheers!

|

Symfony 6.4 Tailwind CSS 3 Flowbite 2 Stimulus 3 Turbo 7

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "4.x-dev", // 4.x-dev
        "doctrine/doctrine-bundle": "^2.10", // 2.12.x-dev
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.4.x-dev
        "doctrine/orm": "^2.16", // 2.18.x-dev
        "knplabs/knp-time-bundle": "dev-main", // dev-main
        "pagerfanta/doctrine-orm-adapter": "4.x-dev", // 4.x-dev
        "pagerfanta/twig": "4.x-dev", // 4.x-dev
        "symfony/asset": "6.4.*", // 6.4.x-dev
        "symfony/asset-mapper": "6.4.*", // 6.4.x-dev
        "symfony/console": "6.4.x-dev", // 6.4.x-dev
        "symfony/dotenv": "6.4.x-dev", // 6.4.x-dev
        "symfony/flex": "^2", // 2.x-dev
        "symfony/form": "6.4.x-dev", // 6.4.x-dev
        "symfony/framework-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/monolog-bundle": "^3.0", // dev-master
        "symfony/runtime": "6.4.x-dev", // 6.4.x-dev
        "symfony/security-csrf": "6.4.x-dev", // 6.4.x-dev
        "symfony/stimulus-bundle": "2.x-dev", // 2.x-dev
        "symfony/twig-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/ux-autocomplete": "2.x-dev", // 2.x-dev
        "symfony/ux-live-component": "2.x-dev", // 2.x-dev
        "symfony/ux-turbo": "2.x-dev", // 2.x-dev
        "symfony/ux-twig-component": "2.x-dev", // 2.x-dev
        "symfony/validator": "6.4.x-dev", // 6.4.x-dev
        "symfony/web-link": "6.4.*", // 6.4.x-dev
        "symfony/yaml": "6.4.x-dev", // 6.4.x-dev
        "symfonycasts/dynamic-forms": "dev-main", // dev-main
        "symfonycasts/tailwind-bundle": "dev-main", // dev-main
        "tales-from-a-dev/flowbite-bundle": "dev-main", // dev-main
        "twig/extra-bundle": "^2.12|^3.0", // 3.x-dev
        "twig/twig": "^2.12|^3.0" // 3.x-dev
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.6.x-dev
        "phpunit/phpunit": "^9.5", // 9.6.x-dev
        "symfony/browser-kit": "6.4.*", // 6.4.x-dev
        "symfony/css-selector": "6.4.*", // 6.4.x-dev
        "symfony/debug-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/maker-bundle": "^1.51", // dev-main
        "symfony/panther": "^2.1", // v2.1.1
        "symfony/phpunit-bridge": "7.1.x-dev", // 7.1.x-dev
        "symfony/stopwatch": "6.4.x-dev", // 6.4.x-dev
        "symfony/web-profiler-bundle": "6.4.x-dev", // 6.4.x-dev
        "zenstruck/browser": "1.x-dev", // 1.x-dev
        "zenstruck/foundry": "^1.36" // 1.x-dev
    }
}

What JavaScript libraries does this tutorial use?

// importmap.php

return [
  'app' => [
    'path' => './assets/app.js',
    'entrypoint' => true,
  ],
  'js-confetti' => [
    'version' => '0.11.0',
  ],
  '@hotwired/stimulus' => [
    'version' => '3.2.2',
  ],
  '@symfony/stimulus-bundle' => [
    'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
  ],
  'tom-select' => [
    'version' => '2.3.1',
  ],
  'tom-select/dist/css/tom-select.default.css' => [
    'version' => '2.3.1',
    'type' => 'css',
  ],
  '@hotwired/turbo' => [
    'version' => '7.3.0',
  ],
  'stimulus-popover' => [
    'version' => '6.2.0',
  ],
  'debounce' => [
    'version' => '1.2.1',
  ],
  'turbo-view-transitions' => [
    'version' => '0.3.0',
  ],
  'stimulus-use' => [
    'version' => '0.52.1',
  ],
  'flowbite' => [
    'version' => '2.2.1',
  ],
  '@popperjs/core' => [
    'version' => '2.11.8',
  ],
  'flowbite-datepicker' => [
    'version' => '1.2.6',
  ],
];

Previous Challenge

Next Chapter