Using Socket.io and Ngrok to Elevate Your Local Demos

As of now, all of my applications were built on local servers and demo’d primarily over zoom screen share. While it’s always fun to unveil and talk about your new shiny app, it’s not necessarily fun for those who are watching from a distance when there’s no way to interact with it. Most of my applications didn’t have any social features so I set out to try to change that.

There’s a couple libraries out there that work well but, I landed on Socket.io.

React.js / Socket.io / Node.js

Socket.io is a Javascript client library that allows real-time, bidirectional event-based communication between a browser and a server. It uses Node.js as it’s backend server and is compliant with a number of Javscript front-end frameworks. Socket.io ‘listens’ in on a specific server that monitors changes to the server and then broadcasts those changes to whoever may be connected at the time. When a user opens up a hosted website, Socket will try to establish a WebSocket connection to allow communication between the users browser and Node.js server. Depending on what the programmer wants to be logged to the server, Socket.io provides helper methods to allow ‘listen’, ‘emit’, and ‘broadcast’ depending on certain actions. Docs here.

Example of what how Socket builds helper methods. Shown here is the underlying code of socket.on(‘connect’) that Socket employs based on certain events.

Examples on how Socket’s helper methods are employed in production.

So now that we’ve allowed users to be able to not only manipulate their DOM but, other’s as well, how do we get other people access to our locally hosted server? Not only does our application need users to be put to its test but, a lot of the magic is lost when viewers are unable to demo and interact with the application for themselves. If they’re unable to test the application for themselves and really get a feel for how whole the application behaves, was there any point to coding the whole application?

Enter Ngrok. Ngrok is an application that allows you securely tunnel your local server to the internet so that others can access your application. The nice part of this tool is that it can be run directly from the terminal. It also allows you to inspect HTTP requests and responses if you open up http://localhost:4040 after you’ve started up your Ngrok server.

Ngrok Console UI

http://localhost:4040 after you start Ngrok

So there you have it. The combination of Socket.io and Ngrok are perfect for doing quick and live demonstrations, as well as testing. For more permanent live hosting solutions, Heroku is a perfect option.