Over the past few years, it has been greatly proven that collaboration is key, it's one soft skill you should embrace as an engineer.
So let's get started.
I have had time to be part of some gatherings and one thing I've noticed is when developers try to share their progress on projects, they always have to go through having to do this long process:
Upload to github
Use a SaaS like Netlify, Cloudflare or Vercel to build and host
then share the preview link.
the downside is if they make the tiniest changes, they have to push, wait for it to finish the build then show up again. in some cases, the build will fail (maybe because you've not finished that particular feature or there's an annoying bug that won't fix easily until you visit stackoverflow or some other interesting reasons.) but you need to share this to your team/engineer friend badly.
so the idea of this whole article is to show you how to share your local server with your friends (instant collaboration and feedback)
Introduction
I've done this and I've got two methods.
NGROK
CloudFlare Tunnel (I'll write on this soon)
These two platforms are what I used and they are amazing. (incase you are wondering, Cloudflare Tunnel and NGROK both has a paid plan starting from $8, but their free plan works just enough)
Let's start with NGROK
Step 1: Download NGROK here: https://ngrok.com/download, choose your operating system, and follow the installation process, it's very easy to set up, but in case you run into any issues while setting up, make sure to check their docs here.
STEP 2: You need to create an account with ngrok, after you signup, you'll have to connect your account to your local system.
STEP 3: Running this command will add your authtoken to the default ngrok.yml configuration file, authenticate and connects your ngrok agent to your ngrok account.This will grant you access to more features and longer session times.
ngrok config add-authtoken {{the token NGROK gave you}}
after you do this, make sure to verify your account is authenticated and you should be good to go. What we'll be doing is tunnelling your local port to a HTTP server.
First, what is tunelling?
Tunneling, also known as "port forwarding," is the transmission of data intended for use only within a private (in this case your local server), through a public network in such a way that the routing nodes in the public network are unaware that the transmission is part of a private network.
so now that you know what tunneling is, NGROK will be the intermediary to providing the public server.
STEP 4: To start a HTTP tunnel forwarding to your local port, you need to have a local port running. let's say you are working on a Javascript project, either Vanilla js, React or Vue, if you run npm run dev or use go live, you'll be greeted with either of these default server that renders your code so you can preview it.
localhost:3000 or 127.0.0.1:5000
NOTE: These are default ports for most projects, yours can be different, just be sure to get the right one, now we have these links but now you can't share them with your partners/friends over the network because this is running only on your system.
Now this is where NGROK comes in, all you just need to do is invoke this command:
ngrok http [whatever port you want to share]
for example, if you are running a Vue.js app with the preview server localhost:5137, you are going to add 5173 --- (ngrok http 5173) without the square brackets, please.
now what this command does is it forward your local server through ngrok and ngrok provides you a temporary URL so you can share with anybody, so it keep throttling your port as long as your localhost is alive. this way, whoever you share the link with can see all updates in realtime, if you make changes, it works like HMR (Hot Module Reload).
I'd love to see what you can come up with, if you ever need extra hands or run into any issues while trying to setup, you can reach out to me on my socials, i'll be willing to help.
Thank you for reading my article! If you have any questions, let me know in the comments below!
See you at the next one 🤙🏾