<h2>TOC</h2>
<ul>
<li><a href="#use-case" target="_blank" rel="noopener nofollow">Use Case</a></li>
<li><a href="#install-zrok-to-your-os" target="_blank" rel="noopener nofollow">Install zrok to Your OS</a></li>
<li><a href="#create-an-account" target="_blank" rel="noopener nofollow">Create an Account</a></li>
<li><a href="#see-the-initial-ui-of-zrok" target="_blank" rel="noopener nofollow">See The Initial UI of zrok</a></li>
<li><a href="#connect-your-device-with-your-account" target="_blank" rel="noopener nofollow">Connect Your Device with Your Account</a></li>
<li><a href="#the-magical-part-zrok-reserve-and-share" target="_blank" rel="noopener nofollow">The Magical Part - zrok Reserve and Share</a>
<ul>
<li><a href="#later-runs" target="_blank" rel="noopener nofollow">Later Runs</a></li>
</ul>
</li>
<li><a href="#important-advice" target="_blank" rel="noopener nofollow">Important Advice</a></li>
<li><a href="#if-you-have-any-questionssuggestions" target="_blank" rel="noopener nofollow">If you Have Any Questions/Suggestions…</a></li>
<li><a href="#and-if-i-made-a-mistake" target="_blank" rel="noopener nofollow">And If I made a mistake</a></li>
</ul>
 
<h2>Use Case</h2>
Suppose you’re using a web server framework like <a href="https://dev.to/kfir-g/understanding-fastapi-fundamentals-a-guide-to-fastapi-uvicorn-starlette-swagger-ui-and-pydantic-2fp7#:~:text=%0A%20%20%0A%20%202.%20Uvicorn%3A%20The%20ASGI%20Server%0A" target="_blank" rel="noopener nofollow">uvicorn</a> to run your backend service locally (e.g., on <code>http://localhost:8000</code>)
Ok, but that <code>http://...</code> is a local URL… So how do we share it publically instead of locally?
Use <a href="https://docs.zrok.io/docs/getting-started/#whats-a-zrok" target="_blank" rel="noopener nofollow">zrok</a>! 🌌
(Side note: Check the first 2 paragraphs <a href="https://github.com/orgs/ansari-project/projects/3/views/1" target="_blank" rel="noopener nofollow">here</a> for a more eloquent explanation of when to use zrok :])
<img src="https://media1.giphy.com/media/AWYdAubkFK8yr0cpdE/giphy.gif" alt="spaceship gif">
 
<h2>Install zrok to Your OS</h2>
Based on your Operating System (OS), follow the steps in the <code>guide</code> page reached from <a href="https://docs.zrok.io/docs/guides/install/" target="_blank" rel="noopener nofollow">here</a>.
When you’re done, executing <code>zrok -h</code> in a <a href="https://medium.com/@ayogun/shell-vs-bash-vs-powershell-vs-cmd-fa916895aab" target="_blank" rel="noopener nofollow">terminal</a> should give you the list of commands that you can run using zrok!
Side note 1: Regarding Windows users, the commands written in their <a href="https://docs.zrok.io/docs/guides/install/windows/" target="_blank" rel="noopener nofollow">guide page</a> are executed via <a href="https://www.addictivetips.com/windows-tips/open-powershell-in-a-specific-location/#:~:text=This%20is%20the%20simplest%20way%20to%20open%20PowerShell" target="_blank" rel="noopener nofollow">powershell</a>.
Side note 2: Personally, I just get the <code>zrok.exe</code> file, add it to the repository’s root folder, add <code>zrok.exe</code> to <code>.gitignore</code>, then run <code>zrok</code> commands in the terminal instead of adding zrok to windows’ <a href="https://janelbrandon.medium.com/understanding-the-path-variable-6eae0936e976" target="_blank" rel="noopener nofollow">PATH</a> <a href="https://towardsdatascience.com/the-path-variable-for-the-confused-data-scientist-how-to-manage-it-b469bfb45785" target="_blank" rel="noopener nofollow">variable</a>… however, that solution is a workaround, and should not be standardized :]
&lt;img width=“10%” style=“width:10%” src=“<a href="https://media.giphy.com/media/xo8Ujjb22hsQsZodzs/giphy.gif" target="_blank" rel="noopener nofollow">https://media.giphy.com/media/xo8Ujjb22hsQsZodzs/giphy.gif</a>”&gt;
 
<h2>Create an Account</h2>
Create an account by doing the following:
<ol>
<li>Visit zrok’s getting started page <a href="https://docs.zrok.io/docs/getting-started/" target="_blank" rel="noopener nofollow">here</a>.</li>
<li>Click on “Get an Account” under “Hosted zroknet”.</li>
<li>Click on “sign up” at the bottom of the form.</li>
<li>Fill in your credentials then click sign up.</li>
<li>You’ll then be redirected to <code>https://myzrok.io/settings</code>, where you’ll fill in the same credentials</li>
<li>(again ಠ_ಠ)</li>
<li>Click <code>SAVE</code>, then you’ll be presented with this command: <code>zrok enable yOUrPriVaTeToken</code>, store this command carefully in a notepad or something, we’ll need it soon.</li>
<li>Then login to <a href="https://api.zrok.io/" target="_blank" rel="noopener nofollow">https://api.zrok.io/</a> by using your credentials…</li>
<li>(again! (╯°□°）╯︵ ┻━┻ )</li>
<li>Done!</li>
</ol>
 
Side note: You could’ve also partially done this via terminal, as shown <a href="https://tech-couch.com/post/sharing-local-websites-and-files-with-zrok#setting-up-the-zrok-client" target="_blank" rel="noopener nofollow">here</a>
<img src="https://media1.giphy.com/media/7HdL5wSUWnVyXk48MR/giphy.gif" alt="are you serious gif">
 
<h2>See The Initial UI of zrok</h2>
Upon successfully logging in, you’ll see the <a href="https://api.zrok.io/" target="_blank" rel="noopener nofollow">https://api.zrok.io/</a> page looking like this:
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xiz7wkadsqar2cnc9lu.png" alt="UI of api.zrok.io">
Now, you can use <a href="https://netfoundry.io/why-netfoundry/" target="_blank" rel="noopener nofollow">NetFoundry’s</a> 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 <code>Enable your environment</code>, you’ll see the command that I told you to store in a notepad :].
 
<h2>Connect Your Device with Your Account</h2>
Run the <code>zrok enable yOUrPriVaTeToken</code> command in your terminal to connect your account with your device.
Then, read the entire <code>Enabling Your zrok Environment</code> section from the official docs <a href="https://docs.zrok.io/docs/getting-started/#enabling-your-zrok-environment" target="_blank" rel="noopener nofollow">here</a>, as it explains the above command, and then shows you what the UI of <code>api.zrok.io</code> should now look like.
<img src="https://media1.giphy.com/media/uZjtSy1BYPNcXj5MTA/giphy.gif" alt="I ain't reading all of that gif">
 
<h2>The Magical Part - zrok Reserve and Share</h2>
Now for the good part, assuming you are currently running your backend server, e.g., something like this (IDE is <a href="https://shiftmag.dev/vs-code-171/" target="_blank" rel="noopener nofollow">VSCode</a> btw):
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9s7jao8cmsuva46d6hq.png" alt="Uvicorn code and terminal output">
Then, you’ll open another terminal, like so:
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwpz55wgzecdbkbk2ljy.png" alt="How to open another terminal">
Then, execute this command:
<code>zrok reserve public localhost:8000 -n youruniqueinstancename</code>
If you don’t change the last argument above, the final frontend URL will appear like this: <code>https://youruniqueinstancename.share.zrok.io</code>, as can be seen here:
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14uqrlzfezxnvda7h7jv.png" alt="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 <a href="https://docs.zrok.io/docs/getting-started/#proxy-backend-mode" target="_blank" rel="noopener nofollow">eventually bind</a> with your localhost URL.
To make it actually bind with your localhost, run this final command:
<code>zrok share reserved youruniqueinstancename</code>
Now, if we try to send requests using any online REST client tool, e.g., <a href="https://restninja.io/" target="_blank" rel="noopener nofollow">restninja</a>:
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6w9yoyhsi7xvg6acfm5i.png" alt="Using restninja REST client to test the shared zrok instance">
You’ll see the terminal returning this output:
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1i5qutushw7m7o5pupq.png" alt="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!
<img src="https://media1.giphy.com/media/26ufdipQqU2lhNA4g/giphy.gif" alt="Mind explosion gif">
Side note: To terminate the session, hit <code>ctrl+c</code> (windows) or close the terminal from here (still in VSCode):
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77tavq2jawy63u522yqs.png" alt="How to close the terminal in VSCode">
 
<h3>Later Runs</h3>
In future terminal sessions, it’s sufficient to run <code>zrok share reserved youruniqueinstancename</code> to start a new session of binding public zrok URL with localhost :].
 
<h2>Important Advice</h2>
I highly suggest fully reading zrok’s <a href="https://docs.zrok.io/docs/getting-started/" target="_blank" rel="noopener nofollow">getting started page</a>, then all the sub-pages under <a href="https://docs.zrok.io/docs/concepts/" target="_blank" rel="noopener nofollow">concepts</a>, as they greatly explain the when/where/how’s of zrok.
 
<h2>If you Have Any Questions/Suggestions…</h2>
Your participation is most welcome! 🔥🙌
 
<h2>And If I made a mistake</h2>
Then kindly correct me :] &lt;3
<img src="https://media1.giphy.com/media/z6JcPVxFbsbNE5WNMx/giphy.gif" alt="goodbye gif">

The official Open Source daily.dev Squad. 

Open Source

Learn how to use zrok to share your locally hosted web server as a public URL. The guide covers installation, creating an account, and connecting your device. Detailed steps show how to reserve and share your local server using zrok commands, including binding with a public URL for easy sharing and testing.

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

I’m an OpenZiti maintainer, occasional zrok contributor. Nice write up!

This is w , i have one question tho
do you have any experience with how zrok performs with different types of applications? For example, how it handles WebSocket connections or high-traffic scenarios?