Laravel (5.5) - Third party JS libraries in production version - laravel

Question

I'm using third party JS libraries in my Laravel 5.5 project (leaflet and leaflet-draw). I installed the libraries using npm:
npm install leaflet
npm install leaflet-draw
I added the folowing lines in resources/assets/js/app.js:
require('leaflet');
require('leaflet-draw');
and in resources/assets/sass/app.scss:
#import "~leaflet/dist/leaflet.css";
#import "~leaflet-draw/dist/leaflet.draw.css";
after that, I run:
npm run dev
Assets compile and my application works fine on my localhost (I run basic laravel server with php artisan serve).
I tried deploying this application to server. I deployed it to a subfolder, so the address is:
https://example.com/laravelapplication
I followed this instruction:
https://www.digitalocean.com/community/tutorials/how-to-deploy-a-laravel-application-with-nginx-on-ubuntu-16-04
All routes and urls work fine. I don't get any code errors. But, leaflet and leaflet draw libraries have trouble fetching their icons and fonts. I get these errors:
GET https://example.com/fonts/vendor/leaflet-draw/dist/images/spritesheet.svg?fd5728f... 404 (Not found)
GET https://example.com/images/vendor/leaflet/dist/images/layers.png?a613745... 404 (Not found)
I'm not sure, but it looks like the library is searching for fonts and icons in the wrong place. It should look in https://example.com/laravelapplication instead of https://example.com
Does anyone know why this is happening?

Answer 1

If you know the actual URL these images are located in once your app is deployed, then a workaround would be to simply hard-code these locations:
For Leaflet, you can use the L.Icon.Default's imagePath option: (in your JavaScript)
L.Icon.Default.prototype.options.imagePath =
"https://example.com/laravelapplication/images/vendor/leaflet/dist/images/";
For Leaflet.draw plugin, you have to override the CSS rules: (in your CSS, make sure it is evaluated after Leaflet.draw's CSS)
.leaflet-draw-toolbar a {
background-image: url('https://example.com/laravelapplication/fonts/vendor/leaflet-draw/dist/images/spritesheet.svg');
background-image: linear-gradient(transparent, transparent), url('https://example.com/laravelapplication/fonts/vendor/leaflet-draw/dist/images/spritesheet.svg');
}
.leaflet-retina .leaflet-draw-toolbar a {
background-image: url('https://example.com/laravelapplication/fonts/vendor/leaflet-draw/dist/images/spritesheet-2x.png');
background-image: linear-gradient(transparent, transparent), url('https://example.com/laravelapplication/fonts/vendor/leaflet-draw/dist/images/spritesheet.svg');
}