Skip to main content

How to Use Ngrok for Your Local Project

How to Use Ngrok for Your Local Project

When you're developing a project locally, sometimes you need to expose it to the outside world — for testing webhooks (like Stripe, RevenueCat, Razorpay), sharing work with clients or teammates, or testing mobile apps. That’s where Ngrok becomes incredibly useful.

🔍 What is Ngrok?

Ngrok is a tool that creates a secure tunnel to your localhost. It provides a public URL that maps to your local web server. It's perfect for testing APIs, webhooks, or sharing local work without deploying it.

🛠️ How to Install Ngrok

Download it from the official website: ngrok.com/download

# For Linux/macOS:
unzip ngrok-stable-linux-amd64.zip
mv ngrok /usr/local/bin

# For Windows:
# Unzip and run ngrok.exe from CMD or add it to your PATH

🚀 How to Use Ngrok with Your Project

1. Start Your Local Server

For example, if you're running Laravel or Node.js on port 8000:

php artisan serve
# OR
npm run dev

2. Start Ngrok and Create a Tunnel

Open a new terminal and run:

ngrok http 8000

Explanation:

  • ngrok – the command-line tool
  • http – type of tunnel (HTTP server)
  • 8000 – the port your app is running on locally

This will output something like this:

Session Status      online
Account             YourName (Plan: Free)
Version             3.x.x
Forwarding          http://abc123.ngrok-free.app -> http://localhost:8000
Forwarding          https://abc123.ngrok-free.app -> http://localhost:8000

Important:

  • Public URL: https://abc123.ngrok-free.app
  • Local target: localhost:8000

You can now use this URL to:

  • Make API calls from mobile apps
  • Set webhook endpoints (e.g., Stripe, Razorpay, RevenueCat)
  • Share live demos with clients or teammates

Note: Free Ngrok accounts generate a new public URL each time. For permanent URLs, use a paid plan.

📦 Common Use Cases

  • Testing webhooks from RevenueCat, Stripe, Razorpay, etc.
  • Client demos of local projects
  • Accessing your local project from your phone or tablet
  • Debugging incoming HTTP requests

🔐 Optional: Sign Up & Auth Token

To unlock more features, sign up at ngrok.com and configure your auth token:

ngrok config add-authtoken YOUR_AUTHTOKEN

⚙️ Pro Tips

  • ngrok http 8000 --region=ap – choose an Asia-Pacific region for faster routing (for users in India, SEA, etc.)
  • ngrok http 8000 --inspect – enable request inspection in the local dashboard
  • http://127.0.0.1:4040 – Ngrok dashboard for inspecting HTTP requests/responses
  • Create a config file at ~/.ngrok2/ngrok.yml for reusable tunnel configurations

✅ Conclusion

Ngrok is a must-have tool for any developer working on local environments. Whether you're testing APIs, setting up webhooks, or demoing your work — Ngrok makes it easy and secure to tunnel your local app to the world.

💡 Give it a try on your next project — you’ll love how much time it saves!

Labels:

Comments

Post a Comment

Popular posts from this blog

How to Display Flash Messages in EJS using Node.js and Express

Displaying Flash Messages in EJS with Node.js and Express Flash messages are a great way to give users quick feedback — like "Login successful!" or "Please enter all fields!" . In this guide, you’ll learn how to implement them using: express-session connect-flash EJS templating 📦 Step 1: Install Required Packages npm install express express-session connect-flash ejs ⚙️ Step 2: Setup Express App and Middleware const express = require('express'); const session = require('express-session'); const flash = require('connect-flash'); const app = express(); // Set view engine app.set('view engine', 'ejs'); // Middleware app.use(express.urlencoded({ extended: true })); app.use(session({ secret: 'yourSecretKey', resave: false, saveUninitialized: true })); app.use(flash()); // Make flash messages available to all views app.use((req, res, next) => { res.lo...
Post a Comment
Read more

Laravel vs Node.js – Which One to Choose and Why?

Laravel vs Node.js – Which One to Choose and Why? Choosing the right backend technology is one of the most critical decisions in web development. Both Laravel and Node.js are widely adopted and loved by developers, but each comes with its unique strengths. In this post, I’ll compare both to help you decide which one suits your next project better. What is Laravel? Laravel is a PHP-based, open-source web application framework that follows the Model-View-Controller (MVC) architectural pattern. Known for its elegant syntax, Laravel simplifies development with features like authentication , routing , Eloquent ORM , and Blade templating . It’s ideal for developers looking for a structured and robust development experience. What is Node.js? Node.js is a JavaScript runtime built on Chrome’s V8 engine, allowing JavaScript to be used for server-side development. It uses a non-blocking, event-driven architecture, making it highly efficient and scalable ...
Post a Comment
Read more

15 Must-Know Git Commands for Every Developer

15 Must-Know Git Commands for Every Developer (With Explanations) Whether you're working solo or with a team, Git is an essential tool for modern developers. These commands help manage your codebase effectively and are frequently asked in tech interviews. Below is a curated list of the 15 most useful Git commands every developer should know. Command Description git init Initializes a new Git repository in your project directory. git clone <url> Clones a remote repository to your local machine. git status Shows the status of changes (staged, unstaged, untracked) in the working directory. git add <file> Adds changes in the specified file(s) to the staging area. git commit -m "message" Records the staged changes with a descriptive message. git pull Fetches...
Post a Comment
Read more