Summer Sale! All accounts are 50% off this week.

mleontenko's avatar

Third party JS libraries in production version (Laravel 5.5)

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://mysite.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://mysite.com/fonts/vendor/leaflet-draw/dist/images/spritesheet.svg?fd5728f... 404 (Not found)

GET https://mysite.com/images/vendor/leaflet/dist/images/layers.png?a613745... 404 (Not found)

Looks like the library is searching for fonts and icons in the wrong place. It should look in https://mysite.com/laravelapplication instead of https://mysite.com

Does anyone know why this is happening?

0 likes
1 reply
ejdelmonico's avatar

Well, my guess would be that the leaflet library is looking for the assets using an absolute path instead of a relative path or the path it is looking for is in a vendor file under the main project. The issue didn't surface on your dev setup because you probably weren't using the site under the subdomain. Make sure the package.json which pulls in the library is in the main project directory of the subdomain.

Try testing the paths first by calling:

https://mysite.com/laravelapplication/fonts/vendor/leaflet-draw/dist/images/spritesheet.svg?fd5728f

1 like

Please or to participate in this conversation.