I have a Laravel application where I use the mix function in my blade templates to include my css and js files like this:
<script src="{{ mix('js/app.js') }}"></script>
This works locally but when I deploy the app to the production server, the mix function still inserts the local paths:
<script src="//localhost:8080/js/app.js"></script>
The APP_URL in the .env file is set and I've also cleared the Laravel caches.
Any ideas what could be wrong?
Related
I've recently started a new Jetstream project with Livewire. I've been playing around with setting up my base layout etc and I keep getting a message in the console (which I'm not sure if its mucking up what I'm trying to do with Alpine). In the console it says:
Livewire: It looks like AlpineJS has already been loaded. Make sure Livewire's scripts are loaded before Alpine
Which is confusing me as I am not loading AlpineJS anywhere else. I don't have any CDN references anywhere in my base templates. Alpine is only referenced once where it gets set up which was automatically generated when I first created the jetstream project (under resources/js/app.js).
My understanding is that Livewire already loads Alpine automatically. So why would this error come up?
If you installed alpine as a module and you are having this error, go to your layout file (app.blade.php) or whatever full livewire page that's giving this error or where you imported your livewire scripts and app.js file, then import your livewire scripts before app.js e.g
#livewireScripts
<script src="{{ asset('js/app.js') }}"></script>
instead of the old way:
<script src="{{ asset('js/app.js') }}"></script>
#livewireScripts
I have a small issue with my current configuration using Laravel for the backend, and Vue in the frontend, while my application is built using Laravel mix (6.0).
I am using the following simple mix configuration:
mix.js("resources/js/app.js", "public/js/app.js")
.vue()
.version()
.extract();
Everything works fine when running npm run watch, and when I launch the production build, I get as expected three files in my public folder (manifest.js, app.js and vendor.js). I included these three files in my app.blade.php file in the following way:
<script src="{{ asset(mix('js/manifest.js')) }}" defer></script>
<script src="{{ asset(mix('js/vendor.js')) }}" defer></script>
<script src="{{ asset(mix('js/app.js')) }}" defer></script>
The mix-manifest.json that comes out looks like this:
{
"/js/app.js": "/js/app.js?id=55e00bb7adfe7cc8d33c",
"/js/vendor.js": "/js/vendor.js?id=3cc2a9d83cabdff07b38",
"/js/manifest.js": "/js/manifest.js?id=7d6950016e73d672d079",
}
Most of the routes are working just fine with such a configuration.
However, the problem I am facing is a generic 404 error that shows up when trying to access particular routes having at least two levels, such as <my_website>/read/<post_id>. In this case, the browser tries to resolve something like <my_website>/read/js/app/1.js which obviously doesn't exist, as it should search for <my_website>/js/app/1.js instead.
Am I missing something obvious here? Is there any way to include a full path in the manifest file to avoid this, and making sure that the browser resolves the correct files? Or any other work around to make this work? Thank you!
You can force a base URL in the browser. This rewrites the URLs for you.
Use the <base> tag
See documentation of the base tag here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
Example:
<base href="https://www.example.com/">
I'm successfully running npm run production on my Vue (2.6.14) application, and uploading the resultant "chunked" .js files to the public/dist/ and public/ folders on my production server.
However, when I view the site in Chrome, it tells me that I'm running Vue in development mode.
Is there a switch/variable somewhere that I'm forgetting to change? (The APP_ENV variable in the production server's .env file is set to production.)
Thanks/Tom
A stupid own goal. I had
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
in my app.blade.php instead of
<script type="text/javascript" src="{{ asset('dist/app.js') }}"></script>
and so it was reading the dev version of the app.js file (which shouldn't have been uploaded any way!)
I'll never get those hours back!
i'm developing a multi-tenant application with laravel & livewire.
I've a bootstrap template mounted such as a laravel project and i've integrated this template in my project.
For how the template is built, when I am on the localhost:8000/... views I get the correct rendering of the template, while when I go to the domain of a tenant, example: tenant.localhost:8000/... I completely lose the template.
I noticed that in resources/layout/default.blade to load all css and js there is a for loop that takes the css from the configuration file and loads them into the page
{{-- Global Theme Styles (used by all pages) --}}
#if(!empty(config('dz.public.global.css')))
#foreach(config('dz.public.global.css') as $style)
<link href="{{ asset($style) }}" rel="stylesheet" type="text/css"/>
#endforeach
#endif
using asset($style) when I go to the tenant domain, it looks for the css in a location that does not exist (the css are under localhost).
I thought of inserting an if-else inside the foreach loop in order to check the domain in the asset($style) and make sure that when in the tenant domain the css are searched as if we were in the localhost domain.
It's a good idea? do you have any advice or suggestions?
Now the asset location is changed for each tenant. You could 'hardcode' it.
Something like:
<link href='{{ env('APP_URL') }}/location/style.css'>
Another solution is to use the url() helper function instead of asset(), since it would generate an absolute path for the assets, this way you can use it in the same way as you use asset() function
When I am trying to initialise javascript and css, I am getting an problem in path. It takes only root URL.
Eg. I have initialize
<script type="text/javascript" src="/bower_components/angular/angular.js"></script> then
it takes
<script type="text/javascript" src="http://localhost/bower_components/angular/angular.js"></script>
The file must be
<script type="text/javascript" src="http://localhost/myapp/bower_components/angular/angular.js"></script>
instead of
<script type="text/javascript" src="http://localhost/bower_components/angular/angular.js"></script>
Same problem with the Ajax.
Thanks,
Hasmukh
Your problem is not Laravel but that you're doing your HTML wrong.
If you application doesn't sit on the root of the site, then using root-relative URLs like "/some/url/here" will never work.
Luckily, Laravel can help you out there - you need to use its helpers for including assets:
{{ HTML::style('css/site.css') }}
{{ HTML::script('js/site.js') }}
{{ HTML::image('images/logo.png') }}
Or if you need to use an asset URL in some other form:
Download the file
You may have to set the URL to your application at the top of app/config/app.php though (especially if you need absolute URLs here, for example in HTML emails).