qdm12 / reactdevcontainer

React development container for Visual Studio Code

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.

reactdevcontainer's Issues

Security Alert

image (alpine 3.11.5)

Title	Severity	CVE	Package Name	Installed Version	Fixed Version	References
openssl: Segmentation fault in SSL_check_chain causes denial of service	HIGH	CVE-2020-1967	openssl	1.1.1d-r3	1.1.1g-r0	http://www.openwall.com/lists/oss-security/2020/04/22/2 https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2020-1967 https://git.openssl.org/gitweb/?p=openssl.git;a=commitdiff;h=eb563247aef3e83dda7679c43f9649270462e5b1 https://kb.pulsesecure.net/articles/Pulse_Security_Advisories/SA44440 https://lists.apache.org/thread.html/r66ea9c436da150683432db5fbc8beb8ae01886c6459ac30c2cea7345@%3Cdev.tomcat.apache.org%3E https://lists.apache.org/thread.html/r94d6ac3f010a38fccf4f432b12180a13fa1cf303559bd805648c9064@%3Cdev.tomcat.apache.org%3E https://lists.apache.org/thread.html/r9a41e304992ce6aec6585a87842b4f2e692604f5c892c37e3b0587ee@%3Cdev.tomcat.apache.org%3E https://security.FreeBSD.org/advisories/FreeBSD-SA-20:11.openssl.asc https://www.debian.org/security/2020/dsa-4661 https://www.openssl.org/news/secadv/20200421.txt

Security Alert

image (alpine 3.11.5)

Title	Severity	CVE	Package Name	Installed Version	Fixed Version	References
openssl: Segmentation fault in SSL_check_chain causes denial of service	HIGH	CVE-2020-1967	openssl	1.1.1d-r3	1.1.1g-r0	http://www.openwall.com/lists/oss-security/2020/04/22/2 https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2020-1967 https://git.openssl.org/gitweb/?p=openssl.git;a=commitdiff;h=eb563247aef3e83dda7679c43f9649270462e5b1 https://kb.pulsesecure.net/articles/Pulse_Security_Advisories/SA44440 https://lists.apache.org/thread.html/r66ea9c436da150683432db5fbc8beb8ae01886c6459ac30c2cea7345@%3Cdev.tomcat.apache.org%3E https://lists.apache.org/thread.html/r94d6ac3f010a38fccf4f432b12180a13fa1cf303559bd805648c9064@%3Cdev.tomcat.apache.org%3E https://lists.apache.org/thread.html/r9a41e304992ce6aec6585a87842b4f2e692604f5c892c37e3b0587ee@%3Cdev.tomcat.apache.org%3E https://security.FreeBSD.org/advisories/FreeBSD-SA-20:11.openssl.asc https://security.gentoo.org/glsa/202004-10 https://security.netapp.com/advisory/ntap-20200424-0003/ https://www.debian.org/security/2020/dsa-4661 https://www.openssl.org/news/secadv/20200421.txt https://www.synology.com/security/advisory/Synology_SA_20_05_OpenSSL

Documentation: Alpine support for MacOS M1 with Visual Studio Code

Thanks for the amazing work.

Maybe consider adding a warning about using this container out of the box on Mac M1. Vscode has this outstanding issue:

microsoft/vscode-remote-release#4462

"Alpine Linux is not supported on the hardware architecture 'aarch64' of the container".

To work around I modified the qmcgaw/reactdevcontainer Dockerfile in the root dir to use debian:

(change base image and switch from apk to apt)

FROM qmcgaw/basedevcontainer:debian
ARG CREATED
ARG COMMIT
ARG VERSION=local
LABEL \
    org.opencontainers.image.authors="[email protected]" \
    org.opencontainers.image.created=$CREATED \
    org.opencontainers.image.version=$VERSION \
    org.opencontainers.image.revision=$COMMIT \
    org.opencontainers.image.url="https://github.com/qdm12/reactdevcontainer" \
    org.opencontainers.image.documentation="https://github.com/qdm12/reactdevcontainer" \
    org.opencontainers.image.source="https://github.com/qdm12/reactdevcontainer" \
    org.opencontainers.image.title="React Dev container Alpine" \
    org.opencontainers.image.description="React TS development container for Visual Studio Code Remote Containers development"
# Install Debian packages
ENV DEBIAN_FRONTEND noninteractive
RUN apt update && \
    apt install -y nodejs npm
RUN npm cache clean -f
RUN npm install -g n
RUN n stable
RUN npm install -g yarn
# Setup shells
COPY shell/.zshrc-specific shell/.welcome.sh /root/
# Sets directories for NPM global packages
ENV NODE_PATH="/root/.npm-packages/lib/node_modules" \
    MANPATH="/root/.npm-packages/share/man"
RUN echo "prefix = /root/.npm-packages" >> /root/.npmrc && \
    chmod 600 /root/.npmrc
ENV PATH=/root/.npm-packages/bin:$PATH
# Fix ownership and permissions of anonymous volume 'node_modules'
VOLUME [ "/workspace/node_modules" ]
RUN mkdir -p /workspace/node_modules && \
    chmod 700 /workspace/node_modules

And rebuilt it locally:

docker build -t qmcgaw/reactdevcontainer .

Please do let me know if there is a better workaround for now.

Python Dev Container?

Have you thought about creating a Python Dev Container? If not, why not? Or does Anaconda takes care of this? I find that Anaconda doesn't play nice with other python stuff, but I deal with it.