[SETUP] Virtual Development Environment - React-Native - to reduce setup time

[GundlackFelixDEV]

Problem

Time to get started with development takes too long (ages)

Description

To get started with the development of the react-native environment a lot of time gets lost in the setup of the required tools. This includes setting of Enviornment Variables and connecting multiple SDKs, Tools and Applications. This process currently takes more than half a day. This makes it inpractical for new community members who want to join a Hackday or Hackathon to get started and creates a high level of stress/frustration.

Target

Provide guidance for community members to get started!

Goal

Reduce time to get started with development

Tasks

Put it on a Wiki Page

• [ ] Virtual environment which can be installed on any machine
  • [ ] Linux / Unix - describe how to use tunnel
• Fixed Environment (not virtual)
  • [ ] Windows
  • [ ] Linux- describe how to use tunnel
• Docker Environment
  • [x] Windows
  • [x] Linux - describe how to use tunnel

Potential Solutions

• Virtual Box
• Setup Android development environment on Virtualbox VM
• Docker and Expo
• Docker Expo-CLI Images

[IvoLeist]

I am still struggling to find a solution for it but I at least made some progress which is worth sharing with you:

System: Windows10 Home Build:19041.21 (Insider Slow Rig) IDE: vscode 1.42.0

While researching for a solution I found that blog post: https://sonyarouje.com/2019/08/02/expo-react-native-development-in-docker/

It sounded really promising so I tried to use it to build and start our app. Kinda worked, meaning I am able to start the Docker container, npm install and when doing npm run web expo starts.

Update ~BUT so far exposing the ports does not seem to work: "This site can’t be reached localhost refused to connect."~ Adding "forwardPorts": [ 19000, 19001, 19002, 19006 ], resolved that issue.

However, the phone (Fairphone 3) still runs in that error: https://github.com/react-community/create-react-native-app/issues/144

[IvoLeist]

If you have a Win10 home system and want to reproduce it:

1. Check if virtualization is enabled (Taskmanager -> Performance) --> If yes go to 2. 1b) If virtualization is disabled go in the BIOS settings and see if you can enable it 1c) If not sorry you cannot use Docker :-/
2. Download https://github.com/docker/toolbox/releases + Install Dockertoolbox (not Desktop) *Win10 Premium/Education install Docker Desktop
3. Start Docker via the Docker Quickstart Terminal 3b) it runs into an error reinstall Docker toolbox with "install VirtualBox with the NDIS5 driver" https://forums.docker.com/t/unable-to-install-docker-desktop-on-windows-10-home/64779/7 3c) If it still runs into an error deinstall VirtualBox and reinstall Docker toolbox 4d) Still not working: did you try a restart ?!
4. Make sure docker runs by "docker run hello-world"
5. Fork the CAMA-CORE-Example into your Github profile
6. Get your PAT (Personal Access Token) https://github.com/settings/tokens
7. Follow the steps in that blogpost https://sonyarouje.com/2019/08/02/expo-react-native-development-in-docker/ *

*with the following modifications:

1. In docker compose.yml insert at line 10 your user name and your pat eg.: command: "--gitRepo github.com/IvoLeist/CAMA-CORE-Example --pat XXXXXXXXXXXXX"
2. In .devcontainer/devcontainer.json modify line 5 that it shows: "workspaceFolder": "/home/dev/src/", 2b) If you are on a windows machine add this line before line 5 "workspaceMount": "src=//c/Users/yourUserName/RepoFolder/testexpo,dst=/workspaces/testexpo,type=bind,consistency=delegated", 2c) Add the following line as well :"forwardPorts": [ 19000, 19001, 19002, 19006 ]"

Good Luck ;D

[IvoLeist]

This is the current state of that issue: So far you can only see it on the web browser (http://localhost:19006/) BUT w/o a working SQLite. ~I guess because in the used docker setup is no SQLite installed. Going to modify the docker file and see if that resolves the issue~ Since I am running it in the browser. Thus, it would be good to add an emulator to the docker file (see: https://github.com/healthhackersER/CAMA-CORE-Example/issues/34)

@GundlackFelixDEV @zappingseb Can you give it a try + is this "mature" enough to put it in the wiki? Should I put the docker setup in an extra repo?

[GundlackFelixDEV]

You are running it in the Browser. SQL is only working on native environment.

[IvoLeist]

@GundlackFelixDEV Thanks for the quick clarification. I always mix up native apps with web applications.

[wooramkang]

TO INSTALL DOCKER ON UBUNTU SYSTEM COPY AND PASTE DOWN BELOW

sudo apt update
sudo apt install apt-transport-https ca-certificates curl software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu bionic stable"
sudo apt update
apt-cache policy docker-ce
sudo apt install docker-ce
sudo systemctl status docker
sudo usermod -aG docker ${USER}
su - ${USER}
id -nG

[wooramkang]

files name file inside

-- filename what is inside of the file

-- install_docker.sh sudo apt update sudo apt install apt-transport-https ca-certificates curl software-properties-common -y curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu bionic stable" sudo apt update sudo apt install docker-ce -y sudo usermod -aG docker ${USER}

-- DOCKERFILE FROM ubuntu/ubuntu:18.04 apt update apt install git -y apt install npm -y apt install node.js -y cd ~ git clone https://github.com/healthhackersER/CAMA-CORE-Example.git cd CAMA-CORE-Example npm install npm run web

-- build_dockerfile.sh sudo docker build -t healthhacker .

/docker_dir/CAMA ---> /ANY_WORKDIR/ of CAMA-CORE existing dir

before running, please end the local expo client

-- run_testenv.sh sudo docker run -ti -p 19001:19001 -p 19002:19002 -p 19003:19003 -v /docker_dir/CAMA/:/home/ --name healthhacker healthhacker /bin/bash

[wooramkang]

--DOCKERFILE ADD file ... in / CMD ["/bin/sh"] ENV NODE_VERSION=12.16.1 /bin/sh -c addgroup -g 1000 ENV YARN_VERSION=1.22.0 /bin/sh -c apk add --no-cache COPY file:238737301d47304174e4d24f4def935b29b3069c03c72ae8de97d94624382fce in /usr/local/bin/ ENTRYPOINT ["docker-entrypoint.sh"] CMD ["node"] LABEL maintainer=email@patwoz.de /bin/sh -c apk add --no-cache COPY file:d66543d68c04b3faebb6060dfa39aabab21ffae5b7f014696c00a0938ac9db62 in / ENTRYPOINT ["/entrypoint.sh"] CMD ["--help"] RUN mkdir CAMA RUN cd CAMA RUN git clone https://github.com/healthhackersER/CAMA-CORE-Example.git RUN cd CAMA-CORE-Example RUN npm install WORKDIR /CAMA/CAMA-CORE-Example

-- build_docker.sh docker build healthhacker .

-- run_expo.sh docker run -p 19001:19001 -p 19002:19002 -p 19003:19003 -p 19004:19004 -p 19005:19005 -p 19006:19006 -v ${PWD}:/CAMA/ -ti --name healthhacker healthhacker /bin/bash npm run web

[alexq-hh]

I have a question to the content of the issue: What is ment by "...describe how to use tunnel" ? What is "tunnel" in this case?

[IvoLeist]

I managed to find a workaround so that we can use @wooramkang docker container as soon as the PR is finished. Please see: https://github.com/healthhackersER/CAMA-CORE-Example/pull/38

It is working on windows10 and Linux (Manjaro)

@alexq-hh I do not know @GundlackFelixDEV can you elaborate on that ?