docker dev env setup

Author: Oksamies

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "root": true
+}

apps/cyberstorm-remix/README.md

@@ -4,15 +4,13 @@
 This quide expects you to have setup your Thunderstore Django project for development on some level. Please setup the Thunderstore project before continuing.
 
 ## Setup nginx proxy for local data ingress/egress
-1. Add the following to your hosts (on windows, google what how to achive same on other OS')
-```
-127.0.0.1 thunderstore.temp
-127.0.0.1 new.thunderstore.temp
-```
-
-2. Boot up the nginx proxy with the following command; `docker compose -f tools/ts-dev-proxy/docker-compose.yml up`
+1. Make sure the `Thunderstore` backend repo and this repo live under the same parent directory (e.g. `C:\projects\Thunderstore` and `C:\projects\thunderstore-ui`).
+2. From `Thunderstore` run `docker compose up -d`.
+3. Seed the database plus the default `localhost`/`new.localhost`/`auth.localhost` Site objects with `docker compose exec django python manage.py setup_dev_env`.
+4. From this repo run `docker compose -f docker-compose.remix.development.yml up -d`. This starts the Remix dev server and a lightweight `nginx-configurator` helper that copies the `tools/nginx/*.conf` files into the shared `thunderstore_nginx_conf` volume exposed by the backend nginx container.
+5. Wait until the `cyberstorm-remix` container reports `react-router dev` in its logs. The backend nginx container automatically reloads whenever the shared config volume changes, so visiting `http://localhost` (Django) or `http://new.localhost` (Remix) works without editing your hosts file.
 
-3. Boot up your Thunderstore backend and ensure it's running in port 81 (it's normally 80). The following [line](https://github.com/thunderstore-io/Thunderstore/blob/f06b9b438ea6e990881e60339d34bde1a480d073/docker-compose.yml#L123) in your Thunderstore projects docker-compose, should be `- "127.0.0.1:81:8000"`
+> **Note:** The compose file exports `SERVER_SIDE_API_URL=http://nginx` to the Remix container. This makes server-rendered API calls talk to the backend nginx container directly, while the browser continues to use `VITE_API_URL=http://localhost`.
 
 ## Setup Nimbus for development
 
@@ -28,13 +26,13 @@ This quide expects you to have setup your Thunderstore Django project for develo
 
 4. Add `.env.development` and/or `.env.production` files. You can copy the `.env` file, rename and edit the values to your needs. Here's a example of the file contents:
 ```
-VITE_SITE_URL=http://thunderstore.temp
-VITE_BETA_SITE_URL=http://new.thunderstore.temp
-VITE_API_URL=http://thunderstore.temp
-VITE_COOKIE_DOMAIN=.thunderstore.temp
-VITE_AUTH_BASE_URL=http://thunderstore.temp
-VITE_AUTH_RETURN_URL=http://new.thunderstore.temp
-__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS=.thunderstore.temp
+VITE_SITE_URL=http://localhost
+VITE_BETA_SITE_URL=http://new.localhost
+VITE_API_URL=http://localhost
+VITE_COOKIE_DOMAIN=.localhost
+VITE_AUTH_BASE_URL=http://auth.localhost
+VITE_AUTH_RETURN_URL=http://new.localhost
+__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS=.localhost
 ```
 
 5. Run the build/start server script or the dev server script
@@ -51,18 +49,17 @@ yarn workspace @thunderstore/cyberstorm-remix dev --port 3000 --host 0.0.0.0
 ```
 
 ## Finally
-You should now have the fully local Nimbus dev environment setup and running in `http://new.thunderstore.temp` and the Django site should be running in `http://thunderstore.temp`. You might need to go to `http://new.thunderstore.temp/communities` as Nimbus doesn't have a landing page yet.
+You should now have the fully local Nimbus dev environment setup and running in `http://new.localhost` and the Django site should be running in `http://localhost`. You might need to go to `http://new.localhost/communities` as Nimbus doesn't have a landing page yet.
 
 # How to setup ts-proxy as a backend for this project
 **Keep in mind that when using the ts-proxy, the sessions and actions will be made against the actual production Thunderstore**
 
-1. Open hosts file as administrator (`C:\Windows\System32\drivers\etc`) and add this `127.0.0.1 thunderstore.temp` there
-2. Download and install Docker and docker-compose. For windows people, Docker for Windows should be enough.
-3. Open up a terminal and navigate to `thunderstore-ui/tools/ts-proxy`
-4. Run `docker compose up`
-5. Add these to your `.env.development` or `.env.production`
+1. Download and install Docker and docker-compose. For windows people, Docker for Windows should be enough.
+2. Open up a terminal and navigate to `thunderstore-ui/tools/ts-proxy`
+3. Run `docker compose up`
+4. Add these to your `.env.development` or `.env.production`
 ```
-PUBLIC_SITE_URL=http://thunderstore.temp
-PUBLIC_API_URL=http://thunderstore.temp:81
+PUBLIC_SITE_URL=http://localhost
+PUBLIC_API_URL=http://localhost
 ```
-6. Run the Nimbus project normally
+5. Run the Nimbus project normally

apps/cyberstorm-remix/public/cyberstorm-static/scripts/beta-switch.js

@@ -24,15 +24,15 @@ const betaQA = {
 };
 const legacyDev = {
   protocol: "http://",
-  hostname: "thunderstore.temp",
+  hostname: "localhost",
   port: "",
-  tld: "temp",
+  tld: "localhost",
 };
 const betaDev = {
   protocol: "http://",
-  hostname: "new.thunderstore.temp",
+  hostname: "new.localhost",
   port: "",
-  tld: "temp",
+  tld: "localhost",
 };
 async function checkBetaRedirect(legacy, beta, goToBetaRoR2) {
   const legacyOnlyPages = [

docker-compose.remix.development.yml

@@ -3,44 +3,39 @@ version: "3.8"
 services:
   cyberstorm-remix:
     container_name: cyberstorm-remix
-    command: /bin/sh -c "tail -f /dev/null"
-    # command: yarn workspace @thunderstore/cyberstorm-remix dev --port 3000 --host 0.0.0.0
-    build:
-      context: "./"
-      dockerfile: "apps/cyberstorm-remix/Dockerfile.development"
-      secrets:
-        - "npmrc"
-    image: thunderstore/thunderstore-ui.cyberstorm-remix-development:${IMAGE_TAG:-dev}
+    image: node:24.1.0-alpine3.21
+    entrypoint: ["/bin/sh", "/entrypoint.sh"]
+    working_dir: /workspace
     ports:
       - "127.0.0.1:3000:3000"
     volumes:
-      - remix_node_modules:/app/apps/cyberstorm-remix/node_modules
-      - ./apps/cyberstorm-remix:/app/apps/cyberstorm-remix
-      - ./packages:/app/packages
+      - .:/workspace
+      - remix_node_modules:/workspace/node_modules
+      - remix_app_node_modules:/workspace/apps/cyberstorm-remix/node_modules
+      - ./tools/scripts/cyberstorm-dev-entrypoint.sh:/entrypoint.sh:ro
     networks:
         - thunderstore_default
     environment:
       - NODE_ENV=development
+      - SERVER_SIDE_API_URL=http://nginx
+    secrets:
+      - npmrc
 
-  remix-nginx-proxy:
-    image: nginx
-    container_name: remix-nginx-proxy
-    restart: always
-    ports:
-      - "443:443"
-      - "80:80"
+  nginx-configurator:
+    image: alpine:3.20
+    container_name: remix-nginx-configurator
+    command: /bin/sh -c "set -e; mkdir -p /etc/nginx/user-conf; while true; do cp /source/*.conf /etc/nginx/user-conf/ >/dev/null 2>&1 || true; sleep 2; done"
     volumes:
-      - ./nginx/www:/var/www:ro
-      - ./nginx/conf.d/remixdefault.conf:/etc/nginx/conf.d/default.conf:ro
-      # - ./ssl:/etc/nginx/ssl:ro
-      # - ./snippets:/etc/nginx/snippets:ro
-      # - ./protect:/etc/nginx/protect:ro
-    hostname: thunderstore.temp
-    networks:
-        - thunderstore_default
+      - ./tools/nginx:/source:ro
+      - thunderstore_nginx_conf:/etc/nginx/user-conf
+    depends_on:
+      - cyberstorm-remix
 
 volumes:
   remix_node_modules:
+  remix_app_node_modules:
+  thunderstore_nginx_conf:
+    external: true
 
 secrets:
   npmrc:

packages/beta-switch/src/index.ts

@@ -37,16 +37,16 @@ const betaQA: UrlStructure = {
 
 const legacyDev: UrlStructure = {
   protocol: "http://",
-  hostname: "thunderstore.temp",
+  hostname: "localhost",
   port: "",
-  tld: "temp",
+  tld: "localhost",
 };
 
 const betaDev: UrlStructure = {
   protocol: "http://",
-  hostname: "new.thunderstore.temp",
+  hostname: "new.localhost",
   port: "",
-  tld: "temp",
+  tld: "localhost",
 };
 
 async function checkBetaRedirect(

packages/ts-uploader/README.md

@@ -72,13 +72,13 @@ accessible by node. This might not be the case by default, as the backend dev
 environment setup instructions assume the browser to handle localhost subdomains
 rather than instructing system-wide configuration for them.
 
-If using the local backend dev environment, you will most likely need to
-configure local DNS rules that map `thunderstore.localhost` to `127.0.0.1` and
-then set `http://thunderstore.localhost` as your `TS_API_DOMAIN` value.
+If using the local backend dev environment, point `TS_API_DOMAIN` to `http://localhost`.
+Modern browsers resolve `localhost` without any hosts-file entries, so no extra DNS tweaks
+are required.
 
 Additionally, for some reason jsdom XMLHttpRequest will fail to make proper
 requests to the `localhost:9000` domain (which is what the backend dev env will
 use by default for s3 pre-signed URL generation), so you might need to change
 the `USERMEDIA_S3_SIGNING_ENDPOINT_URL` to e.g.
-`http://thunderstore.localhost:9000/` or something else which is accessible by
+`http://localhost:9000/` or something else which is accessible by
 jsdom.

tools/nginx/new-localhost.conf

@@ -0,0 +1,22 @@
+map $http_upgrade $connection_upgrade {
+    default upgrade;
+    '' '';
+}
+
+upstream remix_dev {
+    server cyberstorm-remix:3000;
+    keepalive 64;
+}
+
+server {
+    listen 80;
+    server_name new.localhost;
+
+    location / {
+        proxy_pass http://remix_dev;
+        proxy_http_version 1.1;
+        proxy_set_header Host localhost;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection $connection_upgrade;
+    }
+}

tools/scripts/cyberstorm-dev-entrypoint.sh

@@ -0,0 +1,21 @@
+#!/bin/sh
+set -euo
+
+WORKDIR="/workspace"
+NODE_HOME="/home/node"
+
+apk add --no-cache libc6-compat >/dev/null
+
+install -d -o node -g node "$WORKDIR/node_modules"
+
+if [ -f /run/secrets/npmrc ]; then
+  install -m 600 -o node -g node /run/secrets/npmrc "$NODE_HOME/.npmrc"
+fi
+
+su node -c "
+  cd $WORKDIR
+  if [ ! -d node_modules ] || [ -z \"\$(ls -A node_modules 2>/dev/null)\" ]; then
+    yarn install --frozen-lockfile --production=false
+  fi
+  yarn workspace @thunderstore/cyberstorm-remix dev --port 3000 --host 0.0.0.0
+"