Skip to Content
🚀 Getting StartedRunning With Docker

Last Updated: 4/8/2026

Running with Docker Dev Containers

This guide walks you through setting up and running Where Did They Go? using Docker Dev Containers in Visual Studio Code. The Dev Container environment automatically installs dependencies and starts both the client and server, providing the fastest path from zero to a running application.

Prerequisites

Before you begin, install the following software:

  1. Docker Desktop – Download from docker.com 
  • Ensure Docker Desktop is running before opening the project
  1. Visual Studio Code – Download from code.visualstudio.com 
  2. Dev Containers Extension – Install from the VS Code Extensions marketplace
  • Search for “Dev Containers” by Microsoft
  • Or install directly: ms-vscode-remote.remote-containers

Step 1: Clone the Repository

Open a terminal and clone the project repository:

git clone https://github.com/ksu-cs/development-project-ksds.git
cd development-project-ksds

Step 2: Open in Visual Studio Code

Launch Visual Studio Code and open the cloned repository:

code .

Alternatively, use File → Open Folder in VS Code and select the development-project-ksds directory.

Step 3: Reopen in Dev Container

When VS Code detects the .devcontainer configuration, you’ll see a notification in the bottom-right corner:

Folder contains a Dev Container configuration file. Reopen folder to develop in a container.

Click Reopen in Container. If you don’t see the notification:

  1. Open the Command Palette (Ctrl+Shift+P on Windows/Linux, Cmd+Shift+P on Mac)
  2. Type “Dev Containers: Reopen in Container”
  3. Press Enter

VS Code will now:

  • Build the Docker container using the Node.js and PostgreSQL configuration
  • Install npm packages for both client and server (via postCreateCommand.sh)
  • Start the development servers automatically (via postAttachCommand.sh)

This process takes 2–5 minutes on the first run. Subsequent launches are much faster.

Step 4: Verify the Application

Once the container finishes building, both servers start automatically:

Client (Frontend)

  • URL: http://localhost:5173 
  • What it does: Serves the Vue 3 application with Vite’s hot module replacement
  • What you’ll see: The interactive Kansas map with timeline controls

Server (Backend)

  • URL: http://localhost:3000 
  • What it does: Serves static JSON/GeoJSON data files and renders the index page
  • What you’ll see: A simple confirmation page or the main application entry point

Open your browser and navigate to http://localhost:5173  to interact with the map. You should see the Kansas state outline with county borders, a timeline slider set to 1860, and a play button.

What Happens Behind the Scenes

The Dev Container configuration uses two startup scripts:

postCreateCommand.sh

Runs once when the container is first created:

cd /workspaces/development-project-ksds/server/
npm install
 
cd /workspaces/development-project-ksds/client/
npm install

This installs all dependencies for both the server and client.

postAttachCommand.sh

Runs every time you attach to the container:

cd /workspaces/development-project-ksds/server/
npm run dev &
 
cd /workspaces/development-project-ksds/client/
npm run dev &

This starts the server with nodemon (auto-restart on file changes) and the client with Vite (hot module replacement).

Port Configuration

The Dev Container forwards two ports automatically:

  • Port 3000 (Server): Labeled “Server” in VS Code’s Ports panel
  • Port 5173 (Client): Labeled “Client” and opens automatically in your browser

You can view and manage forwarded ports in the Ports tab at the bottom of VS Code.

Database Container

The Docker Compose configuration includes a PostgreSQL 18 container, though the application does not yet use it in the current version. The database runs in the background and is available at localhost:5432 if needed for future development.

Stopping the Application

To stop the development servers:

  1. Open the VS Code terminal
  2. Press Ctrl+C to stop the running processes
  3. Close VS Code or select Dev Containers: Reopen Folder Locally from the Command Palette

The Docker containers will stop automatically when you close VS Code.

Troubleshooting

Container won’t build: Ensure Docker Desktop is running and you have an active internet connection for downloading images.

Ports already in use: If ports 3000 or 5173 are occupied, stop other applications using those ports or modify the port mappings in .devcontainer/devcontainer.json.

Application doesn’t load: Check the VS Code terminal for error messages. The servers may still be installing dependencies or starting up.

What’s Next

Now that your development environment is running:

 

OverviewRunning Locally