Blogs StudyGyaan

Host Local Web Project using NGROK: Django, Flask, ReactJS, Spring Boot

Last Updated: by

Bringing your web app project to the global stage often requires hosting it online. Ngrok offers an incredibly convenient way to expose your local development environment to the internet securely. In this blog post, we’ll delve into the process of hosting your web app project using Ngrok, allowing you to share your work with anyone, anywhere.

What is NgRok?

Ngrok is a free service that creates a secure connection between a port on your local machine and the internet. It generates a dynamic URL that gives temporary public access to your local app. While it’s handy for testing and showcasing, be cautious: it bypasses firewalls and exposes your app. The URL’s lifetime is short (default 8 hours) and can be cut shorter by closing the Ngrok terminal. It’s a balance between convenience and security, so use it wisely.

This video give a example of Python Django Project

How to use NGROK for Web Application Deployment

Step 1: Sign Up and Download Ngrok

  1. (Optional) Visit the Ngrok website (www.ngrok.com) and create an account.
  2. Download (https://ngrok.com/download) the Ngrok executable for your operating system.

Step 2: Set Up and Run Your Web App Project

Ensure your web app is running smoothly in your local development environment. Confirm that your app’s port configuration is correct (default is often 8000).

  • Django Project Runs on 8000 Port
  • Spring Boot Project Runs on 8080 Port
  • ReactJs Project Mostly runs on 5000 Port
  • Flask runs on 5000 Port

This method will work for any project. Just the thing that, your project should be running on which PORT NUMBER.

Step 3: Running Ngrok

  1. Open a terminal window and navigate to the directory where the Ngrok executable is located.
  2. Run the following command to expose your local server:
ngrok http 8000

Replace 8000 with your app’s port number if it’s different.

Host Local Web Project using NGROK: Django, Flask, ReactJS, Spring Boot

Step 4: Accessing the Exposed URL

  1. As soon as you run the Ngrok command, you’ll receive a public URL in the terminal.
  2. This URL can be used to access your web app from anywhere.

Step 5: Custom Subdomains (Optional)

  1. Ngrok provides the option to create custom subdomains for your project.
  2. To use a custom subdomain, sign in to your Ngrok account and follow the instructions provided on the dashboard.

Step 6: HTTPS Access (Optional)

  1. Ngrok supports secure HTTPS connections to your local server.
  2. Access your app using the HTTPS URL provided by Ngrok for enhanced security.

Step 7: Sharing Your Web App

  1. Share the Ngrok-provided URL with anyone you want to showcase your app to.
  2. Your web app, hosted through Ngrok, will be accessible to them with just a click.

Step 8: Managing Your Ngrok Session

  1. Keep the terminal window running to maintain the connection. If you close it, the connection will be terminated.

Step 9: Securing Your Ngrok Environment

  1. Be cautious when sharing the Ngrok URL, as anyone with the link can access your app.
  2. Ngrok provides token-based authentication for added security.

Conclusion

Ngrok offers a quick and straightforward solution for hosting your web app project during development, regardless of whether it’s a Django, Flask, or Spring Boot application. This guide has shown you how to get started with Ngrok, making it a valuable tool for web developers seeking to make their local projects accessible to a wider audience. Now, you can easily showcase your work and collaborate with others without the hassle of traditional hosting setups.

Blogs You Might Like to Read!