Level 104
How do you deploy the application on the server; do you include/build the compiled assets whenever you deploy?
Jun 29, 2023
5
Level 1
Browser fails to execute js and css after deploy to live server
Hello,
I'm making a web application, where I facilitate js, css, and ajax. When I execute the site locally, there's no error. However, after deploying to the Digital Ocean server via Laravel Forge, I experience more functions that don't work online. I've tried to redploy to a fresh site on Laravel Forge, incognito in the browser, and delete the browser cache, but none of it work. Can someone please guide me in the right direction? :-)
Level 1
@tykus, yes. The deployment script looks like:
# Change to the project directory
cd /home/forge/default
# Turn on maintenance mode
php artisan down
# Pull the latest changes from the git repository
git pull origin $FORGE_SITE_BRANCH
# Install/update composer dependencies
$FORGE_COMPOSER install --no-dev --no-interaction --prefer-dist --optimize-autoloader
( flock -w 10 9 || exit 1
echo 'Restarting FPM...'; sudo -S service $FORGE_PHP_FPM reload ) 9>/tmp/fpmlock
if [ -f artisan ]; then
$FORGE_PHP artisan migrate --force
fi
# Clear caches
php artisan cache:clear
# Clear expired password reset tokens
php artisan auth:clear-resets
# Clear and cache routes
php artisan route:clear
php artisan route:cache
# Clear and cache config
php artisan config:clear
php artisan config:cache
# Install node modules
npm install
# Create symbolic link
php artisan storage:link
# Build assets using Laravel Mix
npm run build
echo "" | sudo -S service php8.2-fpm reload
# Turn off maintenance mode
php artisan up
Level 104
@fredemagi ok, does the build step work; do you have deployment logs?
What are you actually seeing in the browser; is there 404 for the asset files; or are you likely seeing an old version of the asset (i.e. building never replaced it)?
Level 1
@tykus, it builds correctly. This is the output of the latest deploy:
Thu Jun 29 22:28:51 UTC 2023
INFO Application is now in maintenance mode.
From github.com:hjm-app/hjm
* branch main -> FETCH_HEAD
Already up to date.
Installing dependencies from lock file
Verifying lock file contents can be installed on current platform.
Nothing to install, update or remove
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
INFO Discovering packages.
barryvdh/laravel-dompdf ............................................... DONE
intervention/image .................................................... DONE
laravel/sanctum ....................................................... DONE
laravel/tinker ........................................................ DONE
laravelcollective/html ................................................ DONE
mcamara/laravel-localization .......................................... DONE
nesbot/carbon ......................................................... DONE
nunomaduro/termwind ................................................... DONE
spatie/laravel-permission ............................................. DONE
tanmuhittin/laravel-google-translate .................................. DONE
yajra/laravel-datatables-buttons ...................................... DONE
yajra/laravel-datatables-editor ....................................... DONE
yajra/laravel-datatables-fractal ...................................... DONE
yajra/laravel-datatables-html ......................................... DONE
yajra/laravel-datatables-oracle ....................................... DONE
65 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
Restarting FPM...
INFO Nothing to migrate.
INFO Application cache cleared successfully.
INFO Expired reset tokens cleared successfully.
INFO Route cache cleared successfully.
INFO Routes cached successfully.
INFO Configuration cache cleared successfully.
INFO Configuration cached successfully.
up to date, audited 769 packages in 8s
78 packages are looking for funding
run `npm fund` for details
35 vulnerabilities (1 low, 32 moderate, 2 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
ERROR The [public/storage] link already exists.
> build
> vite build
vite v3.2.5 building for production...
transforming...
/storage/images/login-background.png referenced in /home/forge/default/resources/sass/app.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime
✓ 111 modules transformed.
rendering chunks...
public/build/manifest.json 0.25 KiB
public/build/assets/app.37e7ebb6.css 2.94 KiB / gzip: 1.06 KiB
public/build/assets/app.45e02de4.js 179.68 KiB / gzip: 60.76 KiB
INFO Application is now live.
I don't see any 404-returns of asset files. It all looks okay, but for some reason, parts of the js and css are broken.
Level 6
Curious ran into the same issue on Forge recently with a staging site for a prod site. Curiously assets build just fine on Prod but refuse to on Staging.
Deploy log shows assets built but visiting the page initially showed a 404 for the CSS and JS in Dev tools.
So far it looks like permissions issues. The workaround I came up with was to build the assets locally and push them into the repo while we're investigating why it does not work for one specific site.
Unless I build locally the old assets are served on the site and the newly built assets seem to be ignored. Looks like Forge silently fails to place them after build.
Hope this helps someone, I'll update with more when we've solved this.
Please or to participate in this conversation.