Symfony4 Assets handle after deployment - assets

Question

I just tried to deploy my app on a server and I have some problems wiht the assets.
I uploaded my app on a subfolder rapp so I have this /var/www/html/rapp
First : I had to change my publicPath on webpackEncore to include /rapp/public to have /rapp/public/build while just /build worked in dev (with the php bin/console server:run command)
is there a way to keep the publicPath inside the public Folder ? why I have to specify the subfolder ?
Second, with the first change It seems I have good URL to get my assets http://domain/rapp/public/build/main.css but it return a 404 for all my assets file (js and css)
I followed the recommended VHost (changed for some tests)
<VirtualHost *:80>
#ServerName domain.tld
#ServerAlias www.domain.tld
DocumentRoot /var/www/html/rapp/public
<Directory /var/www/html/rapp/public>
AllowOverride All
Order Allow,Deny
Allow from All
</Directory>
# uncomment the following lines if you install assets as symlinks
# or run into problems when compiling LESS/Sass/CoffeeScript assets
# <Directory /var/www/project>
# Options FollowSymlinks
# </Directory>
ErrorLog /var/log/apache2/project_error.log
CustomLog /var/log/apache2/project_access.log combined
</VirtualHost>
edit : added .htaccess on my root app folder and public app folder
root app folder:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule !\.(js|gif|jpg|png|css|txt)$ public/index.php [L]
RewriteCond %{REQUEST_URI} !^/public/
RewriteRule ^(.*)$ public/$1 [L]
</IfModule>
and public app folder
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /rapp/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php [QSA,L]
</IfModule>
and here is my webpack encore config
// webpack.config.js
var Encore = require('#symfony/webpack-encore');
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/rapp/public/build')
// will create public/build/main.js and public/build/main.css
.addEntry('main', './assets/js/main.js')
//Add entry if other js/css needed. first parameter is the generated filename.
.addEntry('reader', './assets/js/reader.js')
//file upload with dropzone
.addEntry('dropzone', './assets/js/dropzone.js')
//Admin chapter js
.addEntry('admin-chapter', './assets/js/chapter.js')
// allow sass/scss files to be processed
.enableSassLoader()
// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()
.enableSourceMaps(!Encore.isProduction())
// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()
// create hashed filenames (e.g. app.abc123.css)
.enableVersioning()
.createSharedEntry('vendor', [
'jquery',
])
.configureFilenames({
images: '[path][name].[hash:8].[ext]'
})
;
// export the final configuration
module.exports = Encore.getWebpackConfig();
(I launched the Encore build with dev option, not production)
the manifest.json is created, all the files with versioning are created, but as the file request is without versionning, it seems it's not found.
I just started with webpack with this project so i'm a complete noob, and I don't know much about apache/htaccess config, so maybe I miss something obvious...
If I'm unclear with something, let me know it's quite late here and I can't think properly anymore ^^"
edit : I changed my vhost config (on a conf file : /etc/apache2/sites-enabled/rapp.conf) and htaccess on my app folders (root and public)
I still not working though.

Answer 1

As described in the Symfony Configuring a Web Server documentation. Your Apache virtual host file should look like this
<VirtualHost *:80>
#ServerName domain.tld
#this tells Apache to load http://domain.tld from the specified directory
DocumentRoot /var/www/html/rapp/public
#this sets the access rules of the directory
<Directory /var/www/html/rapp/public>
AllowOverride All
Order Allow,Deny
Allow from All
#for Apache 2.4 replace the Allow entries above with this line
#Require all granted
#this is what loads symfony at http://domain.tld/route
<IfModule mod_rewrite.c>
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php [QSA,L]
</IfModule>
</Directory>
#this allows the use of bin/console assets:install --symlink
#which is executed when you run composer.phar install
#which should not be needed since you use webpack for asset management
#<Directory /var/www/html/rapp>
# Options +FollowSymlinks
#</Directory>
#this prevents routing from being executed on `http://domain.ltd/bundles/file.ext`
#resulting in a simple 404
<Directory /var/www/html/rapp/public/bundles>
<IfModule mod_rewrite.c>
RewriteEngine Off
</IfModule>
</Directory>
#this prevents routing from being executed on `http://domain.ltd/build/file.ext`
#resulting in a simple 404
<Directory /var/www/html/rapp/public/build>
<IfModule mod_rewrite.c>
RewriteEngine Off
</IfModule>
</Directory>
# optionally set the value of the environment variables used in the application
#SetEnv APP_ENV prod
#SetEnv APP_SECRET <app-secret-id>
#SetEnv DATABASE_URL "mysql://db_user:db_pass#host:3306/db_name"
ErrorLog /var/log/apache2/project_error.log
CustomLog /var/log/apache2/project_access.log combined
</VirtualHost>
Your webpack config should look like
// webpack.config.js
var Encore = require('#symfony/webpack-encore');
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
//...
;
Then delete your .htaccess files as they should not be needed.
Process new configurations
Afterward restart your Apache server to load the new vhost configuration.
Then delete your /var/www/html/rapp/var/cache/prod and/or /var/www/html/rapp/var/cache/dev directories.
Open a terminal on the server and navigate to /var/www/html/rapp.
Then run php composer.phar install --no-dev --optimize-autoloader
This should also execute symfony cache:clear and assets:intall
Then run yarn build which will process your assets to the /var/www/html/rapp/public/build directory.
However I strongly suggest deploying the production built files from public/build as opposed to installing node.js and webpack on the production server. As suggested in the Symfony Documentation on How do I deploy my Encore Assets?
End Result:
navigating to http://domain.ltd will load your application from /var/www/html/rapp/public/index.php
routes will be generated as http://domain.ltd/route
webpack will output the files using the working directory /var/www/html/rapp where your Symfony app lives
absolute url assets will be loaded as http://domain.ltd/build/asset.ext
As for webpack versioning of your assets, ensure you update your production framework configuration to load the manifest.json file as follows:
#/var/www/html/rapp/config/packages/framework.yml
framework:
#...
assets:
json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
#...