NGROK - Expose your localhost to the Internet

What is NGROK?
  • ngrok is a tool that allows you to expose your local web server to the internet. 
  • It creates a secure tunnel from your local machine to the internet, providing a public URL that can be used to access your local server. 
  • This is particularly useful for testing and sharing your local development environment with others.

Key Features of NGROK:
  • Localhost Tunneling: ngrok creates a tunnel from your local machine to the internet, allowing you to share your local web server with a public URL.
  • Webhook Testing: You can receive webhooks directly on your local machine, making it easier to test and debug webhooks from services like Slack, GitHub, and more.
  • Local Previews: Demo a website running on your local machine to clients or stakeholders without deploying to a staging site.
  • Secure Connections: ngrok provides secure connections with HTTPS, ensuring that your data is encrypted during transmission.
  • Inspection and Replay: Inspect and replay requests to your local server for fast development and debugging.


How to Use NGROK:

Download and Install ngrok: 
Go to the ngrok website and download the executable for your operating system.

Add your authtoken
Run the following command to add your authtoken to the default ngrok.yml configuration file.
ngrok config add-authtoken <auth_token_given_on_ ngrok_website>

Deploy your app online
Put your app online at an ephemeral domain forwarding to your upstream service. For example, if it is listening on port http://localhost:8080, run:
ngrok http http://localhost:8080

Copy the Public URL: 
ngrok will provide a public URL that you can use to access your local server. For example:
Forwarding http://abc123.ngrok.io -> http://localhost:80



By using ngrok, you can easily share your local development environment with others and test webhooks and other integrations without deploying your application to a live server.

Comments

Post a Comment

Write something to CodeWithAbdur!

Popular posts from this blog

Quotation marks to wrap an element in HTML

In HTML, quotation marks can be used to wrap an element, providing visual emphasis and indicating that the enclosed content represents a quotation.  This styling technique enhances the presentation of quoted text on web pages. Setting default quotation marks: To set quotation marks to wrap an element in HTML, you can use the `quotes` CSS property along with the `content` property to specify the quotation marks to be used (the below example uses the default quotes value, so it is not mentioned as can be seen). Here's how it can be achieved: /* Define the quotation marks */ .q:before { content: open-quote; } .q:after { content: close-quote; } In this CSS: - `open-quote` represents the opening quotation mark. - `close-quote` represents the closing quotation mark. Now, you can apply the `.q` class to elements where you want to set quotation marks: <p class="q">This is a quoted text.</p> This will render as: “ This is a quoted...
Read more

The Basic Structure of a Full-Stack Web App

A basic structure of a full-stack web application typically consists of three main components: the front end, the back end, and the database.  Each component serves a specific role in the application's architecture. Here's an overview of the basic structure: Front End: The front end is the user-facing part of the application that users interact with directly. It's responsible for presenting data to users, collecting user input, and providing a user-friendly interface. Common technologies used in the front end include HTML, CSS, and JavaScript. Front-end frameworks and libraries like React, Angular, or Vue.js are often used to build interactive and dynamic user interfaces. Basic Components of the Front End: User Interface (UI) Components User Input Forms Display of Data Interaction Logic (JavaScript) Back End: The back end is the server-side portion of the application responsible for handling business logic, data processing, and serving data to the front end. It communicates...
Read more

Making GUI Calculator in Tkinter Python

from tkinter import * abdur = Tk () abdur . geometry ( "480x600" ) abdur . minsize ( 480 , 600 ) abdur . maxsize ( 480 , 600 ) abdur . wm_iconbitmap ( "calc.ico" ) abdur . title ( "Calculator - Made by AbdurCodes" ) def calc ( event ):     global entry_val     btext = event .widget.cget( "text" )         try :         if btext == "=" :             if entry_val . get (). isdigit ():                 value = int ( entry_val . get ())             else :                 value = eval ( screen . get ())                             entry_val . set ( value )             screen . update ()                             ...
Read more