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.

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);
});

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

^ 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

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.