Fixing local development experience

.circleci/config.yml

@@ -11,7 +11,7 @@ jobs:
       - setup_remote_docker:
           docker_layer_caching: true
       - run: ls -l $(ls)
-      - run: bash ./build_github.sh
+      - run: bash ./bin/build_github.sh
       - run: docker ps --format "table {{.Names}}\t{{.Ports}}" && docker compose ps
       - run: docker-compose up --build --no-deps -d test
       - run: docker compose exec test npx cypress run

.github/workflows/test.yml

@@ -48,7 +48,7 @@ jobs:
           submodules: false
 
       - name: Build and start Docker Compose services
-        run: bash ./build_github.sh
+        run: bash ./bin/build_github.sh
 
       - name: check dns is working
         run: cat /etc/hosts; netstat -tulpn # Use -tulpn to show TCP/UDP listeners

.gitmodules

@@ -1,9 +1,9 @@
 [submodule "repo_refs/react1-app"]
   path = repo_refs/react1-app
-  url = ${FRONTEND_BUILD_CONTEXT}
+  url = https://github.com/perfetti/react1-app.git
 [submodule "repo_refs/react2-app"]
   path = repo_refs/react2-app
-  url = ${BACKEND_BUILD_CONTEXT}
+  url = https://github.com/perfetti/react2-app.git
 [submodule "repo_refs/rails-app"]
   path = repo_refs/rails-app
-  url = ${API_BUILD_CONTEXT}
+  url = https://github.com/perfetti/rails-app.git

README.md

@@ -2,7 +2,24 @@
 
 Example for a blog post about nginx docker compose
 
+## Prerequisites
+- Github token with these repos in scope. `GH_TOKEN`
+- `docker`
+- `docker compose`
+- `git`
+
 ## Setup
+Set your environment variables & initialize submodules
+```bash
+cp .env.sample .env
+source .env
+
+git submodule sync
+git submodule update --init --recursive
+```
+
+
+## Build the Environments
 
 To run this you will execute one of the following commands depending on your build source:
 
@@ -11,7 +28,7 @@ To run this you will execute one of the following commands depending on your bui
 To build from local directories, run:
 
 ```bash
-./build_local.sh
+./bin/build_local.sh
 ```
 
 This setup allows for hot-swapping of code. Any changes made in the `repo_refs` directories will be immediately reflected in the running containers, allowing developers to see their changes in real-time via the nginx server.
@@ -21,7 +38,7 @@ This setup allows for hot-swapping of code. Any changes made in the `repo_refs`
 To build from GitHub repositories, run:
 
 ```bash
-./build_github.sh
+./bin/build_github.sh
 ```
 
 The GitHub build process is isolated from the local development environment, ensuring a clean and isolated build environment. This prevents any potential conflicts with local volumes.

build_github.sh → bin/build_github.sh

@@ -12,6 +12,9 @@ fi
 
 source .env
 
+export FRONTEND_BUILD_CONTEXT="https://${GH_TOKEN}@${FRONTEND_REPO_URL}#${FRONTEND_REF}"
+export API_BUILD_CONTEXT="https://${GH_TOKEN}@${API_REPO_URL}#${API_REF}"
+export BACKEND_BUILD_CONTEXT="https://${GH_TOKEN}@${BACKEND_REPO_URL}#${BACKEND_REF}"
 
 # Create temporary container to copy nginx config
 docker volume create project_nginx_conf

build_local.sh → bin/build_local.sh

@@ -11,4 +11,4 @@ echo $API_BUILD_CONTEXT
 echo $BACKEND_BUILD_CONTEXT
 
 # Run Docker Compose
-docker-compose --profile core -f docker-compose.local.yaml up --build -d
+./bin/up_local.sh

bin/up_local.sh

@@ -0,0 +1,2 @@
+#!/bin/bash
+docker-compose --profile core -f docker-compose.local.yaml up --build -d

docker-compose.local.yaml

@@ -5,12 +5,14 @@ services:
       service: frontend
     volumes:
       - ./repo_refs/react1-app:/app
+      - /app/node_modules
   backend:
     extends:
       file: docker-compose.yaml
       service: backend
     volumes:
       - ./repo_refs/react2-app:/app
+      - /app/node_modules
   api:
     extends:
       file: docker-compose.yaml