Usually if I work in a basic php project, I seperate my custom and vendor assets like this:
assets (folder)
css (folder)
home.css
js (folder)
dashboard.js
vendor (folder)
bootstrap (folder)
css (folder)
bootstrap.min.css
js (folder)
bootstrap.min.js
I have alot of vendors to use like charts, codemirror, clipboard, etc. But, I'm confused how can I apply this in Laravel. Because we already have vendor folder in Laravel. So, I don't know where should I put my custom and vendor assets. Please help me.
You could shove everything in the public folder. the asset() helper places you in the public folder by default, so in your blade files you could have something like
<link rel="stylesheet" href="{{ asset('assets/vendor/css/bootstrap.min.css') }}"/>
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 am using Laravel, in my layout blade template file (used by all my views) I have the following code to generate my stylesheet URL:
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
When the page is generated this appears like this: http://myapp.test/css/app.css which looks like its correct, I have a file in the following directory \resources\css\app.css.
When I try and access the css file directly via the URL, laravel throws a 404 error, can someoen tell me what I'm doing wrong?
If you aren't using mix.css or tailwind or anything, and are writing your own css, put it in /public/css/app.css
When you use {{ asset('css/app.css') }} , laravel points to public/app.css.
Browser can only access contents of inside public folder.
Laravel uses webpack which complies css file located inside resources/css and saves into public/css.
If you look inside webpack.mix.js located in root folder of your project you can see following:
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
So, if you access http://myapp.test/css/app.css , you should get css located in your public folder. you can confirm this from source tab of your browser's developer tools (i.e. page inspect).
I m creating different directories for Role-based access in Codeigniter 4. I have created the Modules directory inside app/ i.e (app/modules/admin). I have assets for the admin. I want to load it in the header file of view. I have tried it with the base_url().'/app/modules/admin/assets/filename.xyz' but load the complete file in the link but doesn't show me the assets. How can, I load these assets in the same directory. Please see the below code
<link rel="stylesheet" href="<?php echo(base_url().'/app/modules/super/assets/'); ?>plugins/fontawesome-free/css/all.min.css">
All public files including assets should be placed inside your public folder and not your app folder. Your app folder shouldn't be visible to the public.
With this in mind what I would do would be create a simular structure in your public folder.
public/modules/admin/css
public/modules/admin/js
public/modules/admin/img
Then if you have an asset called styles that would be in:
public/modules/admin/css/styles.css
This asset should be called using the base_url function from the uri helper.
<link src="<?php echo base_url('modules/admin/css/styles.css'); ?>">
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!
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