rename script to dockman, update readme, add docker flag to npm script for RN projects to set up their watch folder

This commit is contained in:
Silas 2023-07-28 00:41:17 -04:00
parent dc1f2e8823
commit 6d54472af3
Signed by: silentsilas
GPG Key ID: 4199EFB7DAA34349
5 changed files with 96 additions and 40 deletions

4
.env
View File

@ -1,3 +1,3 @@
CONTAINER_NAME="frayt-driver-v3-dockerized"
RN_PROJECT_FOLDER_NAME="frayt-driver-v3"
CONTAINER_NAME=react-native-dockerized
RN_PROJECT_FOLDER_NAME=app
SSH_KEY="~/.ssh/id_docker_dev"

103
README.md
View File

@ -1,4 +1,4 @@
# Dockerized React Native
# React Native Dockerized
This repository aims to establish a reliable Android build environment for QA and sanity checks in React Native apps. It's designed for parallel iOS development, as 'node_modules', 'Pods', and iOS build artifacts aren't synced between the host and the container, allowing them to function independently of the Docker setup.
@ -21,12 +21,12 @@ Things to keep in mind:
You will either want to dockerize an app you haven't cloned/created yet, or an existing repository on your machine.
#### Option 1: Cloning A Project
#### Option 1: Cloning A New Project
<details>
<summary>Expand</summary>
Let's say you have a React Native repository you've yet to clone but wish to run under docker. You'll clone this repository first, then clone your React Native project inside this repository with its folder named `app`.
Depending on whether you're starting a new project or dockerizing an existing one, there are two options:
```zsh
cd ~/Projects
@ -42,7 +42,7 @@ git clone git@github.com:my-github-org/my-rn-project.git app
<details>
<summary>Expand</summary>
Let's say you've already cloned a React Native repository and your directory structure is: `~/Projects/my-rn-project`. You'll want to clone this repository, then move the entirety of your react native repository into this repository under a folder named `app`.
To dockerize an existing React Native repository, clone this repository first. Then, move your React Native repository into this repository under a folder named app.
```zsh
cd ~/Projects
@ -53,36 +53,78 @@ cd my-rn-project-dockerized && rm -rf .git
</details>
#### Add `dockman.sh` to your PATH
<details>
<summary>Expand</summary>
If you would like to run `dockman.sh` from any directory on your system, follow these steps:
1. Create a new directory named `.react-native-dockerized` in your home directory (if it doesn't already exist):
```zsh
mkdir -p $HOME/.react-native-dockerized
```
2. Move the `dockman.sh` script into this new directory:
```zsh
mv /path/to/dockman.sh $HOME/.react-native-dockerized
```
3. Make the script executable:
```zsh
chmod +x $HOME/.react-native-dockerized/dockman.sh
```
4. Add the `.react-native-dockerized` directory to your PATH. The exact command depends on your shell:
- For bash:
```bash
echo 'export PATH=$PATH:$HOME/.react-native-dockerized' >> ~/.bashrc
source ~/.bashrc
```
- For zsh:
```zsh
echo 'export PATH=$PATH:$HOME/.react-native-dockerized' >> ~/.zshrc
source ~/.zshrc
```
Now you can run `dockman.sh` directly from any directory.
Note: The `source` command makes the changes effective immediately. You may need to restart your shell or terminal session to apply these changes if you choose not to use `source`.
</details>
&NewLine;
Jump through the other optional setup, particularly [Configure Github Auth](#configure-github-auth) if your project has dependencies that install from a private Github repository.
Check out the other optional setup sections, especially [Configure Github Auth](#configure-github-auth) if your project has dependencies installing from a private Github repository.
## Usage
After going through [Installation](#installation) and any of the optional setup:
After completing [Installation](#installation) and any optional setup:
```zsh
docker-compose up
./dockdroid.sh start-metro
./dockman.sh start-metro
# boot up an Android emulator before this step
./dockdroid.sh run-android
./dockman.sh run-android
```
And you're all set! The following are all of the helper commands for managing the container, created with the help of [GPT-4](https://chat.openai.com/share/648b4a38-9876-48d5-9e3b-a9c10bb25921). Regular docker commands work as well. Refer to `dockdroid.sh` for examples.
You're all set! The following table outlines the helper commands for managing the container, designed with the help of [GPT-4](https://chat.openai.com/share/648b4a38-9876-48d5-9e3b-a9c10bb25921). Regular Docker commands work too. Refer to dockman.sh for examples.
| Command | Description |
| ------------- | ------------- |
| `./dockdroid.sh stop-metro` | Stop the Metro server |
| `./dockdroid.sh start-metro` | Start the Metro server and reset its cache |
| `./dockdroid.sh metro-logs` | Check the server logs |
| `./dockdroid.sh connect-android` | Connect to your host machine's Android device |
| `./dockdroid.sh run-android` | Connects to your host machine's Android device, builds and deploys the app |
| `./dockdroid.sh reinstall-node-modules` | Removes the node_modules directory in the project and re-installs dependencies |
| `./dockdroid.sh clear-known-hosts` | Removes the Docker container's entries from the host's ~/.ssh/known_hosts file |
| `./dockdroid.sh shell` | Starts a bash shell in the project's directory inside the Docker container |
| `./dockdroid.sh init-ssh` | Generates an SSH key and adds it to the host's SSH config |
| `./dockman.sh stop-metro` | Stop the Metro server |
| `./dockman.sh start-metro` | Start the Metro server and reset its cache |
| `./dockman.sh metro-logs` | Check the server logs |
| `./dockman.sh connect-android` | Connect to your host machine's Android device |
| `./dockman.sh run-android` | Connects to your host machine's Android device, builds and deploys the app |
| `./dockman.sh reinstall-node-modules` | Removes the node_modules directory in the project and re-installs dependencies |
| `./dockman.sh clear-known-hosts` | Removes the Docker container's entries from the host's ~/.ssh/known_hosts file |
| `./dockman.sh shell` | Starts a bash shell in the project's directory inside the Docker container |
| `./dockman.sh init-ssh` | Generates an SSH key and adds it to the host's SSH config |
_You may need to run `sudo chmod +x ./dockdroid.sh` first for executable permissions._
_You may need to run `sudo chmod +x ./dockman.sh` first for executable permissions._
## Settings
@ -90,20 +132,20 @@ You can adjust a few settings in the `.env` file at the root of the repository.
| Variable | Description | Default |
| ------------- | ------------- | ------------- |
| `CONTAINER_NAME` | The name of the Docker container that the script interacts with. | `react-native-dockerized` |
| `SSH_KEY` | Location of the SSH key file that is used for secure communication with the Docker container. | `~/.ssh/id_docker_dev` |
| `CONTAINER_NAME` | The name of the Docker container with which the script interacts. | `react-native-dockerized` |
| `SSH_KEY` | The location of the SSH key file used for secure communication with the Docker container. | `~/.ssh/id_docker_dev` |
| `RN_PROJECT_FOLDER_NAME` | The name of the React Native project folder. This should match the name of the folder that you cloned at the root of your repository. | `app` |
You will need to rename your container if you'd like to run more than one of these containers at the same time. For example, if you're working on two separate React Native apps, you will not be able to dockerize the second app without it using a different container name.
If you plan on running multiple Docker containers simultaneously, you will need to assign a unique name to each container. For instance, if you're developing two separate React Native apps, you'll need to dockerize the second app using a different container name.
Please be aware that modifying the RN_PROJECT_FOLDER_NAME variable doesn't rename the project folder on your host machine. Instead, this variable should reflect the name you have already assigned to your project folder.
Please note that modifying the `RN_PROJECT_FOLDER_NAME` variable won't rename the project folder on your host machine. This variable should match the existing name of your project folder.
### Configure Github Auth
<details>
<summary>Expand - optional, but highly recommended</summary>
Before booting up the container, the image will run `npm install` as its getting built and will need to authenticate with a Github account to install any NPM packages from private Github repositories.
Prior to starting up the container, the image will run `npm install` during the build process. This may require Github authentication if you're installing NPM packages from private Github repositories.
1. Create a [legacy access token](https://github.com/settings/tokens) with all Repo-related permissions checked, and save the token in your password manager.
2. Add `export GH_TOKEN="your_legacy_access_token"` to your `~/.zshrc` file
@ -116,19 +158,18 @@ Before booting up the container, the image will run `npm install` as its getting
<details>
<summary>Expand - optional</summary>
You can open a new remote workspace in your IDE to access the React Native project within your container. With VS Code, you may not require SSH for this task, thanks to the robust integration of the [Dev Containers](https://code.visualstudio.com/docs/devcontainers/containers) extension with Docker. However, if you're using VSCodium, your best bet is the [Open Remote SSH](https://open-vsx.org/vscode/item?itemName=jeanp413.open-remote-ssh) extension.
You can open a new remote workspace in your IDE to access the React Native project within this Docker container. With VS Code, you may not require SSH for this, thanks to the robust integration of the [Dev Containers](https://code.visualstudio.com/docs/devcontainers/containers) extension with Docker. However, if you're using VSCodium, your best bet is the [Open Remote SSH](https://open-vsx.org/vscode/item?itemName=jeanp413.open-remote-ssh) extension.
Do note, VSCodium comes with certain limitations, such as the need to manually provision an SSH server and client - but hey that's the FOSS life.
Do note that VSCodium comes with certain limitations, such as the need to manually provision an SSH server and client - but hey that's the FOSS life.
To simplify the setup for a remote workspace in VSCodium, you can run `init-ssh` and it will provision everything necessary. You can confirm this by running `ssh root@{your.dockers.ip.address}`.
To simplify the setup for a remote workspace in VSCodium, you can run `init-ssh`, which will provision everything necessary. You can confirm this by running `ssh root@{your.dockers.ip.address}`.
</details>
### Troubleshooting
- If hot reloading doesn't work, first check the Metro logs with ./dockdroid.sh metro-logs. If the logs don't help, make sure your Metro configuration includes watchFolders: ['/home/app'],, replacing 'app' with the value of RN_PROJECT_FOLDER_NAME. This ensures changes are detected in both your local machine and the container.
- If hot reloading doesn't work, first check the Metro logs with `dockdroid metro-logs`. If the logs don't help, make sure your Metro configuration includes `watchFolders: ['/home/app'],`, replacing 'app' with the value of `RN_PROJECT_FOLDER_NAME`. This ensures changes are detected in both your local machine and the container.
- If you have issues connecting via SSH, try running `ssh root@{your.docker.ip.address} -v` for more debug info. Often times the logs will be clear and verbose enough to instruct you further.
- Your known_hosts file will likely throw an error after recreating the container, and you'll have to run `./dockdroid.sh clear-known-hosts`. SSH in again to confirm it's fixed, and accept the new known_host entry.
- If you encounter issues connecting via SSH, try running `ssh root@{your.docker.ip.address} -v` for more debug info. The logs are typically clear and verbose enough to guide you further.
- Your `known_hosts` file may cause an error after recreating the container. In this case, run `./dockdroid.sh clear-known-hosts`. Then SSH in again to confirm the issue is resolved, and accept the new `known_host` entry.

View File

@ -3,8 +3,17 @@
# Exit immediately if a command exits with a non-zero status.
set -e
# Source the environment variables
source $(dirname "${BASH_SOURCE[0]}")/.env
# Find the project root directory (i.e., the directory containing .dockerizedroot)
dir=$(pwd)
while [ "$dir" != "" ] && [ ! -f "$dir/.dockerizedroot" ]; do
dir=${dir%/*}
done
# Source the .env file
if [ "$dir" != "" ]; then
echo "Sourcing .env file from $dir"
source "$dir/.env"
fi
# Validate the container name
if [[ -z "${CONTAINER_NAME}" ]]; then

View File

@ -2,14 +2,20 @@
set -e
# Github auth for private npm packages
su -c "echo \"//github.com/:_authToken=$GH_TOKEN\" > /home/app/.npmrc"
# Check if GH_TOKEN exists
if [[ -n $GH_TOKEN ]]; then
# Github auth for private npm packages
su -c "echo \"//github.com/:_authToken=$GH_TOKEN\" > /home/app/.npmrc"
fi
# install npm dependencies
su -c "cd /home/app && npm install"
# remove the token
su -c "rm -f /home/app/.npmrc"
# If GH_TOKEN exists, remove the token
if [[ -n $GH_TOKEN ]]; then
su -c "rm -f /home/app/.npmrc"
fi
# run supervisord
exec /usr/bin/supervisord -c /etc/supervisor/conf.d/supervisord.conf

View File

@ -19,7 +19,7 @@ stdout_logfile=/var/log/supervisor/%(program_name)s.log
stderr_logfile=/var/log/supervisor/%(program_name)s.log
[program:npm]
command=bash -c "npm start -- --reset-cache"
command=bash -c "npm start -- --reset-cache --docker"
user=root
autostart=false
autorestart=false