---
title: Local development
description: Learn to use TwicPics in local with ngrok.
category: 'guides'
position: 6
---

# Local development

<docs-page-description :description="description"></docs-page-description>

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](/docs/components/react#setup-options).

## Opening a tunnel using ngrok

[ngrok](https://ngrok.com/) is a command-line application that enables you to make a local port of your machine available online.

1. [Create a free ngrok account](https://ngrok.com/signup)
2. [Install the ngrok command-line interface](https://ngrok.com/docs/getting-started)
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.

<doc-alert type="info">
The <strong>forwarding URL</strong> will be different every time you run the ngrok command. So yours should be different from this example.
</doc-alert>

## 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](https://account.twicpics.com/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:

```html
<!-- 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](/docs/essentials/path-configuration).**