Why is webpack encore required only in dev

Question

I'm currently configuring some docker images for a symfony 5 project and trying to deal with the production build. Doing so, I noticed that webpack encore is installed only on dev mode, as advised on this official documentation : https://symfony.com/doc/current/frontend/encore/installation.html :

yarn add @symfony/webpack-encore --dev

However, this doesn't make sense to me, since even in production, we are supposed to build the assets :

yarn encore production

Does anyone have clues about this ? Thank you

Answer 1

The Symfony docs on How Do I Deploy My Encore Assets? provide two important things to remember when deploying assets:

1) Compile Assets for Production:

$ ./node_modules/.bin/encore production

Now the important part:

But, what server should you run this command on? That depends on how you deploy. For example, you could execute this locally (or on a build server), and use rsync or something else to transfer the generated files to your production server. Or, you could put your files on your production server first (e.g. via git pull) and then run this command on production (ideally, before traffic hits your code). In this case, you’ll need to install Node.js on your production server.

And the second important thing:

2) Only Deploy the Built Assets

The only files that need to be deployed to your production servers are the final, built assets (e.g. the public/build directory). You do not need to install Node.js, deploy webpack.config.js, the node_modules directory or even your source asset files, unless you plan on running encore production on your production machine. Once your assets are built, these are the only thing that need to live on the production server.

Simply put, in the production environment you only need the generated assets (usually /public/build directory content). In a simple scenario when you only need to load compiled Javascript and CSS files the Webpack is not used at runtime.

A possible solution how to deploy a Symfony application & assets

When deploying a Symfony app manually (without CI/CD) the following steps can be performed on the local machine or in a Docker container (assumes Symfony 4/5):

1. Export the source code from GIT repository with git-archive, e.g.: git archive --prefix=myApp/ HEAD | tar -xC /tmp/¹
2. Go to exported source code: cd /tmp/myApp
3. Install Symfony & other PHP vendors (see also the Symfony docs): composer install --no-dev --optimize-autoloader
4. Install YARN/NPM vendors (they'll be required to generate assets with Webpack): yarn install
5. Create production assets: yarn build (or yarn encore production)
6. (Install Symfony assets if needed: bin/console assets:install)

Now the code is ready to rsync it to the production server. You may exclude or delete the /node_modules, /var and even /assets directories and webpack.config.js (probably package.json & yarn.lock won't be needed either -- didn't tested it!) and run e.g.: rsync --archive --compress --delete . <myProductionServer>:<app/target/path/>

Resources on Symfony deployment:

1. How to Deploy a Symfony Application (Symfony docs)
2. How Do I Deploy My Encore Assets? (Symfony Frontend FAQ)
3. Do I Need to Install Node.js on My Production Server? (Symfony Frontend FAQ)
4. Production Build & Deployment (SymfonyCast)

---

¹ Untars on the fly the archived GIT repository into the /tmp/myApp directory instead of into a TAR archive. Don't miss the leading / in the --prefix flag! git-archive docs.