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

Dare2DoEngineering

16 Jul 202008:15

Summary

TLDRIn 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.

Outlines

00:00

📱 How to Show a Localhost Website on Mobile

The creator begins by welcoming viewers and explains how to show a local website on a mobile device or any other device. This approach is useful for demonstrating a local website without hosting costs. The video covers the entire process of setting up a local server, including downloading and using Ngrok, to provide a temporary URL that others can access. The creator provides step-by-step guidance, from downloading Ngrok to running commands in the Command Prompt, ensuring the local website can be viewed on an Android device. The creator highlights important points, such as keeping the CMD and local application open while sharing the demo link.

05:02

🖥️ Running the Website Demo and Important Tips

In the next step, the creator demonstrates running the demo on a mobile device by copying and pasting the generated link. The video shows that the local website is visible on the phone, proving the effectiveness of the method. The creator emphasizes the importance of not closing the Command Prompt or the localhost application while the link is active, as closing them will stop the website from being accessible. If closed, a new link will need to be generated. The creator concludes by offering to provide the used commands in the video description and encourages viewers to subscribe for more website-related tips.

Mindmap

Keywords

💡Localhost

Localhost refers to the local server environment on a user's computer or device where web development can be done without publishing it online. In the video, the presenter talks about showing a website from localhost to others without needing to host it, which saves hosting costs.

💡NGROK

NGROK is a tool that allows developers to expose a local server to the internet via a secure URL. In the video, the presenter demonstrates how to use NGROK to make a locally-hosted website visible on any device, including mobile phones, for demo purposes.

💡CMD (Command Prompt)

CMD, or Command Prompt, is a command-line interpreter in Windows. It is used in the video to run commands to navigate directories, execute NGROK, and set up the local server. The presenter explains how to copy the directory path and run specific commands in CMD.

💡Website Demo

A website demo is a demonstration of a website’s functionality and design to potential clients or stakeholders. The video explains how to provide a live demo of a website hosted locally by using tools like NGROK, saving on hosting costs during the demo process.

💡Hosting Costs

Hosting costs refer to the fees incurred to store a website on a server so that it can be accessed online. The presenter discusses how using NGROK helps avoid hosting costs by allowing a local server to be used for demonstrations instead of paying for online hosting.

💡Port Number

A port number is a numeric identifier for specific processes or services on a device, allowing data to be sent and received. In the video, the presenter instructs how to specify the port number for NGROK to use when exposing the local website.

💡Unzipping

Unzipping refers to extracting files from a compressed folder (ZIP file). In the video, the presenter mentions downloading and unzipping the NGROK file as a preparatory step before using it to set up the local server for the website.

💡HTTP/HTTPS

HTTP (HyperText Transfer Protocol) and HTTPS (HTTP Secure) are protocols used for transmitting data over the internet. In the video, the presenter shows how NGROK provides both HTTP and HTTPS links to share the locally hosted website securely.

💡Mobile Device Compatibility

Mobile device compatibility refers to how well a website or application functions on mobile devices. The video highlights the importance of testing the locally hosted website on mobile devices to ensure the design and functionality work properly before presenting it.

💡Control+C (Ctrl+C)

Control+C (Ctrl+C) is a keyboard command used to stop a process in CMD or other terminal windows. The presenter uses this to terminate the NGROK session, warning that doing so will stop the local website from being available via the shared link.

Highlights

Introduction to showing local websites on any device without hosting costs.

Explanation of the challenges of showing website demos without incurring hosting fees.

Demonstration of using Ngrok to show local websites on Android or any mobile device.

Step-by-step instructions on downloading Ngrok and setting it up.

Details on unzipping the downloaded file and running the Ngrok command in CMD.

Explanation of how to copy and paste the directory path in CMD for proper execution.

Description of how to generate a unique URL to share the local website demo with others.

Important note: Do not close the CMD or local application during the demo, as it will interrupt the website display.

Emphasis on how to handle errors if the Ngrok command does not work properly.

Solution for running Ngrok with proper port numbers and avoiding connection issues.

Demonstration of showing the website demo on a mobile phone by sharing the generated URL.

Reminder that if CMD is closed, a new link will need to be generated for the demo.

Clear explanation of the process to troubleshoot and regenerate links if needed.

Encouragement to ask questions and comment if users encounter problems during the process.

Final invitation to subscribe for more videos related to website development and solutions.