Use imgix with localhost over Ngrok:
A Step-by-Step Guide

Occasionally you might want to test or experiment with imgix using images that aren’t uploaded to a public cloud storage provider.

Let’s assume you have your home server, a raspberry pi or simply images on your local machine you’d like to use.

One option to serve these through imgix, is using ngrok.

Ngrok allows you to proxy forward your locally run app to the public internet over a URL, which you can configure as the base for a Web Folder source.

Steps:

Install ngrok

Install ngrok on your machine by following their installation guide.

Prepare your local app

For demonstration purposes, let’s look at a simple example using express with the following structure:

- app.js
- - imgix-logo.png

app.js

const express = require("express")
 
const app = express()
const port = 3000
 
app.use(express.static("public"))
 
app.get("/", (req, res) => {
  res.send("<h1>Welcome to our local App</h1>")
})
 
// Start the server
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`)
})

Start your app on localhost:3000

#cd ngrok_demo_app
node app.js

Proxy local server using ngrok to get a public URL

ngrok http 3000

This should output a public URL that you can use as your imgix source.

Configure imgix Web-folder source

Navigate to the imgix Dashboard and create a new Web Folder source. Use the ngrok URL as the Origin URL.

Web Folders Base URL Step

Finally, deploy the source.

Serve the image using imgix

Access the image using your imgix domain + the path to the image on your local machine. https://example.imgix.net/imgix-logo.png?auto=format,compress&w=300

Integrating imgix with Next.js Showcases

Use imgix with localhost over Ngrok: A Step-by-Step Guide