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?

Answer 1

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

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

Answer 2

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)

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

Answer 4

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,
     ],
         ...
 ];