Blade Parent CSS not called if route is one level lower

Question

I am building an admin interface for a web application.

The full directory structure is as follows:

|-main
| |- app
| |- bootstrap
| |- config
| |- database
| |- resources
|   | -views
|     |-admin
|      |-templates
|       |-template.blade.php
|      |-utils
|       |-foot.blade.php
|       |-head.blade.php
|     |-views
|       |-index.blade.php
|       |-users.blade.php
| |- routes
|   |- web.php
|
|-public_html
| |-admindash
|   |-dist
|     |-css
|     |-img
|     |-js
|   |-plugins
|     |-bootstrap
|     |-fontawesome-free
|     |-jquery

The head.blade file looks something close to this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <title>...</title>

  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="../admindash/plugins/fontawesome-free/css/all.min.css">
.
.
some more css here
.
.

</head>
<body class="hold-transition sidebar-mini">

foot.blade:

<script src="../admindash/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script 
.
.
.
More scripts here
.
.
.

</body>
</html>

The template blade then includes both of these and yields a section for child blades to populate:

@include('admin.utils.head')

<div class="wrapper">

    <!-- Main content -->
    <div class="content">
        @yield('maincontent')
    </div>
    <!-- /.content -->

</div>

@include('admin.utils.foot')

And then with the index and users blades in views folders I do the following

@extends('admin.templates.template')

@section('maincontent')
.
.
main html goes here
.
.
@endsection

All works fine to this point, I define my Controller functions which return the blade files and my web.php routes I define as well:

//Admin Dashboard routes
Route::group(['namespace' => 'Admin'], function (){
    Route::get('/admin/dashboard', 'DashboardController@adminHome')->name('AdminDashboard');
    Route::get('/admin/maintenance/users', 'DashboardController@displayUsers')->name('AdminDashboardUsers');
});

When I load the route /admin/dashboard the styles render perfectly, no errors. Tricky part is when I render /admin/maintenance/users then it all goes off, I get a skeleton html file with an error in console that the css resources could not be loaded.

NOTE: the css and js files are all located in a public_html folder outside of the project folder.

Because you are using relative Url... Please show the clear folder structure. — BadPiggie, Apr 17 '20 at 04:53
no, this project is running on shared hosting so I have to drop in the bootstrap template files in the public_html (publicly accessible) folder and the actual application code in a separate folder....so main and public_html are basically on the same level directory-wise — Imran Said, Apr 17 '20 at 05:22

score 1 · Accepted Answer · answered Apr 17 '20 at 05:33

The issue is your are using Relative URL. You need to use Full URL instead of Relative. And you are approaching Wrong Way to deploy your laravel in Shared Hosting.

Solution

Just put full url for all css and js files, Like below,

<link rel="stylesheet" href="http://www.yourdomain.com/admindash/plugins/fontawesome-free/css/all.min.css">

Best Practise (for Shared Hosting)

Change laravel public directory to public_html. (Refer Here)
Use url() or URL::assert() function to generate assert/full URLs (Refer Here)

How to deploy Laravel Application in Shared Hosting?

Blade Parent CSS not called if route is one level lower

1 Answers1

Best Practise (for Shared Hosting)