How to Access Application Localhost from Anywhere | Localhost Website from another Computer

Summary

In this video, the creator demonstrates how to share a locally hosted website on any device, such as a mobile phone, using the tool Ngrok. He explains the step-by-step process of setting up Ngrok, running it via command prompt, and generating a shareable link for website demos. The video provides a practical solution for showing website demos without the need for hosting costs. The creator also emphasizes key points like keeping the command prompt and local server running during demos. The video is geared towards web developers and students needing to showcase their projects.

Takeaways

• 👋 Welcome to my YouTube channel! Today, I'll show you how to display a local website on any mobile device for a demo.
• 💡 The issue is that hosting a website for a demo can cost money, especially if the client decides not to proceed after seeing it.
• 📲 I will demonstrate how to show your locally hosted website on Android or any other device using ngrok without hosting expenses.
• 🌐 This method allows you to share a local website for testing and demos without worrying about hosting costs or downtime.
• 🔧 First, go to Google Chrome and type 'ngrok' to get started. Download ngrok for your system and unzip the file.
• 🖥️ After unzipping, run the ngrok command through CMD by navigating to the directory where ngrok is stored.
• 🔑 The ngrok command will generate a unique URL that you can share with anyone to view your local website online.
• 📱 You can copy and share this ngrok-generated URL on platforms like WhatsApp to showcase your website on mobile devices.
• ⚠️ Make sure not to close the CMD or stop the local server running the website, or the ngrok URL will stop working.
• 👍 If the connection is closed, a new link will be generated, and you'll have to share the new link again.

Q & A

What is the primary purpose of this video?

The primary purpose of this video is to explain how to show a local website on a mobile device or any other device using the ngrok service without the need for hosting, which can save hosting costs for demo purposes.

Why does the creator recommend using ngrok?

The creator recommends using ngrok because it allows users to show their local websites to others without hosting the site online, which saves money. This is especially helpful for demoing websites.

What is the significance of the number '3705' mentioned in the video?

The number '3705' refers to the port number of the local server where the website is being hosted. It is important for the user to remember this number to access the website through ngrok.

What initial steps are needed to set up ngrok on a Windows machine?

The user needs to go to Google Chrome, search for 'ngrok,' sign up or sign in to the ngrok website, download the ngrok ZIP file, extract it, and open the command prompt to set up the local server with the provided commands.

What is the key command used to start ngrok and why is it important?

The key command is 'ngrok http [your port number]'. This command is important because it connects the local server to a public URL, allowing others to access the website.

What happens if the user closes the command prompt or local server after starting ngrok?

If the command prompt or local server is closed, the link generated by ngrok will stop working. A new link must be generated if the user needs to show the demo again.

Why does the creator mention using WhatsApp in the video?

The creator mentions WhatsApp to demonstrate how the ngrok link can be shared with others. By sharing the link via WhatsApp, anyone with the link can view the local website remotely.

How can the ngrok-generated link be useful for mobile device testing?

The ngrok-generated link allows users to see how their local website will look and function on a mobile device, making it easy to test design responsiveness and functionality on phones.

What is the recommended action if the ngrok link stops working?

If the ngrok link stops working, the user should restart the command prompt and rerun the ngrok command. A new link will be generated, which can then be shared.

What additional help does the creator offer in case viewers face issues with website development?

The creator encourages viewers to comment or send direct messages on Instagram or Facebook if they encounter any issues related to website development, offering to provide further assistance.