Tunneling using Ngrok - What, Why, and How to?

Sabarish Rajamohan — Thu, 24 Sep 2020 15:10:05 +0000

Hello everyone. Today we'll be looking at what ngrok is, why as a developer you would need it, and how to install, configure, and use ngrok.

Before diving into the content of this article, let me tell you a scenario that you would have faced.

Suppose you want to demo your developed application with your colleagues or your team-mates or to anyone you want to receive feedback from. If you were like me and didn't know about ngrok before,

You would have asked the person to either swing by your desk or took your laptop to them to demo it.

You might have pushed your changes to a Github repository, asked them to clone it in their local machine and view it.

You would have deployed it and shared the link to access the deployment.

What if there is an alternative to this? This is where **Ngrok* comes into play.*

What is Ngrok?

Ngrok is an application developed by Alan Shreeve, enables developers to expose their local development servers to the internet. It basically creates a tunnel to your local development server and generates two random subdomains on ngrok.com - one http and another with https. With these generated addresses, you can view the locally developed application from anywhere through the Internet provided that the development server is kept running.

They provide various tunnel servers around the world and locations and even the ngrok server software can be self-hosted on a VPS or dedicated server. They provide a free and few paid plans with some additional features to each plan like - Custom domain, Google Apps SSO, Whitelabel Domains and much more.

Why do you need `ngrok`?

Other than just demoing developed applications, ngrok can also be used for :-

Running a personal service of your own on the cloud.
Testing out mobile apps that have a local backend server.
Building and testing out webhooks.

We covered the What and the Why. Now let's move on to the How

How to use `ngrok`?

Using ngrok is so simple. Before you start tunnelling your local servers using ngrok,

Setup and installation
Configuring ngrok
Launching the tunnel

1. Setup and installation

To start using ngrok, we have to signup an account on ngrok.
After you signup, it takes you to the dashboard. Your dashboard must look something like this.

Download the correct package according to your operating system. The steps to install are mentioned there but I am going to put it down for you as well.

For Windows :-
Download the zip and extract the executable file and run it.

To access ngrok from anywhere on your command prompt,

Move executable file ngrok.exe to C:\Windows\system32\ngrok.exe
Add Environment Variables via UI (search for "Edit the environment variables for your account" in the search bar next to windows logo => double click on Path under Users Variables for yourusername => Click New => add your path C:\Windows\system32\ngrok.exe => click OK.
Restart your bash and you should be able to run "ngrok http 80" command.

For Mac / Linux :-
Run the below command on your terminal.

unzip /path/to/ngrok.zip

Either move the file to /usr/local/bin or add the path to ngrok to .bashrc or .zshrc according to the shell you're using.

2. Configuring `ngrok`

Remove the ./ and run the following commands if you're doing this on Command Prompt on Windows.

The next step is to authenticate the client you have installed on your system with your ngrok account.

Run the following command on your terminal / prompt :-

./ngrok authtoken YOUR_AUTH_TOKEN

YOUR_AUTH_TOKEN is the token that is displayed on the dashboard. This saves the auth_token of your account to a .yml file in your local machine.

3. Launching the tunnel

This is the last step to launch your local development server to the internet via ngrok tunnel without deployment.
Type in the below command :-

./ngrok http 80

Here 80 is the port number where your local server is running. You would have to change it to the PORT NUMBER of the local server you are running. Make sure the development server for the application you want to tunnel is up and running.

For example,

./ngrok http 3000

./ngrok http 5000

By running this command, your terminal / prompt should look something like this.

This shows the randomly generated subdomains where your application is accessible. Additionally, you also get to use the local dashboard at port 4040, where you can see all the requests being made through the generated subdomains.

That is it!! You have successfully launched a `ngrok` tunnel for your application

In the free plan, you can only have one session. You can close your session by giving Ctrl + C or killing the ngrok process.

I hope you got a clear idea on what ngrok is, why it is needed and how to tunnel your local application through ngrok. Let me know if it helped you in the comments :)

References:

Still curious on how ngrok does it for you? Check out these resources.

CSS Gamification: Flexbox Froggy

Sabarish Rajamohan — Tue, 15 Sep 2020 11:22:16 +0000

As a developer who works predominantly on the backend, I have always found myself taking more time trying to use the right CSS properties, to get the right kind of style for my website or my application.

Especially aligning elements correctly and spacing them.
Oh boy, that was tough !! At least for me.

Enter Flexbox

So, I fired up Chrome and browsed through several articles which gave me an idea of how to use flexbox in my CSS. And I discovered this game where you are able to learn flexbox by practically trying it out right away.

FlexBox Froggy

So, this game, developed by CodePiP, is free to play, and really helpful if you want to try out flexbox. You might need to have the knowledge of basic CSS, and need not even know or understand flexbox before. You don't even need to create an account to play it either.

The game involves 24 levels, where you have to help Froggy, the frog, and his friends to reach the lilypads placed around them.
The difficulty increases as we progress through the levels.

There are three difficulty levels:-

Beginner - Tips and directions are displayed
Intermediate - Tips and directions are disabled, but the difficulty increases as you progress through consecutive levels.
Expert - Random levels and no tips are displayed.

If you're a person who is already familiar with flexbox and just wants to try out the game, try the Intermediate or Advanced level.

It was really fun as I made progress through the levels.
Before I tell you about what all I was able to learn from the game, Here's an image from MDN docs to help give you an understanding of the flex container and the axes.

Each of the properties mentioned below take values to position your elements according to your need.

justify-content: Aligns elements across the main axis, i.e horizontally.
align-items: Aligns elements across the cross-axis, i.e vertically.
flex-direction: Defines the direction of the main axis.

Quick Note: When the flex-direction property takes the value as column, justify-content and align-items change their axes with each other. If you play through the game, it occurs on Level 11.

flex-wrap: Takes the child elements to additional lines when they overflow
flex-flow: A shorthand property for both flex-direction and flex-wrap
align-content: Determines the spacing between the lines. It has no effect if there is only one line. Level 21 helps us understand this

As a beginner, I found it very useful to learn flexbox. Do try out the game and let me know in the comments how it turned out for you 💜

References : MDN Docs

DEV Community: Sabarish Rajamohan