Intro
We’ve made it easier to share your local projects with a single click and debug requests by integrating the ngrok service in Wappler.
Ngrok is a service that enables you to give external access to your local development server. Ngrok creates an address in the cloud that people can use to access your local server, meaning that no public IP or domain name on the local machine is needed. Similar functionality can be achieved with Reverse SSH Tunneling, but this requires more setup as well as hosting of your own remote server.
Using ngrok you can easily send your clients preview URLs for the project hosted on your local server. It also provides easy requests debugging using the Ngrok Web Interface.
Ngrok Account
The first thing you need to do is to create a free ngrok account and get an Authtoken. Go to: https://dashboard.ngrok.com/signup and create your account. Then confirm your account in the email you receive.
Then log in and go to: https://dashboard.ngrok.com/get-started/your-authtoken to get your Authtoken, it’s required in order to run the ngrok service in Wappler. Click the Copy button in order to copy your Authtoken:
Ngrok Setup
Open Wappler and open the global Options:
Select System:
And paste your ngrok Authtoken:
Click Save and you are done.
Using Ngrok in Wappler
Load your Wappler project, in our example that’s a NodeJS project, using the local Node server, integrated in Wappler.
Starting the Service
Open the terminals dropdown located at the bottom toolbar:
Select Ngrok Proxy:
Wappler will install the components required for ngrok automatically:
When everything is installed you will see a message in the terminal. There you can also find your remote address and other info:
Sharing Local Pages
Now as your ngrok proxy is running, you can preview any page from outside your local network. When choosing to preview local pages and server actions they will be using the external URL assigned by the ngrok service. We can preview our page by clicking the preview in browser button:
And you can see the external URL, pointing to your local page. You can share this URL with anyone, so they can access your local server. Same goes for previewing your server actions.
Debugging Requests
Next to sharing your local pages, you can use ngrok for requests debugging.
Clicking the microscope icon in the toolbar will open the ngrok web interface:
Here you can find useful debug info for the requests made through the external URLs - like headers sent, restatuses, errors etc:
Stopping the Service
You can stop the ngrok proxy, which will also close the external URL so nobody will be able to access your site any longer. To do this, just click the close button next to the terminals dropdown:
Now your local site is again only accessible from your local computer.
That’s how easy it is to share your local sites to public, using the ngrok service integrated in Wappler.
