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
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 package.json to facilitate Docker usage.
"scripts": {
"compose:first-time": "docker-compose up --build --no-recreate -d",
"compose:up": "docker-compose up -d"
}
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 it 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.
Continue reading