Learn to use TwicPics in local with ngrok.
TwicPics requires original assets to be available via a public URL. This can be a limitation in the development phase as you work with local assets. This guide will walk you through the process of using TwicPics for your local files.
To do so we will:
- Open a secure tunnel to your local files
- Configure a TwicPics path mapping your local files
Opening a tunnel using ngrok
ngrok is a command-line application that enables you to make a local port of your machine available online.
- Create a free ngrok account
- Install the ngrok command-line interface
- Verify your installation by running
After ngrok is installed, you can run
ngrok http <port> to forward a local port of your machine. We will use this to make our local assets available publicly.
For example, if your development server is serving your web application on
http://localhost:3000, you need to run
ngrok http 3000.
Change the port depending on the port of your development server.
ngrok will prompt something similar to the following:
Visit http://localhost:4040/ to inspect, replay, and modify your requests Session Status online Account YourAccount (Plan: Free) Version 3.0.6 Region Europe (eu) Latency 11ms Web Interface http://127.0.0.1:4040 Forwarding https://a60d-2a01-e0a-20b-ff40-a138-2dd2-c9e9-a2f0.eu.ngrok.io -> http://localhost:3000
In this example, it means that
https://a60d-2a01-e0a-20b-ff40-a138-2dd2-c9e9-a2f0.eu.ngrok.io (we’ll call it the forwarding URL) is mapping to
You can navigate to your forwarding URL to make sure it’s working. You should see the same results as on your localhost.
Setting up a TwicPics path for local files
Now that ngrok is running, you will need to configure a new path in your TwicPics dashboard.
- Navigate to the relevant workspace and domain and click Create Path
- Give your path a name, eg.
- Fill in the Source URL with the path to your images using the forwarding URL, eg.
And that’s it! TwicPics is now able to retrieve your local files. 🎉
If your path name is
ngrok and your local image is at
localhost:3000/images/file.jpg, you can access it with the following code:
<!-- Using Twicpics components --> <TwicImg src="ngrok/file.jpg" /> <!-- Or using the TwicPics script --> <img data-twic-src="image:ngrok/file.jpg" />