AssetMapper / TailwindBundle compilation

[Spomky]

Hi @dunglas,

Many thanks for the last update of this repository. It works like a charm and I was able to run a demo quite easily. The only problem I encountered was the absence of compiled assets. I recently turned to AssetMapper and TailwindBundle and needed to run the folowing lines:

In dev mode:

php bin/console importmap:update
php bin/console tailwind:build # --watch

In production

php bin/console tailwind:build --minify
php bin/console asset-map:compile

I am wondering if it is possible to conditionally call these commands (TBH I don't know how to determine they exist). WDYT?

[dunglas]

Good idea! We could update the Docker entrypoint to check if the related packages are installed by doing a grep on composer.json and run the appropriate command if it's the case!

[dunglas]

But the best would probably to update the Flex recipes to run these command automatically when installing these packages thanks to Composer scripts when needed.

[maxhelias]

The recipe of AssetMapper have the install command : https://github.com/symfony/recipes/blob/main/symfony/asset-mapper/6.4/manifest.json#L13 The same should probably be done for bundles enabling sass or tailwind integration.

Example with the symfony/demo : https://github.com/symfony/demo/blob/main/composer.json#L96-L97

[maxhelias]

@dunglas I think we can simply check if the importmap.php file exists.

I propose to start without any bundle support and see after how we can do.

For a first step, in prod mode, we can add the command php bin/console asset-map:compile in the production stage and in the entrypoint.sh if the statement is true. And for the dev mode, I'm not sure if we should propose something ? Or let users manage what they want to run ?

@Spomky WDYT ?

[dunglas]

Sounds sensitive to me!

[Spomky]

Hi @maxhelias,

It looks good to me too. No need for anything in dev env. I usually run console asset-map:compile --watch directly.

[tviertel]

The assets/ folder is not available in production stage because it is ignored .dockerignore, right?

What I have done is to add these commands to the Makerfile so assets are compiled before building the Docker image:

prod_build: ## Builds Tailwind assets and the Docker images for production environment
	@$(SYMFONY) tailwind:build --minify
	@$(SYMFONY) asset-map:compile
	@$(DOCKER_COMP) -f compose.yaml -f compose.prod.yaml build --pull --no-cache

Maybe another option would be to remove assets/ from .dockerignore, then run the commands at the end of production stage in Dockerfile and delete assets/ after that?

RUN set -eux; \
	mkdir -p var/cache var/log; \
	composer dump-autoload --classmap-authoritative --no-dev; \
	composer dump-env prod; \
	composer run-script --no-dev post-install-cmd; \
	php bin/console tailwind:build --minify; \
	php bin/console asset-map:compile; \
        rm -rf assets/; \
	chmod +x bin/console; sync;

[cristian0]

My rough solution is to update the file

frankenphp/docker-entrypoint.sh

by adding the following lines:

	if [ "$APP_ENV" = "prod" ]; then
		echo "Tailwind build:"
		php bin/console tailwind:build --minify

		echo "Asset map compile:"
		php bin/console asset-map:compile		
	fi

at line 63, immediately before the end of the main if block.

This ensures that docker-entrypoint.sh script executes the tailwind:build and asset-map:compile commands only in prod environment. (this version is better then the previous that assumes that you share .env.prod file with container filesystem)

[tdumalin]

Hi there,

I think adding the asset build in the entrypoint is not the best solution as it slows down the deployment (container starts is longer) and this can be done during the image build process.

Here's my implementation: add the bin/console asset-map:compile in the Dockerfile during the frankenphp_prod :

#Dockerfile
FROM frankenphp_base AS frankenphp_prod
#...

RUN set -eux; \
	mkdir -p var/cache var/log; \
	composer dump-autoload --classmap-authoritative --no-dev; \
	composer dump-env prod; \
	composer run-script --no-dev post-install-cmd; \
	chmod +x bin/console; sync; \
	php bin/console asset-map:compile;

Let me know what you think about this

[Brammm]

Ran across this issue as well. I was wondering: is anyone running the bin/console tailwind:build --watch in docker as well? If so, how?

I tried by adding a taildwind service to my docker.override.yaml:

  tailwind:
    build:
      context: .
      target: frankenphp_dev
    volumes:
      - ./:/app
    environment:
      XDEBUG_MODE: "${XDEBUG_MODE:-off}"
      APP_ENV: "${APP_ENV:-dev}"
      DATABASE_URL: mysql://${MYSLQL_USER:-root}:${MYSLQL_PASSWORD:-root}@database:3306/${MYSLQL_DB:-db}?serverVersion=${MYSLQL_VERSION:-9}&charset=${MYSLQL_CHARSET:-utf8}
    command:
      - bin/console
      - tailwind:build
      - --watch

Which seems to build something when I change a file, but it seems the changes aren't properly propagating to the php service, because stuff breaks 😅

EDIT: comment no longer relevant, turns out all my issues were stemming from some weird Firefox behavior. My base.html.twig looked like this:

    <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script>
    {% block javascripts %}
        {% block importmap %}{{ importmap('app') }}{% endblock %}
    {% endblock %}

I had to move the import map above the other stuff.