Update

Author: nanehambardzumyan

.gitignore

@@ -0,0 +1,14 @@
+node_modules/
+dist/
+.DS_Store
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Local env files
+.env
+.env.*
+
+# TypeScript incremental build output
+*.tsbuildinfo

Dockerfile

@@ -10,12 +10,12 @@ RUN npm run build
 
 FROM nginx:1.29-alpine
 
-COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
+COPY docker/nginx.conf /etc/nginx/conf.d/default.conf.template
 COPY docker/entrypoint.sh /docker-entrypoint-learn-mobile-preview.sh
 COPY --from=build /app/dist /usr/share/nginx/html
 
 RUN chmod +x /docker-entrypoint-learn-mobile-preview.sh
 
-EXPOSE 80
+EXPOSE 3000
 
 ENTRYPOINT ["/docker-entrypoint-learn-mobile-preview.sh"]

README.md

@@ -6,14 +6,20 @@ The app does not emulate native APIs. Expo handles the runtime; this project onl
 
 ## Local Development
 
-Start your Expo web app on port `3000`, then run:
+Start your Expo web app on port `3001`, then run:
 
 ```bash
 npm install
 npm run dev
 ```
 
-Open the wrapper at `http://localhost:5173`. It defaults to loading `http://localhost:3000`.
+Open the wrapper at `http://localhost:3000`. It defaults to loading Expo web through `/__expo_preview/`.
+
+To target a different local Expo web URL:
+
+```bash
+EXPO_WEB_URL="http://localhost:3002" npm run dev
+```
 
 ## Docker
 
@@ -26,15 +32,15 @@ docker build -t learn_mobile-preview .
 Run it:
 
 ```bash
-docker run --rm -p 8080:80 learn_mobile-preview
+docker run --rm -p 3000:3000 learn_mobile-preview
 ```
 
-Open `http://localhost:8080`. The phone iframe will point at `http://localhost:3000` by default.
+Open `http://localhost:3000`. The phone iframe points at `/__expo_preview/`, which nginx proxies to Expo web at `http://localhost:3001` by default. In Docker, that default only works when Expo is reachable from the sidecar as `localhost:3001`.
 
 To target a different Expo web URL:
 
 ```bash
-docker run --rm -p 8080:80 -e PREVIEW_URL="http://localhost:3000" learn_mobile-preview
+docker run --rm -p 3000:3000 -e EXPO_WEB_URL="http://host.docker.internal:3001" learn_mobile-preview
 ```
 
 ## Container Registry

dist/assets/index-CsjKjlQs.css

@@ -1,7 +1,12 @@
 #!/bin/sh
 set -eu
 
-: "${PREVIEW_URL:=http://localhost:3000}"
+: "${PREVIEW_URL:=/__expo_preview/}"
+: "${EXPO_WEB_URL:=http://localhost:3001}"
+
+envsubst '${EXPO_WEB_URL}' \
+  < /etc/nginx/conf.d/default.conf.template \
+  > /etc/nginx/conf.d/default.conf
 
 envsubst '${PREVIEW_URL}' \
   < /usr/share/nginx/html/config.template.js \

dist/assets/index-DOD3Vl8z.js

@@ -1,10 +1,47 @@
 server {
-  listen 80;
+  listen 3000;
   server_name _;
   root /usr/share/nginx/html;
   index index.html;
 
+  location = / {
+    try_files /index.html =404;
+  }
+
+  location = /index.html {
+    try_files /index.html =404;
+  }
+
+  location = /config.js {
+    try_files /config.js =404;
+  }
+
+  location = /__mobile_preview_assets/config.js {
+    try_files /config.js =404;
+  }
+
+  location /__mobile_preview_assets/ {
+    try_files $uri =404;
+  }
+
+  location /__expo_preview/ {
+    rewrite ^/__expo_preview/?(.*)$ /$1 break;
+    proxy_http_version 1.1;
+    proxy_set_header Host $proxy_host;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+    proxy_pass ${EXPO_WEB_URL};
+  }
+
   location / {
-    try_files $uri $uri/ /index.html;
+    try_files $uri @expo_web;
+  }
+
+  location @expo_web {
+    proxy_http_version 1.1;
+    proxy_set_header Host $proxy_host;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+    proxy_pass ${EXPO_WEB_URL};
   }
 }