Skip to content

reactivize/dockerDevSetup

Repository files navigation

Docker Dev Environment Setup

  • Run your dev environment from a docker container
  • Your container points to your root project directory on your host machine, regardless of the OS
  • Browse your web app from the container's IP address

Files

.vscode/launch.json

  • the debugger config file
  • Use the 'attach' config section
  • set the "address" key to your docker container ip address
  • set the "remoteRoot" to the value of APPROOT environment variable in the Dockerfile
  • notice the debugger's "port" value, '5858' must match the EXPOSE value in the Dockerfile

jsconfig.json

  • just an autocreated VSC config file

Dockerfile

  • creates a base image
  • install into the base image all npm modules listed in the package.json
  • from this Dockerfile you create a docker image with the 'docker build' command
  • see below

server.js

  • your project's webserver entrypoint file
  • note that the port 3000 in this file must match the EXPOSE value in the Dockerfile

Steps to get running

# open the Docker Terminal

# cd into dev root folder

# do a git clone of this repo

# eg path...
# cd /c/Users/mydocker/mydevproj




ls
# should see a Dockerfile



docker build -t mydev .
# the -t switch tags the image with a tagname
# wait a couple minutes



docker images
# should see the mydev image listed under the 'REPOSITORY' column



docker run -d -v "$PWD":/devsrc -p 3000:3000 -p 5858:5858 mydev
# puts a snapshot of the docker image into memory as a docker container



docker ps
# should see the container in the list
# ie... the 'IMAGE' column should say mydev

in the VSC IDE, open ./server.js

  • then set a breakpoint on the res.status line (line number 5)
docker-machine ip
# get the ip address of your docker vm
# eg... 192.168.99.100

in the debug config file called, 'launch.json', confirm these settings are correct...

"port": 5858, "address": "192.168.99.100", "remoteRoot": "/devsrc/"

start the Attach Debug configuration in VS Code

  • vsc -> ctrl-shift-d -> select Attach from dropdown list -> click the green arrow (F5)

open a browser to.... 192.168.99.100:3000

  • the page will stop and spin because your breakpoint got hit
  • note: do not browse to localhost; rather, use the container's IP address

in vsc, hit F10 to move the debugger to the next line

Prereq:

on your host machine

  • install Docker Toolbox
  • install NodeJS

Troubleshoot

docker ps
 # to get your containerID

docker rm -f 099
 # stop container, by typing the first three characters of your containerID

docker run -it -v "$PWD":/devsrc -p 3000:3000 -p 5858:5858 mydev /bin/bash
# run the container and log into it's terminal

pwd
# verify you're in your container's working directory
# which is mounted to the project's root folder

ls -halt
# list your project's files in the project root directory

cat server.js
# if you change the contents of the server.js file in your IDE, 
# you should see the changes reflected from your container 

npm run startdebug 
# run the server from the container
# then browse to the url (see details above)

Terms:

VSC:

  • Visual Studio Code IDE
  • though any IDE can be set up to debug your app in a docker container

Constraints

For a Win10 host OS,

  • either place your dev project under //c/Users/
  • or set read permissions to your project root folder
  • so the docker container has permission to read the volume mount on the host OS

Extra

To map a shared folder from your Host OS to VirtualBox

  • from the terminal
VBoxManage sharedfolder add "default" --name "mydevproj" --hostpath "C:\devApps\mydevproj"
# This will put an entry in VirtualBox -> default -> settings -> Shared Folders

Docker Compose

coming soon

TASK:

add babel so we can write node in es6

  • added

About

set up your environment to run in docker, using the source files on your host machine

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published