I use Laravel Homestead for my development environment, so my website is accessible on http://test.app
Now I tried to configure laravel mix to use it with VUEJS. For this, I include a JS file in one of my templates:
<script src="{{ url(mix('js/main.js'))}}"></script>
The result of this is
<script src="//localhost:8080/js/main.js"></script>
It seems so, that the localhost:8080 is hardcoded in vendor/laravel/framework/src/Illuminate/Foundation/helper.php (see https://github.com/laravel/framework/blob/e35a60f7f3ef1d75754522771f13762b3058f1b0/src/Illuminate/Foundation/helpers.php#L560)
How to fix this or how I done something wrong?
the source you quote will only be executed in watch mode.
In this case, Laravel mix host a server on 8080 port for all your static files (css, js) so you can get the hot-reload feature, while the php files still running on your Homestead Niginx, and I don't see anything wrong with it.
it will compile to your APP_URL in production mode and if 8080 is somehow conflicting with your other service you can modify config file of Laravel Mix.
try setting APP_URL in your .env config file
APP_URL = http://test.app
i hope it helps.
Related
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 have a Laravel+Vue app that I successfully installed on Heroku and Laravel part works here (https://shoomilka-todoapp.herokuapp.com/), but my Vue code for this application doesn't want to work. Code you can see here https://github.com/shoomilka/todoapp.
Can you help me, please to fix the error of why Vue doesn't work on Heroku?
It works on local environment well.
Try inspect your website and look at the console tab. you will see this error.
Mixed Content: The page at 'https://shoomilka-todoapp.herokuapp.com/'
was loaded over HTTPS, but requested an insecure script
'http://shoomilka-todoapp.herokuapp.com/js/app.js?time=1590194712'.
This request has been blocked; the content must be served over HTTPS.
If your website delivers HTTPS pages, all active mixed content delivered via HTTP on this pages will be blocked by default.
The best strategy to avoid mixed content blocking is to serve all the content as HTTPS instead of HTTP. you can use laravel secure_assets method this generates a URL for an asset using HTTPS
<script src="{{ secure_assets('js/app.js') }}?time={{ time() }}"></script>
or simply just set 'url' => 'https://youDomain.com' in config/app.php and .env APP_URL=https://yourDomain.com
In my Laravel 5.7 site I use Ckeditor together with Laravel-Filemanager. After following all the installation instructions I got it to work fine locally. No problems att all. But I cannot get it to work in my remote web server.
On the remote server I have placed the Laravel app in a subfolder 2 levels down from the webroot.
In my blade template I have this (I have tried using both asset and url helpers in the option urls and both of them works locally):
<script src="{{ asset('vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>
<script>
var options = {
filebrowserImageBrowseUrl: "{{ url('/laravel-filemanager?type=Images') }}",
filebrowserImageUploadUrl: "{{ url('/laravel-filemanager/upload?type=Images&_token=') }}"
};
</script>
<script>
CKEDITOR.replace('editor1', options);
</script>
When I want to upload an image in my CKeditor by clicking the Browse server button in my local environment it works as it should and the URL looks like this in Laravel File Manager ('laravel/' being the webroot):
http://laravel/laravel-filemanager?type=Images&CKEditor=editor1&CKEditorFuncNum=0&langCode=sv
When I do the same thing in my remote server the URL looks like this:
http://www.myremoteserver.com/subfolder1/subfolder2/public/laravel-filemanager?type=Images&CKEditor=editor1&CKEditorFuncNum=0&langCode=sv
... and all I get is a 404.
I have tried to clear route, config and site caches. I have also tried to copy the URL above in the remote environment and pasting it a new window without the /public/ part.
Is there anyone out there that can guess what is going on? All help would be greatly appreciated.
please share with me how got the ckeditor to upload files when you click send to server because i have being searching for it for about 2 days now yet no solution.
iam using laravel 5.7
and unisharp laravel-filemanager but no solution was found.
I only saw to add config.filebrowserUploadMethod = 'form';
in the ckeditor congi.js but even after adding that i still didn't get any solution.
every other things seems to be working fine.
please i will be glad to receive your assistance
I finally got it to work. I wiped the web server folder clean and uploaded all files again from the beginning manually instead of doing it by cloning the GIT repo. And then it worked. So I actually am not sure what was wrong.
Anyhow I added this snippet below where I wanted the CKeditor in my blade template:
<textarea id="editor1" name="story" class="form-control">{{ $story }}</textarea>
And this near the bottom of the blade template, just before #endsection.
<script src="{{ asset('vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>
<script>
var options = {
filebrowserImageBrowseUrl: "{{ url('/laravel-filemanager?type=Images') }}",
filebrowserImageUploadUrl: "{{ url('/laravel-filemanager/upload?type=Images&_token=') }}"
};
</script>
<script>
CKEDITOR.replace('editor1', options);
</script>
Be sure to publish as per the filemanager instructions:
php artisan vendor:publish --tag=lfm_config
php artisan vendor:publish --tag=lfm_public
And clear caches:
php artisan route:clear
php artisan config:clear
Also check that the vendor folder exists in your public directory with CKeditor and Laravel filemanager folders inside it, otherwise the asset and url helpers will not work. Also check in the dev window (F12 in browser) what your current path is to ckeditor.js.
I host Laravel project on xampp server. but now I run the laravel project using php artisan serve. When I run the artisan server, the url is http://localhost:8000. but my xampp server is http://localhost. The url path is wrong. The images doesn't appear and javascript and jquery don't work on my project. how can i fix it?
use this way to url CSS and JS files path
<link rel="stylesheet" href="{{ URL::asset('css/app.css') }}">
and image path use
<img src="{{url('/images'}}">
//here you have to give public path ex: in your public folder has images then use like this
I'm embellishing Laravel's 404 page (ressources/views/erros/404.blade.php). But, I can't load my CSS and JS files, which are, in my public folder.
Actually, Laravel is returning me localhost/css/bootstrap.css when it should return me localhost/myproject/public/css/bootstrap.css with {{ URL::asset('css/bootstrap.css') }}. While it's returning me localhost/myproject/public/css/bootstrap.css when I'm on another view (with the same code: {{ URL::asset('css/bootstrap.css') }}) on my home page wich is perfectly working.
By the way, I'm using Laravel 5.3.
Thanks in advance <3
Configure your webserver so the root of domain (localhost) points to public/ -folder.
Vagrant-solution like Homestead would probably make setting up the development-environment easier for you.