React Dev Container

Ultimate React development container for Visual Studio Code

Features

• Based on qmcgaw/basedevcontainer
  • Minimal custom terminal and packages
  • Nodejs, npm and yarn downloaded as Alpine packages
  • See more features
• Globally installed: nodemon, create-react-app, mocha, and jest
• Cross platform
  • Easily bind mount your SSH keys to use with git
  • Manage your host Docker from within the dev container, more details at qmcgaw/basedevcontainer
• Extensible with docker-compose.yml
• Two versions:
  1. Alpine 3.15 based
     • Image tags :latest, :alpine and :alpine-vx.x.x
     • Size of 260MB
     • ⚠️ does not work on arm64 due to vscode-remote-release#4462
  2. Debian Bullseye Slim based
     • Image tags :debian and :debian-vx.x.x
     • Size of 500MB
     • Not built for arm V6
• Compatible with amd64, arm64, armv7, armv6, s390x and ppc64le

Requirements

• Docker installed and running
  • If you don't use Linux, share the directories ~/.ssh and the directory of your project with Docker Desktop
• Docker Compose installed
• VS code installed
• VS code remote containers extension installed

Setup for a project

1. Setup your configuration files

   • With style 💯

     docker run -it --rm -v "/yourrepopath:/repository" qmcgaw/devtainr:v0.2.0 -dev react -path /repository -name projectname

     Or use the built binary

   • Or manually: download this repository and put the .devcontainer directory in your project.

2. If you have a .vscode/settings.json, eventually move the settings to .devcontainer/devcontainer.json in the "settings" section as .vscode/settings.json take precedence over the settings defined in .devcontainer/devcontainer.json.
3. Open the command palette in Visual Studio Code (CTRL+SHIFT+P) and select Remote-Containers: Open Folder in Container... and choose your project directory
4. If you want to use the Debian based image, you can modify the .devcontainer/Dockerfile in your directory.

Note that by default it will map the port 3000 to a random port on your host, which you can find with docker ps

Customization

See the .devcontainer/README.md document in your repository.

TODOs

• qmcgaw/basedevcontainer todos

License

This repository is under an MIT license unless indicated otherwise.