kbuley/reactdevcontainer repository overview

⁠React Dev Container

Ultimate React development container for Visual Studio Code

⁠Features

• Based on kbuley/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
• Extensible with docker-compose.yml
• Two versions:
  1. Alpine 3.19 based
     • Image tags :latest, :alpine and :alpine-vx.x.x
     • Size of 925MB
     • ⚠️ does not work on arm64 due to vscode-remote-release#4462⁠
  2. Debian Bookworm Slim based
     • Image tags :debian and :debian-vx.x.x
     • Size of 708MB
  3. Ubuntu LTS based
     • Image tags :ubuntu and :ubuntu-vx.x.x
     • Size of 609MB

⁠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" kbuley/devtainr:v0.2.0 -dev react -path /repository -name projectname
     

     Copy

     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

• kbuley/basedevcontainer⁠ todos

⁠License

This repository is under an MIT license⁠ unless indicated otherwise.