DEV Community

Cover image for Make your WebApp public temporarily using ngrok πŸ”₯
Naman Gupta
Naman Gupta

Posted on

Make your WebApp public temporarily using ngrok πŸ”₯

Background πŸ€“

Why would you ever want to make your WebApp public temporarily? (without going through deployment process)πŸ€”

1- Testing - You are a frontend dev and wants to test your app in a different device.
2- Feedback - You want to share the current version of your app/chatbot/server with someone else in your team like other devs/Designers just to get it reviewed. This can save a lot of your time. (No waiting for long deployment process)

So, what's ngrok?
πŸ‘‰ In simple words, ngrok allows you to make you WebApp public without actually deploying on a cloud service. It provides a user-friendly domain that you can share with your remote users/friends/teammates to try/use your WebApp. It does so by making your machine to behave as a server by tunnelling all the traffic to your local port. It handles all the firewall/NAT bypassing itself. PubNub has explained it in a great way. Read here for more standard explanation.

Let the hacking begin πŸ‘¨β€πŸ’»πŸ‘©β€πŸ’» :

Note: Before moving forward make sure you have Node.js installed in your system. I recommend installing Node.js via nvm(Node Version Manager)

1- Create an account on ngrok ✍️

2- Go to dashboard so that you can get your Authtoken πŸ‘€

This will help us to see real-time data about remote connections.
Alt Text

2- Run your project πŸ’¨
For Eg- If we consider this basic restify server.

var restify = require('restify');

function respond(req, res, next) {
  res.send('hello ' + req.params.name);
  next();
}

var server = restify.createServer();
server.get('/hello/:name', respond);
server.head('/hello/:name', respond);

server.listen(8080, function() {
  console.log('%s listening at %s', server.name, server.url);
});
Enter fullscreen mode Exit fullscreen mode

Then it will run on port 8080. So, just start your server (it can be a frontend web app too).

Alt Text^ Let's keep it running and move to our final step.

3- Rollup ngrok and make this port publicly available πŸ“¦

πŸ‘‰ Open a terminal and enter this command

$ npx ngrok http 8080

Alt Text
PS: Your app might run on a different port so just replace 8080 with your respective port. Eg - For an app running on port 4000, the command will be $ npx ngrok http 4000

4- Share your URL πŸš€
That's it. You are live now at URL - http://917e082e741d.ngrok.io (provided by ngrok in the last step). Share and test your app πŸŽ‰πŸ₯³.

Note- You can even run ngrok your own cloud infra, customize subdomain, set region and do many more things using ngrok but that's really out of the scope of this blog. Many enterprises use ngrok for many different operations. You can read about those use cases here

That's it for today. Feel free to provide any type of feedback. I do appreciate that. Meanwhile, you can find me on Twitter @InsaneNaman.

Signing off. See you soon.

Top comments (3)

Collapse
 
benwinding profile image
Ben Winding

For an even simpler solution use the free: localhost.run/

Run app locally
./runapp --port 8080
In another terminal
ssh -R 80:localhost:8080 ssh.localhost.run

Now you can access your app globally!
myproject.localhost.run

Collapse
 
insanenaman profile image
Naman Gupta

Thanks for pointing this out. I didn't know about this but it looks great. I'll definitely look into it.

Collapse
 
insanenaman profile image
Naman Gupta

Can't agree more. Its really a great tool.