I'm working with Laravel (5.6) and React (16.4.1+react-router) on a project, and got into a problem maybe some of you having similar problem, so I wonder we could get some ideas. Recently I have found a solution for refreshing error (404) here: How to use React Router with Laravel? and one of the soulutions solved /app/{anything} problem, too.
Now my problem is with resource files (/css, /js) from /public folder. I tried to do a workaround with the same regex as /app =>
Route::get( '/{path?}', function() {
return view( 'home' );
})->where('path', '^((?!app|api|css|js).)*$');
but it's still not working as expected. As I read, we must put this snippet after all routes we included in our app, because of Laravel's caching mechanism, but it's not working with neither /css, neither /js resource files in /public folder > but works with /api and /app routes, and anything I add before /{path?}.
Is there any solutions for this? What am I doing wrong?
Thanks for any help,
LeFizzy.
I think I've found a solution for this, and I thought I must share this with others looking for this. First, it was by a mistake. In the home.blade.php view I linked my resource files incorrectly, like this: <link rel="stylesheet" href="http://mydomain.something/css/styles.css" /> and that's why it didn't find the route, and matched with /{path?/ - so it's actually rendered the home view rather than returning the resource file.
For this, Laravel offers a solution for this by looking for your assets in /public folder, just by linking your files simple like: <link rel="stylesheet" type="text/css" href="{{asset('css/styles.css')}}" /> and almost same solution for JS (local) assets: <script src="{{asset('js/app.js')}}" ></script>.
To mention, you should link external (from other networks) like I did with my Laravel app which didn't worked due to the problem I asked for.
Good luck with it. :)
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/">
Its always nice to use Laravel elixir feature. But I have some basic question. Firstly
when we run gulp command, it concatenates all the css and js files. But I think I dont need, for example, datatables.css and datatables.js/boostrap-wysihtml for all of my pages. how to tackle this situation?
Secondly Lets review this code:
elixir(function(mix) {
mix.styles([
"bootstrap.min.css",
"owl.carousel.css",
"animate.css",
"style.css",
"datepicker.css"
]);
mix.scripts([
"jquery.min.js",
"bootstrap.min.js",
"bootstrap-datepicker.js",
"typed.min.js",
"wow.min.js",
"owl.carousel.min.js",
"home.js",
"side-navigation.js",
"script.js"
]);
mix.version(["css/all.css","js/all.js"]);
});
in blade:
<link rel="stylesheet" href="{{ url(elixir('css/all.css')) }}">
what is the use of this elixir() function, when we are creating all.js and all.css file that has everything concatenated inside it?
You want to use the elixir function in the blade template because it will automatically use the rev.manifest file to resolve which versioned file(s) to use. The docs have more info. As far as not needing all scripts on all pages, there are a few different ways to pull it off. You can create a task that generates just generates one bundle - perhaps scripts needed everywhere - and another bundle handling the rest. I'd advise you to research that to see what works best for you.
Hi i have this assets folder which has the following folder inside of css, images, uploads, and js folder i put the assets folder outside application. Im wondering that how could i keep it safe so that when users tried to type in the url like for example http:/test.com/assets it will redirect to application folder or somewhat it will says page not found. Cause ive noticed that when i type in the url http://test.com/assets it will go to the assets folder and which is vulnerable and people could see all the folders in the assets folder. can someone help me figued this thing out? Any help is muchly appreciated.
if you want to secure you folder then do one this create html file like this
<html>
<head>
<title>403 Forbidden</title>
</head>
<body>
<p>Directory access is forbidden.</p>
</body>
</html>
and save it as index.html and put it on your assets folder whenever some try to access your url http://test.com/assets then this index file will execute and its shows Directory access is forbidden.
I am using CodeIgniter Version 2.1 & trying to link assets like images,stylesheets, javascript files etc in my views by using, header.php:
<link href="<?php base_url();?>css/style.css" rel="stylesheet" />
my controller code, calls the view:
<?php
class Main extends CI_Controller{
public function index() {
$this->load->view('header');
}
The view file from which I am trying to load the asset is located
../application/views/header.php.
the css file is loaded:
../application/views/css/style.css
this does not work. I get 404 - Page not found error.then, I tried moving css/style.css outside ../application directory in webroot. To my surpise, having assets in webroot(outsite ../application/views) seems to work nicely.
Now,
My Question is
Is having our assets directly in webroot, outsite ../application directory right approach? If YES/NO, then why?
If having assets directly in webroot is a good idea, than should I move ../application/views directory in webroot as well? How?
PS: I am new to CodeIgniter framework, so unaware of the best practices
If you see this, the section where .htaccess is used to remove index.php from the urls, that has a rewrite condition:
RewriteCond $1 !^(index\.php|images|robots\.txt)
In this line, images is a folder that will be ignored while mod-rewriting. So, you can replace it by assets, put all your directly linking files there, and happily use them.
RewriteCond $1 !^(index\.php|assets|robots\.txt)
EDIT: my bad, hadn't seen the date the question was asked. nevertheless, should be useful for someone.
It is best to put your assets in the webroot folder. When requesting assest from the server (depending on your setup), it will start from the root directory and work it's way down.
http://yoursite.com/application/views/css/mystyles.css
if it's in the root you only need to go from there
http://yoursite.com/css/mystyles.css
Although it might be worth putting them all inside a folder (/assets) to keep them contained, as well as the ability to write a more effective rewrite rule (if you are trying to remove the index.php from the url) to ignore the single folder instead of all the individual folders (/css, /js, etc)
As for the views folder, it's best if you leave it in the application folder as CodeIgniter has a built in loader that automatically checks /application/views for the view file when you use the code $this->load->view('myview')
Although there are way to move the views folder, if you are new to CI it's probably best to leave it there for now.
For linking css you can do something like:
echo link_tag('css/mystyles.css');
Check this for ref: http://codeigniter.com/user_guide/helpers/html_helper.html
I was tring out below scenario:
Approach 1: Created an resource using rails scaffold, coded all the functionality i.e. index, new, edit and delete functionality - everything is working fine.
Approach 2: Tried to create manually the controller and views for the same functionality with different name for the model created in approach 1. The functionality is working fine.
But i get an RoutingError as:
Started GET "/userwebmgmts/stylesheets/ctlCalendar.css" for 127.0.0.1 at 2011-08-29 17:08:37 +0530
ActionController::RoutingError (No route matches "/userwebmgmts/stylesheets/ctlCalendar.css"):
In Route.rb file:
added the entry for the newly created controller/view as: get "userwebmgmts/index"
Can anyone help tell why i am getting the error for the controller created manually and not getting the error for the resources created using scaffold?
Thanks,
Sudhir C.N.
This is just a shot in the dark from the information you provided but...
Rails routes work in an order first a rack application checks the /public/ folder in the root of your application. If there is a matching file then it will load that.
Rails 3.1
If not it will load up the assets folder and create the pipe line and then check the application.css and application.js
Then it will load up the routes file and start ticking though your routes
If no route matches then you will get an exception thrown.
Your Problem
Your problem probably comes from the fact that your css is in the wrong place
With your file structure
/userwebmgmts/stylesheets/ctlCalendar.css
You should have a link in the page header that looks like this
<link rel="stylesheet" href="/userwebmgmts/stylesheets/ctlCalendar.css" type="text/css" media="screen" title="no title" charset="utf-8">
And the file should be located at
/public/userwebmgmts/stylesheets/ctlCalendar.css