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

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?

laravellaravel-8ngrok


Solution 1:[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.

  1. Run ngrok, type
ngrok http 8000
  1. 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
  1. 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)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions