I am trying to develop a Expo / React Native from a docker container;
So far i have the following Dockerfile and docker-compose.yml in the root directory of my Expo app .. Whenever i run docker-compose up -d, it brings the container up but trying to hit the endpoint localhost:9000 it just shows me json data about the expo project (which looks like a bigger version of the app.json) instead of the metro bundler webpage.
Dockerfile
FROM node:latest
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package*.json /usr/src/app/
COPY app.json /usr/src/app/
RUN npm install -g expo-cli
EXPOSE 19000
EXPOSE 19001
EXPOSE 19002
CMD npm i -f && npm start
docker-compose.yml
version: '3.7'
services:
expo:
container_name: expo-app
build: ./
ports:
- 19000:19000
- 19001:19001
- 19002:19002
volumes:
- ./:/usr/src/app
- /usr/src/app/node_modules
environment:
- EXPO_DEVTOOLS_LISTEN_ADDRESS=0.0.0.0
- REACT_NATIVE_PACKAGER_HOSTNAME=<<my_local_ip_address>>
Related
I'm having trouble automating react native release build apps using firebase app distribution with Gitlab CI/CD. I get this error Error: set the --app option to a valid Firebase app id and try again
Also see image:
I've setup ".gitlab-ci.yml" file as below
## install project deps with --frozen-lockfile to make sure we will have the same packages version ( very recommended on running yarn install on ci)
##run: yarn install --frozen-lockfile
before_script:
- yarn install --frozen-lockfile
- yarn global add firebase-tools
stages:
- buildApp
buildApp project:
stage: buildApp
image: reactnativecommunity/react-native-android
cache:
key:
files:
- yarn.lock
paths:
- node_modules
policy: pull #`pull` the jobs pull the cache at the beginning but do not push the changes again.
script:
- yarn build:apk
- yarn install --pure-lockfile --cache-folder .yarn
- ./bin/app_distribution.sh
# - firebase use kavyatara --token "$FIREBASE_TOKEN"
# - firebase deploy --token "$FIREBASE_TOKEN"
artifacts:
paths:
- android/app/build/outputs/apk/release/app-release.apk
Also
app_distribution.sh file
#!/bin/bash
RELEASE_NOTE="New update Android build"
firebase appdistribution:distribute android/app/build/outputs/apk/release/app-release.apk \
--token "$FIREBASE_TOKEN" \
--app "$FIREBASE_APP_ID" \
--release-notes "$RELEASE_NOTE" --testers-file testers.txt
I have a weird issue that base64 images are corrupted after I deploy to my server with Gitlab CI
I started my boilerplate from this recent updated Github:
https://github.com/Jamie-Yang/vue3-boilerplate
A local yarn dev works
Then I made the Dockerfile:
FROM node:16 as build-stage
WORKDIR /app
COPY package*.json ./
RUN yarn install
COPY /. .
RUN yarn build
# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
The image does build fine and running on Windows Docker Desktop without a problem
Next I started with the Gitlab deploy:
image: docker
services:
- docker:dind
stages:
- deploy
step-deploy-prod:
cache: []
stage: deploy
script:
- docker build -t app/myapp .
- docker stop myapp || true && docker rm myapp || true
- docker run -d --restart always -p 11580:80 --name myapp app/myapp
The app is deployed but somehow base64 image is corrupt
I wanted to be sure that it wasn't the nginx proxy reverse, but visiting mysite.com:11580 gives the same result.
When I transfer the dist folder via FTP to a public_html folder (so no docker) that works.
So maybe some cashing is going on in the Gitlab runner?
When I inspect the working webpage in public_html, my base64 src is
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAA...
and on the non working docker environment
data:image/png;base64,iVBORwoaCgAAAA1JSERSAAAAyAAAAM...
So what can be happening here?
[UPDATE]
When I replace the logo with a perfect image it renders corrupt.
I'm trying to build a React Native APK with Expo (without ejecting). I can manage to locally get my environment variables from .env file when I do expo build:android in my local machine with all the project files.
When I do a push to my GitLab repository, I have this .gitlab-ci.yml file
---
image: node:alpine
cache:
key: ${CI_COMMIT_REF_SLUG}
paths:
- ~/.npm
- .jest
stages:
- test
- deploy
before_script:
- npm ci
jest-tests:
stage: test
script:
- npx jest --ci --passWithNoTests
expo-deployments:
stage: deploy
script:
- apk add --no-cache bash
- npx expo login -u $EXPO_USERNAME -p $EXPO_PASSWORD
- npx expo build:android --EXPO_ANDROID_GOOGLE_API_KEY $EXPO_ANDROID_GOOGLE_API_KEY --EXPO_IOS_GOOGLE_API_KEY $EXPO_IOS_GOOGLE_API_KEY --release-channel staging --non-interactive
- EXPO_ANDROID_GOOGLE_API_KEY=$EXPO_ANDROID_GOOGLE_API_KEY; EXPO_IOS_GOOGLE_API_KEY=$EXPO_IOS_GOOGLE_API_KEY; expo build:android --release-channel staging --non-interactive
I don't have in the repo the .env file, because of security.
Where all this variables are stored within each environment in GitLab:
(working perfectly)
EXPO_USERNAME = the username of my development account to access Expo.
EXPO_PASSWORD = the password of the account to access Expo.
(not working at all when trying to build)
EXPO_IOS_GOOGLE_API_KEY = "abcdefghijklmnopqrstuvwxyz"
EXPO_ANDROID_GOOGLE_API_KEY = "abcdefghijklmnopqrstuvwxz"
I wonder how could I set the Google Maps environment variables into the app when running the expo build:android command via GitLab CI pipeline:
- npx expo build:android
Finally I could manage to make this work the following way:
---
image: node:alpine
cache:
key: ${CI_COMMIT_REF_SLUG}
paths:
- ~/.npm
- .jest
stages:
- test
- deploy
before_script:
- npm ci
- ANDROID_GOOGLE_MAPS_API_KEY=${CI_COMMIT_BRANCH}_EXPO_ANDROID_GOOGLE_API_KEY
- IOS_GOOGLE_MAPS_API_KEY=${CI_COMMIT_BRANCH}_EXPO_IOS_GOOGLE_API_KEY
- export android=$( eval echo \$$ANDROID_GOOGLE_MAPS_API_KEY )
- export ios=$( eval echo \$$IOS_GOOGLE_MAPS_API_KEY )
jest-tests:
stage: test
script:
- npx jest --ci --passWithNoTests
expo-deployments:
stage: deploy
script:
- echo "EXPO_ANDROID_GOOGLE_API_KEY=$android" >> .env
- echo "EXPO_IOS_GOOGLE_API_KEY=$ios" >> .env
- apk add --no-cache bash
- npx expo login -u $EXPO_USERNAME -p $EXPO_PASSWORD
- npx expo build:android --release-channel staging --non-interactive
Where...
...CI_COMMIT_BRANCH is development|staging|production depending which branch in gitlab I am using.
...development_EXPO_ANDROID_GOOGLE_API_KEY | staging_EXPO_ANDROID_GOOGLE_API_KEY | production_EXPO_ANDROID_GOOGLE_API_KEY are variables that are stored at the Gitlab project.
... I am generating the .env file every time I run the script and saving there my variables with the respective value with: echo "EXPO_ANDROID_GOOGLE_API_KEY=$android" >> .env.
This way I don't need to push my .env file into Gitlab. I only need to define my variables in the settings of the project at Gitlab.
Hope this help to someone!
I have a simple .gitlab-ci.yml file that builds my Vue application. I build once and then deploy the dist folder to my various environments:
stages:
- build
- deploy_dev
- deploy_stg
- deploy_prd
build:
image: node:latest # Pull Node image
stage: build
script:
- npm install -g #vue/cli#latest
- npm install
- npm run build
artifacts:
expire_in: 2 weeks
paths:
- dist/
deploy_to_dev:
image: python:latest
stage: deploy_dev
dependencies:
- build
only:
- master # Only deply master branch automatically to Dev
script:
- export AWS_ACCESS_KEY_ID=$DEV_AWS_ACCESS_ID
- export AWS_SECRET_ACCESS_KEY=$DEV_AWS_ACCESS_KEY
- pip install awscli # Install AWS CLI
- aws s3 sync ./dist s3://$DEV_BUCKET
This all works great, however, I've now introduced some config and build my app differently per environment - for 3 environments I have 3 different build commands. Eg, I have an .env.production so for a production build my command becomes:
npm run build -- --mode production
Is there any way to get around having different builds for each environment but still using the .env files based on a GitLab variable?
You should split your build job to have one per environment and use the environment concept to have something like that for dev and production envs :
.build_template: &build_template
image: node:latest # Pull Node image
script:
- npm install -g #vue/cli#latest
- npm install
- npm run build -- --mode $CI_ENVIRONMENT_NAME
build_dev:
stage: build_dev
<<: *build_template
environment:
name: dev
build_prod:
stage: build_prod
<<: *build_template
environment:
name: production
In this snippet, I used anchors to avoid duplicate lines.
I built a Vue.js Vuex user interface. It works perfectly (on my laptop). I want to deploy it on Gitlab pages.
I used the file described here (except that I upgraded the Node.js version):
build site:
image: node:10.8
stage: build
script:
- npm install --progress=false
- npm run build
artifacts:
expire_in: 1 week
paths:
- dist
unit test:
image: node:10.8
stage: test
script:
- npm install --progress=false
- npm run unit
deploy:
image: alpine
stage: deploy
script:
- apk add --no-cache rsync openssh
- mkdir -p ~/.ssh
- echo "$SSH_PRIVATE_KEY" >> ~/.ssh/id_dsa
- chmod 600 ~/.ssh/id_dsa
- echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
- rsync -rav --delete dist/ user#server.com:/your/project/path/
The job is marked as run successfully on the pipeline. However when I click on the pages URL I get a 404 HTTP error code.
What am I missing?
I was facing a similar issue when I was trying to deploy my Vue.js application to Gitlab pages. After weeks of trial and error, I have got it to work.
Seeing your above script your building the app, unit testing it and trying to deploy it to an external server. If you need it in Gitlab pages as well you have to use the pages job.
Here is my pages job for deploying a vue.js app to Gitlab pages:
pages:
image: node:latest
stage: deploy
script:
- npm install --progress=false
- npm run build
- rm -rf public
- mkdir public
- cp -r dist/* public
artifacts:
expire_in: 1 week
paths:
- public
only:
- master
Hope this is what you're looking for.
You can deploy without the pipeline. In order for this to work you have to first build your application for production. If you have used Vue cli this is done by invoking the build command. ex. npm run build
This will generate a dist folder where your assets are. This is what you have to push in your repository. For example, look at my repository.
https://github.com/DanijelH/danijelh.github.io
And this is the page
https://danijelh.github.io/