microsoft/vscode-react-native
Publicmirrored fromhttps://github.com/microsoft/vscode-react-nativeAvailable
doc/containerization.md
58lines · modecode
| 1 | # Containerization |
| 2 | |
| 3 | The extension supports [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview) features on Linux. |
| 4 | |
| 5 | Please follow the [VS Code official documentation](https://code.visualstudio.com/docs/remote/containers) to setup your environment to use remote development approach. |
| 6 | |
| 7 | ## Developing inside a Docker Container on Linux |
| 8 | |
| 9 | For development of React Native Android application in Docker Container you can use [official React Native Docker image](https://hub.docker.com/r/reactnativecommunity/react-native-android) provided by [react-native-community](https://github.com/react-native-community/docker-android). |
| 10 | |
| 11 | Here are the steps to run React Native debugging inside Docker Container on a real Android device: |
| 12 | |
| 13 | 1. Open Command Palette and run the following command |
| 14 | ``` |
| 15 | Remote-Containers: Add Development Container Configuration Files... |
| 16 | ``` |
| 17 | Then select `Existing Dockerfile` to create `.devcontainer/devcontainer.json` configuration file. |
| 18 | 1. Сreate Dockerfile extending [reactnativecommunity/react-native-android image](https://hub.docker.com/r/reactnativecommunity/react-native-android). For example you can use the following Dockerfile: |
| 19 | ``` |
| 20 | FROM reactnativecommunity/react-native-android:latest |
| 21 | |
| 22 | RUN npm install -g expo-cli react-native-cli |
| 23 | ``` |
| 24 | |
| 25 | 1. Configure your `devcontainer.json` file just about like this: <br> **NOTE**: This is just a sample of configuration, you can modify your `devcontainer.json` file as you need. |
| 26 | ``` |
| 27 | { |
| 28 | "name": "React Native Android Container", |
| 29 | |
| 30 | // Sets the run context to one level up instead of the .devcontainer folder. |
| 31 | "context": "..", |
| 32 | |
| 33 | // Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename. |
| 34 | "dockerFile": "Dockerfile", |
| 35 | |
| 36 | // The optional 'runArgs' property can be used to specify additional runtime arguments. |
| 37 | "runArgs": [ |
| 38 | "--privileged", // give all capabilities to a container, in other words, the container can then do almost everything that the host can do |
| 39 | "--net", "host", // forwarding all host machine ports |
| 40 | "-v", "/dev/bus/usb:/dev/bus/usb" // mount connected USB devices to a container |
| 41 | ], |
| 42 | |
| 43 | "settings": { |
| 44 | // This will ignore your local shell user setting for Linux since shells like zsh are typically |
| 45 | // not in base container images. You can also update this to an specific shell to ensure VS Code |
| 46 | // uses the right one for terminals and tasks. For example, /bin/bash (or /bin/ash for Alpine). |
| 47 | "terminal.integrated.shell.linux": null |
| 48 | }, |
| 49 | |
| 50 | // Add the IDs of extensions you want installed when the container is created in the array below. |
| 51 | "extensions": ["msjsdiag.vscode-react-native"] |
| 52 | } |
| 53 | ``` |
| 54 | |
| 55 | 1. Open Command Palette and run the following command `Remote-Containers: Open Folder in Container` to reopen your project in container |
| 56 | 1. Connect your device via USB and start debugging the same way as on local machine |
| 57 | |
| 58 | Currently the above scenario doesn't work on macOS and Windows. Docker Container implementation on these OS uses Virtual Machine tools which may have problems with USB forwarding for mobile devices. |
| 59 | |