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

Realtime Device Tracker using Node.js, Socket.IO & Leaflet

Realtime Device Tracker using Node.js, Socket.IO & Leaflet In this tutorial, you’ll learn how to build a realtime location tracking application that uses the browser’s GPS, Socket.IO for live communication, and Leaflet.js to display users on a map. 🚀 Project Overview Backend: Node.js, Express.js, Socket.IO Frontend: HTML, Leaflet.js, Socket.IO client Features: Live GPS tracking, multi-user map, disconnect cleanup 📁 Folder Structure project-root/ ├── app.js ├── package.json ├── src/ │ ├── public/ │ │ ├── css/ │ │ │ └── style.css │ │ └── js/ │ │ └── script.js │ ├── routes/ │ │ └── routers.js │ ├── socket/ │ │ └── socketHandler.js │ └── views/ │ └── index.ejs 🧠 How It Works Each user shares their location using the browser's navigator.geolocation API. Location is sent to the server via Socket.IO . The server broadcasts each user’s position to all clien...
Post a Comment
Read more

How to Send Emails in Node.js using Nodemailer and Ethereal

How to Send Email in Node.js using Nodemailer Email functionality is essential in modern web applications. Whether you're sending confirmation emails, password resets, or notifications, Node.js with Nodemailer makes this simple. In this blog, we'll walk through setting up email sending using Node.js , Express , and Ethereal Email for testing. 🧾 Prerequisites Node.js installed Basic knowledge of Express.js Internet connection 📁 Project Structure project-folder/ ├── index.js ├── .env ├── package.json └── app/ └── controller/ └── emailSendController.js 📦 Step 1: Install Dependencies npm init -y npm install express nodemailer dotenv npm install --save-dev nodemon 🔁 Configure nodemon (Optional but Recommended) Update your package.json with a custom start script: "scripts": { "start": "nodemon index.js" } 🔐 Step 2: Create a .env File Create a .env file a...
Post a Comment
Read more