Ophiuchi

https://localhost

Have you ever wanted to run localhost on HTTPS without having to manually configure everything, only to have it fail and make you give up? Let me introduce you to Ophiuchi.

‣

Ophiuchi allows mapping any HTTP port to a local DNS by running an NGINX proxy container. Just remember, the application also needs to be running on Docker.

💻

Built for Apple Silicon and Intel

Hands on with React

Vite and Docker

Let's configure React Vite with Docker Compose. This setup will enable HTTPS, which is ideal for external API calls, authentication processes, or PWA testing, while still allowing file change updates.


version: "3.8"
services:
  vite_docker:
    image: node:alpine
    container_name: vite_docker
    ports:
      - 3100:3100
    working_dir: /srv/app
    volumes:
      - ./:/srv/app
      - /srv/app/node_modules
    command: sh -c "npm install -g pnpm && pnpm install && pnpm dev"
    tty: true

I like to run React with pnpm.

Vite config

A small change in vite.config.ts is needed to ensure the port is correctly exposed.


import path from "path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
	plugins: [react()],
	resolve: {
		alias: {
			"@": path.resolve(__dirname, "./src"),
		},
	},
	server: {
		host: true,
		port: 3100,
		watch: {
			usePolling: true,
		},
	},
});

Package Json

Let's also add some new commands to the package.json to facilitate Docker usage.


 "scripts": {
    "compose:first-time": "docker-compose up --build --no-recreate -d",
    "compose:up": "docker-compose up -d"
  }

The first command will generate everything, the second one is to run the container when needed.

Example

Let’s start by creating a Proxy from localhost:3100 to dashboard.project.local.

Next, start the Ophiuchi container to apply the new configuration.

Finally, run the app with Docker and access using the new HTTPS DNS.

Benefits

Run React or any other Docker application locally with HTTPS.

Listen to file changes, keeping apps up-to-date.

Run multiple containers as needed.

Test authentication flows and PWAs locally without a VPS.