Laravel serves client side (HTML, CSS, JS) files from the /public folder by default. I am currently transitioning a Blade based front-end to an Angular based one. As a result, I am mixing Blade templating with Angular templating. I am using Blade layouts to generate a navbar, footer, and other common views while I transition the body content of my pages to Angular.
I have a folder constructed just for storing Angular files. My current app structure looks something like this:
-MyApplication
-angular
-app
-bin
-bootstrap
-config
-database
....
Is there anyway for Laravel to load my assets - stored in the /angular folder? I want to keep all my Angular files in one place, in standard Angular structure, as opposed to spreading them out and placing them in the /public Laravel folder.
You can try to create a symbolic link inside the public directory to your intended angular directory. Open your terminal and create a symbolic link like so:
ln -sfv ~/path/to/MyApplication/angular ~/path/to/MyApplication/public/angular
Don't forget to update the ~/path/to/MyApplication to your actual Laravel directory. Now you may refer to the javascript file inside the angular directory like this on your blade template:
<script src="{{ asset('angular/app.js') }}"></script>
Hope this help!
Related
I'm trying to produce modular webpack bundles, I'd like to put my TS files on the folders where I would use those specific scripts and then transcript them to the public folder.
Example: the blade 'index.blade.php' and 'index.ts' are in resources/views/register/client.
The blade would have a tag <script src="{{asset('assets/js/register/client/index.js')}}"> </script> to import the webpack-generated bundle 'index.js'.
I think this way my resources would be more organized but I can't find a way to do this nor a better solution.
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
I am trying for the first time to create an application with Laravel 5.7 and ExtJS 5.
There is a lot of information for Laravel / Vue and Laravel / Angular applications, but for Laravel / ExtJS it is practically non-existent (unfortunately).
I created an ExtJS app called extjs_app with cmd that I put in the public folder of the Laravel project.
In the Laravel views folder I created a view named index_extjs.blade.php containing the index.html code of the ExtJS app with the following change:
<script id="microloader" type="text/javascript" src="bootstrap.js"></script>
replaced for
<script id="microloader" type="text/javascript" src="extjs_app/bootstrap.js"></script>
And in the bootstrap.js file (I probably should not edit this file):
Ext.manifest = Ext.manifest || "bootstrap.json";
replaced for
Ext.manifest = Ext.manifest || "extjs_app / bootstrap.json"
And in the app.json file
indexHtmlPath": "index.html"
replaced for
"indexHtmlPath": "../../../resources/views/index_extjs.php"
However, despite several attempts, the files required for the ExtJS application are not loaded.
How to properly configure Laravel and ExtJS to work together?
You need to set the root route for the entire application to be served with your blade view, in your case index_extjs.blade.php.
Why? Because when anyone opens up your site, you are loading up that page and hence, loading extjs too. After that page is loaded, you can handle page changes through extjs.
So to achieve this, you need to declare your root route to server this index file:
Route::get('/', function() {
return view('index_extjs');
});
Also you need to revert all extjs config changes back to default, because everything will be relative to your extjs app inside public folder and not relative to the project itself. I hope this makes sense
I was supplied with a custom layout for the login page of my Laravel project.
When I opened login.html file, which represents the layout for that specific page I saw such links
<!-- Base Css Files -->
<link href="assets/libs/jqueryui/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
<link href="assets/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/libs/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
...
So I figured that I only need to copy the assets folder, which came with the template (there are all needed bootstraps, jqueries and whatnot) to my projects app\resources\assets directory
Now, when I copied the code from login.html into my login.blade.php view and copied the templates' assets folder to app\resources\assets it doesnt work. It only displays naked html code when I open the page.
What am I doing wrong in linking the assets folder?
The resources folder is (like the name says) for the resources.
If you don't want/need to build/compile/min your scripts, then just put them in the public folder, so you can access them from your template.
In your case
public/assets/libs...
In order to access assets, you have two ways to approach it. Either using Elixir/gulp or to use direct access.
Gulp is a node.js application that reads your assets files, whether JS, CSS, Coffee, etc...and combine them in single files. Gulp reads the files defined in the gulpfile.js, and you can access the output files in your blade file using elixir().
You can read more about Elixir here.
In your specific case, you can just place the files under the public/ directory. So Laravel treats public as the root directory, and if you want to read the file assets/css/foo.css just place the file in public/assets/css/foo.css
I'm trying to include a google CDN jquery link into the Laravel Assets container but the link is being concatenated to my site address, like this:
<script src="http://mybeautifulsite.com/<script src=" http:="" ajax.googleapis.com="" ajax="" libs="" jquery="" 1.8.3="" jquery.min.js"=""></script>
Is there any way to include external links into the assets container?
EDIT
Here's the code I'm using to include the asset:
Asset::add('jquery', '<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>');
Should just be:
Asset::add('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
Whilst the documentation does not explicitly talk about absolute URLs, the code is written in such a way to handle them.