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?

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. — Thomas
– Thomas, Commented Dec 8, 2023 at 15:51

Jessy Mutaj Hifjudin · Accepted Answer · 2023-02-15 13:23:52Z

28

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

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

edited Feb 15, 2023 at 13:23

answered Feb 15, 2023 at 13:23

Jessy Mutaj Hifjudin

2613 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tyler2P · Accepted Answer · 2023-01-09 18:45:32Z

8

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 😉

edited Jan 9, 2023 at 18:45

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Jan 8, 2023 at 17:16

Murtaza Noori

1011 silver badge4 bronze badges

Comments

ellajhonm · Accepted Answer · 2021-11-01 09:51:21Z

3

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

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.

Run ngrok, type

ngrok http 8000

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

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)

edited Nov 1, 2021 at 9:51

answered Oct 30, 2021 at 4:39

ellajhonm

1491 gold badge1 silver badge9 bronze badges

4 Comments

tdy Over a year ago

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.

Eduardo Over a year ago

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.

afikri Over a year ago

did not work for me

Rob Over a year ago

Has mixed content issue because of the lack off SSL

Rinaldi Pratama · Accepted Answer · 2024-02-01 08:23:10Z

2

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');
}

answered Feb 1, 2024 at 8:23

Rinaldi Pratama

472 bronze badges

1 Comment

Mandeep Singh Over a year ago

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

Tim R · Accepted Answer · 2023-06-02 11:23:49Z

1

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

edited Jun 2, 2023 at 11:23

Tim R

3,1521 gold badge5 silver badges22 bronze badges

answered Jun 1, 2023 at 20:20

Marwa Gunn

113 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related