Local development

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:

1. Open a secure tunnel to your local files
2. Configure a TwicPics path mapping your local files

This requires an internet connection. To work offline, use the components offline option.

Opening a tunnel using ngrok

ngrok is a command-line application that enables you to make a local port of your machine available online.

1. Create a free ngrok account
2. Install the ngrok command-line interface
3. Verify your installation by running ngrok --version

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 http://localhost:3000.

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.

1. Navigate to the relevant workspace and domain and click Create Path
2. Give your path a name, eg. ngrok
3. Fill in the Source URL with the path to your images using the forwarding URL, e.g., https://a60d-2a01-e0a-20b-ff40-a138-2dd2-c9e9-a2f0.eu.ngrok.io/images/

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 Native -->
<img data-twic-src="image:ngrok/file.jpg" />

Learn more about paths configuration.