how to install webpack encore and npm

[Lakrimou]

i tried to install webpack and npm, but i can't seem to install them. i always get the error

npm: not found

this is my Dockerfile

ARG NODE_VERSION=20

FROM node:${NODE_VERSION}-alpine AS symfony_assets_builder

WORKDIR /srv/app

RUN mkdir public

COPY package.json ./

RUN yarn install

COPY assets assets/
COPY webpack.config.js ./

RUN yarn build

FROM dunglas/frankenphp:latest-alpine AS frankenphp_upstream
FROM composer/composer:2-bin AS composer_upstream

FROM frankenphp_upstream AS frankenphp_base

WORKDIR /app

RUN apk add --no-cache \
		acl \
		file \
		gettext \
		git \
	;

RUN set -eux; \
	install-php-extensions \
		apcu \
		intl \
		opcache \
		zip \
	;

RUN install-php-extensions pdo_pgsql
RUN docker-php-ext-install pdo_mysql

COPY --link frankenphp/conf.d/app.ini $PHP_INI_DIR/conf.d/
COPY --link --chmod=755 frankenphp/docker-entrypoint.sh /usr/local/bin/docker-entrypoint
COPY --link frankenphp/Caddyfile /etc/caddy/Caddyfile

ENTRYPOINT ["docker-entrypoint"]

ENV COMPOSER_ALLOW_SUPERUSER=1
ENV PATH="${PATH}:/root/.composer/vendor/bin"

COPY --from=composer_upstream --link /composer /usr/bin/composer

HEALTHCHECK --start-period=60s CMD curl -f http://localhost:2019/metrics || exit 1
CMD [ "frankenphp", "run", "--config", "/etc/caddy/Caddyfile" ]

FROM frankenphp_base AS frankenphp_dev

ENV APP_ENV=dev XDEBUG_MODE=off
VOLUME /app/var/

RUN mv "$PHP_INI_DIR/php.ini-development" "$PHP_INI_DIR/php.ini"

RUN set -eux; \
	install-php-extensions \
		xdebug \
	;

COPY --from=symfony_assets_builder /srv/app/public/build public/build

COPY --link frankenphp/conf.d/app.dev.ini $PHP_INI_DIR/conf.d/

CMD [ "frankenphp", "run", "--config", "/etc/caddy/Caddyfile", "--watch" ]

FROM frankenphp_base AS frankenphp_prod

ENV APP_ENV=prod
ENV FRANKENPHP_CONFIG="import worker.Caddyfile"

RUN mv "$PHP_INI_DIR/php.ini-production" "$PHP_INI_DIR/php.ini"

COPY --link frankenphp/conf.d/app.prod.ini $PHP_INI_DIR/conf.d/
COPY --link frankenphp/worker.Caddyfile /etc/caddy/worker.Caddyfile

COPY --link composer.* symfony.* ./
RUN set -eux; \
	composer install --no-cache --prefer-dist --no-dev --no-autoloader --no-scripts --no-progress

COPY --link . ./
RUN rm -Rf frankenphp/

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;

[zpi12lmm]

I recommend trying this solution: #497 (comment)

[latysh]

In your Dockerfile add following lines

COPY package.json yarn.lock ./
RUN yarn install

COPY assets assets/
COPY webpack.config.js ./
RUN yarn build```


This works for me

[Perf]

Probably, better so switch to Symfony Asset Mapper (a replacement for Webpack Encore)

[n1k00las]

Probably, better so switch to Symfony Asset Mapper (a replacement for Webpack Encore)

I tried it on docker windows, the perf was really bad i switched back to webpack.

[maxhelias]

We'll probably push the user to use AssetMapper, see : #475 (comment)

[quentinRogeret34]

We'll probably push the user to use AssetMapper, see : #475 (comment)

In my case i want to add DaisyUi to my projet, following this instruction I don't see how it's possible to add daisyui only with the AssetMapper. I think in some case, npm is probably still necessary

[maxhelias]

@quentinRogeret34 It's difficult to offer webpack integration while maintaining the spirit of this template: Production, development and CI ready.
The various proposed PRs have not received sufficient feedback or have not been followed up correctly by this author.
You can take up the subject again if you wish to see it in the project: #186 & #425 I'll be happy to review it

[Wordlesschunk]

We'll probably push the user to use AssetMapper, see : #475 (comment)

Is there going to be much thought behind code bases that are older/heavily reliant on webpack?
Kinda feels like we're just forcing an upgrade to users who may have large complex js thats not easy to unpack and port over to assetMapper

[maxhelias]

AssetMapper has no requirements, so even using this template with a webpack doesn't change its current use other than the adaptions needed.

In the comments to the issue mentioned, we talk about conditioning the command for preparing assets to the presence of the “importmap.php” file, which will therefore not be present for apps with webpack.

[mikeyudin]

For anyone looking for an alternative solution, I use a multi-stage build

## Build assets outside of primary image

FROM python:3.11.9-alpine AS assets

RUN apk update && apk add yarn make g++ git
RUN mkdir /app

COPY ./application/package.json /app
COPY ./application/webpack.config.js /app
COPY ./application/yarn.lock /app
COPY ./application/assets /app/assets

WORKDIR /app

RUN yarn install --pure-lockfile && yarn encore production

## Copy built assets to primary image

FROM dunglas/frankenphp:1-php8.3

COPY --from=assets /app/public/build /app/public/build