Search code examples
phplaravellaravel-blade

Laravel site rendering from local storage

Through the zip archive, the user can upload the website to my disk. Then I unzip it and put it in private storage.

After all these actions, it has the following structure

enter image description here

The landing folder is the site itself that was uploaded by the user.

This is the method I use to render this site:

Route::get('/{site}', function ($site) {
  View::addLocation(storage_path('app/' . $site));
  return view('index', ['param1' => 'test param']);
});

We open it by URL and I have the following result

http://127.0.0.1/landing

The site renders perfectly, but the styles and scripts do not load

enter image description here

Here is what I have in index.php

<!DOCTYPE html><html lang="ua"><head>
<meta name="viewport" content="width=480">
<title><?php echo $param1; ?></title>
<!-- Favicon -->
<link rel="icon" href="images/favicon_1aa7_19.png" type="image/png">
<link rel="shortcut icon" href="images/favicon_1aa7_19.png" type="image/png">
<link rel="stylesheet" href="/css/reset50406_1dab_1.css" type="text/css">
<link rel="stylesheet" href="/css/gothampro67c72_e5b0_2.css" type="text/css">
<link rel="stylesheet" href="/css/slickdc1c6_5bc5_3.css" type="text/css">
<link rel="stylesheet" href="/css/lightbox-minf2560_d182_4.css" type="text/css">
<link rel="stylesheet" href="/css/timecirclese646d_fd7a_5.css" type="text/css">
<link rel="stylesheet" href="/css/style528fc_4d07_6.css" type="text/css">
<!--{{HEAD}}-->
</head>

<body>
  <h1>Hello from landing site</h1>
</body>
</html>

How can I fix it?

Solution

  • You need to set the base url to be the root of your user's storage. You are using absolute paths (/css/...) so it will try to load your css files at yoursite.com/css/... instead of yoursite.com/landing/css/...

    Adding the <base> tag to your user's site inside <head> will fix the issue:

    <base href="https://yoursite.com/landing" target="_blank">

    Or, instead of using the base tag, you could also just not use absolute paths, and use relative paths instead:

    <link rel="stylesheet" href="css/reset50406_1dab_1.css" type="text/css">
<link rel="stylesheet" href="css/gothampro67c72_e5b0_2.css" type="text/css">
<link rel="stylesheet" href="css/slickdc1c6_5bc5_3.css" type="text/css">
<link rel="stylesheet" href="css/lightbox-minf2560_d182_4.css" type="text/css">
<link rel="stylesheet" href="css/timecirclese646d_fd7a_5.css" type="text/css">
<link rel="stylesheet" href="css/style528fc_4d07_6.css" type="text/css">

    Notice how it's now css/... instead of /css/...