Whilst developing a front-end template at work, I deployed the working site to a dev environment for approval. All looked good on the desktop, and in chrome dev tools. However, after viewing the dev environment on my personal Samsung Galaxy S10 phone, I realised the mobile view was not displaying correctly, in particular the banner background image position and size.
This was problematic as I did not want to keep making amendments to the styling, then redeploying the app or styling on the CDN, to then view on my phone. Enter Ngrok and BrowserStack.
Ngrok
Ngrok creates a tunnel to allow you to access your Visual Studio dev environment on another device over the internet. So basically I can now view the dev testing environment on my personal phone over a generated temp url.
https://www.npmjs.com/package/ngrok
Installing was relatively straightforward, following the guide above. In VS npm console I just installed the command globally:
npm install ngrok -g
Next I had to authorise the software with the access token I received after signing up for a free account, using:
ngrok authtoken <auth token>
Then start the tunnel using:
ngrok http 64000 --host-header="localhost:64000"
Without the ' --host-header="localhost:64000" ' I was getting a bad request when trying to connect to the environment, so this part was essential for me.
Notes:
Local app must be run first before the ngrok commands in powershell are run.
The following command worked for blazor:
ngrok http https://localhost:port --host-header=rewrite
https://stackoverflow.com/questions/68459491/how-do-i-fix-ngrok-invalid-http-response-error
BrowserStack
BrowserStack is a great tool which lets you see your site running on a wide variety of real and emulated devices. You can also open the dev tools on the mobile phone browsers, which is really helpful for design and debugging.
BrowserStack has been an invaluable tool at work, because inevitably, our client's websites do not function correctly on certain iOS devices at times. Without a physical iOS device myself, it is next to impossible to debug without BrowserStack.