Base solution for your next web application
Open Closed

Viewing localhost on Mobile #6865


User avatar
0
XugoWebTeam created

Hello,

Has anyone had any success viewing the localhost version of their application on their phones? This is often necessary when you're doing UI type stuff, as having to deploy after each change is not really an option.

I've had some success with a tool called ngrok.com. I'm able to get the page to load, but the external CSS file (the bundle) fails to load.

Any ideas?


9 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team

    but the external CSS file (the bundle) fails to load.

    What is the specific error?

  • User Avatar
    0
    alper created
    Support Team

    Hi,

    Visual Studio uses Kestrel to serve your AspNet Core website, and Kestrel doesn't allow you to access the website out of your computer (localhost). You have to add your website to your IIS or make Kestrel accessible to your network.

    • https://weblog.west-wind.com/posts/2016/sep/28/external-network-access-to-kestrel-and-iis-express-in-aspnet-core
    • https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/iis/?view=aspnetcore-2.2
  • User Avatar
    0
    XugoWebTeam created

    Hi maliming

    Theres no error, it just doesn't load the style.bundle.css.

    However, the 'other' styles (those not being compiled into style.bundles.css) are in fact working. i.e those styles that belong to LESS files of particular Components, and are injected into the page via embedded style tags

    @Alper - I'm not using Visual Studio, Im using VS Code.

  • User Avatar
    0
    maliming created
    Support Team

    it just doesn't load the style.bundle.css.

    Can you see the web request?

  • User Avatar
    0
    XugoWebTeam created

    Can you see the web request?

    @maliming - Yes I can on the desktop browser. And in fact the styles render fine there. It is only on a phone that it doesnt. (I've tried multiple browsers)

  • User Avatar
    0
    maliming created
    Support Team

    hi @xugowebteam

    I also tested it with ngrok, but it seems that I have not found the problem.

    ngrok provides a real-time web UI where you can introspect all of the HTTP traffic running over your tunnels. After you've started ngrok, just open http://localhost:4040 in a web browser to inspect request details.

    Can you look at the mobile phone's network request here? http://localhost:4040

  • User Avatar
    0
    alper created
    Support Team

    open CMD go to your *.Web.Host directory (if you're using Angular) write the following commands to start your host. this will let you access the host outside of your development computer.

    SET ASPNETCORE_ENVIRONMENT=Development
    SET ASPNETCORE_URLS=http://*:22742
    dotnet run
    
  • User Avatar
    0
    XugoWebTeam created

    Hi @maliming

    re: ngrok - No im not seeing any requests for external CSS files. I do for various JS files.

    Strangely if I view the ngrok URL on Chorme on desktop, I DO see the requests for the external CSS files. But if I hover over the files names it displays them as :

    http://localhost:4200/assets/metronic/dist/html/blue/assets/demo/blue/base/style.bundle.css

    rather than

    http://c508c851.ngrok.io/assets/metronic/dist/html/blue/assets/demo/blue/base/style.bundle.css

    Is yours the same?

  • User Avatar
    0
    maliming created
    Support Team

    Your front end is Angular. AppBaseUrl (localhost:4200) is used in many places in Angular applications.

    I think ngrok can't be implemented.