NGROK SETUP GUIDE FOR HACKATHONS
Ngrok allows you to expose your localhost to the internet via a public URL. This is super
useful in hackathons when judges want to test your project on their own devices.
Step-by-Step Setup
1. Install Ngrok
- Option 1: Download from https://ngrok.com/download and unzip.
- Option 2: Install via npm: npm install -g ngrok
2. Sign Up & Get Auth Token
- Go to sign up for a free account.
- Copy your Auth Token from the Dashboard.
3. Connect Ngrok to Your Account
Run the following command (replace YOUR_TOKEN with your actual token):
ngrok config add-authtoken YOUR_TOKEN
4. Start Your Local Server
- Example for React/Vite:
npm install
npm run dev
- Note the port number (e.g., 5173).
5. Start Ngrok Tunnel
Run:
ngrok http PORT_NO
Replace PORT_NO with your server port (e.g., 5173).
Ngrok will give you a public HTTP and HTTPS URL.
6. (Optional) Fix for Vite 'Blocked Host' Error
Edit vite.config.js and add:
export default {
server: {
allowedHosts: ['.ngrok-free.app']
}
}
Then restart your dev server.
Notes
- Free Ngrok URLs change every time you restart Ngrok. Consider using a reserved domain
with a paid plan if you want a static URL.
- Make sure your firewall allows incoming connections.
- In hackathons, always test your Ngrok link on another device before sharing with judges.