When I use ngrok to load my Laravel app , it only displays basic html and no css

Question

The website my groupmates and I are working on is only locally available on my laptop. I want them to be able to open the website from their own homes, so that my frontend-focused members may edit and view the changes in the website right there and then. I also want my other group members to be able to test the website.

With all the ways I've tried to make our laravel app temporarily publically available through ngrok, they only show the basic HTML. No CSS and javascript.

First was from: https://vanrossum.dev/5-using-ngrok-with-laravel which involved adding this in the app's AppServiceProvider.php:

public function boot(\Illuminate\Http\Request $request)
    {
        if (!empty( env('NGROK_URL') ) && $request->server->has('HTTP_X_ORIGINAL_HOST')) {
            $this->app['url']->forceRootUrl(env('NGROK_URL'));
        }

        // other code
}

, running this on ngrok,

ngrok http -host-header=rewrite laravel-site.test:80

adding the received url to the .env file as NGROK_URL: url and then clearing all app caches after

Result: No CSS or js

Second way involved exposing port 9000 though ngrok, and running php artisan serve --port=9000 on my laravel app. (https://www.youtube.com/watch?v=s8efVe5c1Xg) Same thing, no CSS and js.

I also tried what's mentioned here: NGrok and Laravel But it only loaded the XAMPP Welcome Page

Our CSS and js are mixed with CSS and js files linked using asset() and the use of CDNs.

What should I do to be able to share the website with my groupmates?

Turmel

I had an issue now where Vite was running as a hot reload, which replaced the URL to assets. Just doing an npm run build and not running yarn dev to start the hot reload sorted it out and I could view the site on mobile etc. – Dismantle

Answer 1

I just had to follow this article to the tee: https://www.jobsity.com/blog/how-run-ngrok-test-share-your-local-development

1. Open your gitbash terminal in VSCode with your project added in the workspace. (To be sure make sure the path indicated in the gitbash terminal is your project's path) Turn on artisan server by typing

php artisan serve

This will be using 127.0.0.1 instead of localhost (default).

Leave the console and the artisan server process running. This is the Webserver listening for requests.

2. Run ngrok, type

ngrok http 8000

3. A forwarding link will appear similar to the one here: (Note that the forwarding link will be different for you)

Tunnel Status                 online
Version                       1.7/1.6
Forwarding                    http://284abb77.ngrok.com -> 127.0.0.1:8000

4. Copy the http link and send it to anyone you want to access the website for development or testing reasons. (Copying the https link will lead to HTML-only pages with no css/js)

Turmel

Linking to an article is fine, but the key steps should be summarized here in the answer itself. Stack Overflow answers should be self-contained because links often change/break. – Switchman

Cool, I had a problem similar to this but it was happening to another person, I was able to view the login page (Breeze) and used the contents inside the dashboard just fine, but 1 of my testers wasn't able to view the styles and the js. – Leavenworth

did not work for me – Jus

Has mixed content issue because of the lack off SSL – Cultrate

Answer 2

I just added a new meta tag to app.blade.php:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Dichroite

Answer 3

Well this error occurs because in some parts of your css or bootstrap the links are as http and what you need to do is force them to change into https and its pretty simple all you have to do is

1: Go to App->Providers->AppServiceProvider 2: Inside the Register Function write this down

if (env(key: 'APP_ENV') !=='local') {
  URL::forceScheme(scheme:'https');
}

3: Reload your website and youre good to go 😉

Nakano

Answer 4

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

When I use ngrok to load my Laravel app , it only displays basic html and no css so i try to add below link to header then it fix my problem

Kidwell

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Breastsummer

Answer 5

I found the solution: here

• npm run build

• Create the app/Http/Middleware/UpgradeToHttpsUnderNgrok.php:

public function handle(Request $request, Closure $next): Response
{
   if (str_ends_with($request->getHost(), '.ngrok-free.app')) {
       URL::forceScheme('https');
   }

   return $next($request);
}

• Register the middleware in the app/Http/Kernel.php:

protected $middlewareGroups = [
     'web' => [
                 ...
         UpgradeToHttpsUnderNgrok::class,
     ],
         ...
 ];

Abacus

This worked for me 👍 – Indecisive

Answer 6

As @Murtaza Noori answered, in case you still want to use http URL you can modify and use this code instead. So, you can visit both URL: http://127.0.0.1:8000/ or https://ngrok_url_.ngrok-free.app

if (env(key: 'APP_ENV') === 'local' && request()->server(key: 'HTTP_X_FORWARDED_PROTO') === 'https') {
    URL::forceScheme(scheme: 'https');
}

Naze

Thanks it works. I have to added in AppServiceProvider under Register function – Simson