DEV Community

Cover image for From LocalHost to Public Endpoint - Quickly Share Your Work With zrok
OdyAsh
OdyAsh

Posted on

From LocalHost to Public Endpoint - Quickly Share Your Work With zrok

TOC

 

Use Case

Suppose you're using a web server framework like uvicorn to run your backend service locally (e.g., on http://localhost:8000)

Ok, but that http://... is a local URL... So how do we share it publically instead of locally?

Use zrok! 🌌

(Side note: Check the first 2 paragraphs here for a more eloquent explanation of when to use zrok :])

spaceship gif

 

Install zrok to Your OS

Based on your Operating System (OS), follow the steps in the guide page reached from here.

When you're done, executing zrok -h in a terminal should give you the list of commands that you can run using zrok!

Side note 1: Regarding Windows users, the commands written in their guide page are executed via powershell.

Side note 2: Personally, I just get the zrok.exe file, add it to the repository's root folder, add zrok.exe to .gitignore, then run zrok commands in the terminal instead of adding zrok to windows' PATH variable... however, that solution is a workaround, and should not be standardized :]

 

Create an Account

Create an account by doing the following:

  1. Visit zrok's getting started page here.
  2. Click on "Get an Account" under "Hosted zroknet".
  3. Click on "sign up" at the bottom of the form.
  4. Fill in your credentials then click sign up.
  5. You'll then be redirected to https://myzrok.io/settings, where you'll fill in the same credentials
    1. (again ಠ_ಠ)
  6. Click SAVE, then you'll be presented with this command: zrok enable yOUrPriVaTeToken, store this command carefully in a notepad or something, we'll need it soon.
  7. Then login to https://api.zrok.io/ by using your credentials...
    1. (again! (╯°□°)╯︵ ┻━┻ )
  8. Done!

 

Side note: You could've also partially done this via terminal, as shown here

are you serious gif

 

See The Initial UI of zrok

Upon successfully logging in, you'll see the https://api.zrok.io/ page looking like this:

UI of api.zrok.io

Now, you can use NetFoundry's public zrok instances to share your web server! Let's see how...

Side note: If you click on the 🔽 icon next to your email, then click on Enable your environment, you'll see the command that I told you to store in a notepad :].

 

Connect Your Device with Your Account

Run the zrok enable yOUrPriVaTeToken command in your terminal to connect your account with your device.

Then, read the entire Enabling Your zrok Environment section from the official docs here, as it explains the above command, and then shows you what the UI of api.zrok.io should now look like.

I ain't reading all of that gif

 

The Magical Part - zrok Reserve and Share

Now for the good part, assuming you are currently running your backend server, e.g., something like this (IDE is VSCode btw):

Uvicorn code and terminal output

Then, you'll open another terminal, like so:

How to open another terminal

Then, execute this command:

zrok reserve public localhost:8000 -n youruniqueinstancename

If you don't change the last argument above (which is called a share token), the final frontend URL will appear like this: https://youruniqueinstancename.share.zrok.io, as can be seen here:

api.zrok.io after running command

As you noticed from the screenshot above, a connection has been reserved with the token name that you used in the last argument of the aforementioned command,and is now configured to eventually bind with your localhost URL.

To make it actually bind with your localhost, run this final command:

zrok share reserved youruniqueinstancename

Now, if we try to send requests using any online REST client tool, e.g., restninja:

Using restninja REST client to test the shared zrok instance

You'll see the terminal returning this output:

Terminal showing requests coming to shared zrok instance

Which means we can now share this public URL for quickly testing and/or displaying our work with others!

Mind explosion gif

Side note: To terminate the session, hit ctrl+c (windows) or close the terminal from here (still in VSCode):

How to close the terminal in VSCode

Tricky note: the youruniqueinstancename token is globally unique. In other words, if a developer "Bob" currently hosts a zrok public URL with this token, and a developer "Steve" simultaneously tries to create a public URL with that exact token, it won't work (will give you a shareConflict error).

 

Later Runs

In future terminal sessions, it's sufficient to run zrok share reserved youruniqueinstancename to start a new session of binding public zrok URL with localhost :].

 

Important Advice

I highly suggest fully reading zrok's getting started page, then all the sub-pages under concepts, as they greatly explain the when/where/how's of zrok.

 

If you Have Any Questions/Suggestions...

Your participation is most welcome! 🔥🙌

 

And If I made a mistake

Then kindly correct me :] <3

goodbye gif

Top comments (0)