I'm setting up a ci/cd pipeline for my expo react-native application using circleci.
I have followed this tutorial. And this is my config.yml:
version: 2
publish: &publish
working_directory: ~/loplop-native
docker:
- image: circleci/node:12.14.0
steps:
- checkout
- restore_cache:
name: Restore yarn package cache
key: v1-cache-dependencies-{{ checksum "yarn.lock" }}-{{ checksum "package.json" }}-{{ arch }}
- run:
name: Install dependencies
command: yarn install --frozen-lockfile
- save_cache:
name: Save yarn package cache
paths:
- ~/.cache/yarn
key: v1-cache-dependencies-{{ checksum "yarn.lock" }}-{{ checksum "package.json" }}-{{ arch }}
- run:
name: Login into Expo
command: npx expo login -u $EXPO_USERNAME -p $EXPO_PASSWORD
# command: npx expo login --non-interactive -u $EXPO_USERNAME
- run:
name: Save current branch name to an env variable
command: |
if [ "${CIRCLE_BRANCH}" == "master" ]; then
echo 'export EXPO_RELEASE_CHANNEL="default"' >> $BASH_ENV
else
echo 'export EXPO_RELEASE_CHANNEL=$CIRCLE_BRANCH' >> $BASH_ENV
fi
- run:
name: Publish to Expo
command: npx expo publish --non-interactive --max-workers 1 --release-channel $EXPO_RELEASE_CHANNEL
jobs:
build_and_test:
docker:
- image: circleci/node:12.14.0
steps:
- checkout
- restore_cache:
name: Restore yarn package cache
key: v1-cache-dependencies-{{ checksum "yarn.lock" }}-{{ checksum "package.json" }}-{{ arch }}
- run:
name: Install Expo-cli
command: yarn global add expo-cli
- run:
name: Install dependencies
command: yarn install --frozen-lockfile
- save_cache:
name: Save yarn package cache
paths:
- ~/.cache/yarn
key: v1-cache-dependencies-{{ checksum "yarn.lock" }}-{{ checksum "package.json" }}-{{ arch }}
- run:
name: Run linting
command: yarn lint
publish_to_expo:
<<: *publish
workflows:
version: 2
workflow:
jobs:
- build_and_test
- publish_to_expo:
filters:
branches:
ignore: gh-pages
The script is failing on the login step with this error:
I have also tried with the --no-interactive flag but I'm still getting the same error.
Any suggestion would be greatly appreciated.
You need to install the Expo CLI first. Run yarn global add expo-cli or npm install -g expo-cli, then run the Expo commands directly, without npx (e.g. expo login ...)
It is due to you don't have the dependencies of expo-cli in package.json. You need to add "expo-cli": "1.1.0-beta.4" in package.json under devdependencies.
Reference : https://bitbucket.org/byCedric/expo-guide-ci/src/master/package.json
Related
My trigger in the GitHub Actions workflow is when we have a new tag, then deploy the tag to the desired environment.
So, running npm version prerelease will trigger the workflow.
The problem is when I try to use cache I see that the version in package.json and package-lock.json are always changed so I can't use real cache here.
How can I continue working with npm version and get the benefits of caching?
- uses: actions/checkout#v2
- name: Cache node modules
id: cache-nodemodules
uses: actions/cache#v2
env:
cache-name: cache-node-modules-preview
with:
# caching node_modules
path: node_modules
key: ${{ runner.os }}-preview-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-preview-${{ env.cache-name }}-
${{ runner.os }}-preview-
- name: Install Dependencies app
if: steps.cache-nodemodules.outputs.cache-hit != 'true'
run: npm ci --legacy-peer-deps
- name: build
run: npm run build
My Monorepo is currently managed by Lerna.js.
It all works fine except for the GitHub actions workflow I use to automate the npm publishing.
The situation is as follows:
I update packages/types-lib, then update packages/server with new types.
Upon completion, I push everything to GitHub, and the action is bumping packages/types-lib version.
However, it does not update the packages/types-lib listed in packages/server as a dependency.
Locally, it works, but not in the workflow...
Here is my workflow code:
name: Publish To NPM
on:
push:
branches:
- main
jobs:
publish:
runs-on: ubuntu-latest
steps:
- name: "Checkout"
uses: actions/checkout#v2
with:
fetch-depth: 0
- name: "Use NodeJS 16.14.2"
uses: actions/setup-node#v2
with:
node-version: '16.14.2'
- name: "Setup npm"
run: |
npm set #pastelabs:registry=https://registry.npmjs.org/
npm set "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}"
- name: Install dependencies
run: |
yarn install --frozen-lockfile
yarn lerna bootstrap
- name: Run builds # Run build of all packages
run: yarn lerna run build
- name: Run tests # Run tests of all packages
run: yarn lerna run test
- name: "Version and publish to NPM" # Interesting step
env:
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
run: |
git config user.name "${{ github.actor }}"
git config user.email "${{ github.actor}}#users.noreply.github.com"
if [ ${{ github.base_ref }} = develop ]; then
npx --yarn lerna version patch --exact --no-private --conventional-commits --conventional-prerelease --preid beta --yes
else
npx --yarn lerna version patch --exact --no-private --conventional-commits --conventional-graduate --yes
fi
npx --yarn lerna publish from-git --yes --exact
I am creating my own NPM packages for the first time. For each commit, 1/ The package version should increase on the NPM registry, 2/ Update the package.json file in the github repository.
.github/workflows/publish.yml
on:
push:
branches:
- main
env:
version: 0
jobs:
build:
runs-on: ubuntu-latest
permissions:
contents: read
packages: write
steps:
- uses: AutoModality/action-clean#v1
- uses: actions/checkout#v2
with:
ref: 'main'
fetch-depth: 0
- uses: actions/setup-node#v2
with:
node-version: 12
registry-url: https://npm.pkg.github.com/
scope: "#nandhirajan-tfi"
- run: echo "version=$(npm show #nandhirajan-tfi/my-package version)" >> $GITHUB_ENV
- run: npm version ${{env.version}} --no-git-tag-version --allow-same-version
- run: npm install
- run: npm build
- run: npm version patch -m "[RELEASE] %s" --no-git-tag-version --allow-same-version
- run: npm publish
env:
credentials: ${{secrets.GITHUB_TOKEN}}
GitHub Actions Output:
The above log says that the npm publish command has updated the NPM Version to 1.11.18. But the changes are not reflecting on the NPM registry.
Any help would be appreciated.
First of all you need to retrieve your package.json version. You can use the action ga-project-version for that.
Example:
name: release
on:
push:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
# This is how you use the ga-project-version action
- name: Get version of the project
id: project-version
uses: 'euberdeveloper/ga-project-version#main'
# In this step the exposed version is used as tag of a github release to publish
- name: Add release
uses: "marvinpinto/action-automatic-releases#latest"
with:
repo_token: "${{ secrets.GITHUB_TOKEN }}"
# This is how you access the exposed version
automatic_release_tag: "${{ steps.project-version.outputs.version }}"
title: "Deploy"
files: |
backend.tar.gz
As you can see, you will have the version available in "${{ steps.project-version.outputs.version }}".
After that the question is with which logic you will augment your version, e.g. the simplest one would be increasing the last number, but it's not a good idea, it'd not be semver.
After that you can use your custom way to get the newer version by using the current one as input ("${{ steps.project-version.outputs.version }}"`).
After having the new version, just edit the package.json (e.g. sed command) to write the new version, and commit it (e.g. stefanzweifel/git-auto-commit-action action).
In the end you can publish your npm package from the github action (follow this link)
I'm migrating our existing Travis tasks to GH actions. For Travis the command below would publish to npm and use the release tag name for the npm version.
script: yarn npm-bundle && npm version $TRAVIS_BRANCH --allow-same-version -m
"chore - release version %s [skip ci]" --allow-empty
Unfortunately changing to the below doesn't work...
run: |
yarn npm-bundle && npm version ${{ github.event.release.tag_name }} --allow-same-version -m "chore - release version %s [skip ci]" --allow-empty
npm publish --access public --dry-run
Its obviously empty as npm is using the version from package.json. I've tried some other variables such as ${{ github.head_ref }}
also...
run: |
yarn npm-bundle -m "chore - release version %s [skip ci]" --allow-empty
npm publish --tag ${{ github.event.release.tag_name }} --allow-same-version --access public --dry-run
I have resolved the issue by refactoring to the following...
- uses: actions/setup-node#v1
with:
node-version: 14.15.0
registry-url: https://registry.npmjs.org/
- run: yarn install
- run: git config --global user.name "${{ github.actor }}"
- run: git config --global user.email "github-action-${{ github.actor }}#users.noreply.github.com"
- run: npm version ${{ github.event.release.tag_name }}
- run: yarn npm-bundle
- run: npm publish --access public
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
You can use the npm-publish action in your workflow instead of the script you used in Travis.
If you look for more actions available with NPM, you can find them on thee Github Marketplace
For example here, you could use something like this in your workflow, adapting in with your context with other run step if you need to use yarn or other commands:
on: push
jobs:
publish:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v1
- uses: actions/setup-node#v1
with:
node-version: 10
- run: npm install
- run: npm test
- uses: JS-DevTools/npm-publish#v1
with:
token: ${{ secrets.NPM_TOKEN }}
tag: <your release tag name>
For more information regarding how this action work, check here.
Other Action
This other action (publish-to-npm) could be interesting as well if you want to check.
For the last two days I’ve been looking for a good setup to use Expo + Detox + CircleCI so that the app can build during the CI process.
Locally, I can get Expo + Detox to work by downloading Exponent.app and placing in bin and running expo start (in a different terminal). However, expo start is blocking in Circle CI so is there an efficient way to achieve this.
I have looked at lots of examples and not found a single clear response with updated examples which is a shame considering how popular Expo is getting.
If anyone has an example CircleCI file that you could share that would be really great! Or indeed some help explaining what the flow might be to achieve this.
I appreciate that this is also a question for Detox and CircleCI too but I thought I would add it here as many might also want to know the answer?
My current Circle-CI code that I have been going backwards and forwards with trying to find a solution that works...
# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
defaults: &defaults
working_directory: ~/iynk-react-app
jobs:
test:
<<: *defaults
docker:
- image: circleci/node:10
steps:
- checkout
- run:
name: Update npm
command: 'sudo npm install -g npm#latest'
- run:
name: Install Firebase Tools
command: sudo npm install -g firebase-tools#latest
- restore_cache:
name: Restore Yarn Package Cache
keys:
- yarn-packages-{{ checksum "yarn.lock" }}
- run:
name: Install Dependencies
command: yarn install --frozen-lockfile
- save_cache:
name: Save Yarn Package Cache
key: yarn-packages-{{ checksum "yarn.lock" }}
paths:
- ~/.cache/yarn
- run: yarn test
- run:
name: Install modules in functions
command: yarn --cwd ./functions --ignore-engines
e2e:
<<: *defaults
macos:
xcode: "10.2.1"
steps:
- run:
# Note: the [ character is necessary to uniquely identify the iPhone 8 simulator, as the phone + watch simulator is also present in the build image:
# Will show what looks like an error - Instruments Usage Error: Unknown device specified: "iPhone 8 (12.2) [") - but it launch
name: Pre-start simulator first to ensure that it is open
command: xcrun instruments -w "iPhone 8 (12.2) [" || true
- checkout
- restore_cache:
key: yarn-v1-{{ checksum "yarn.lock" }}-{{ arch }}
- restore_cache:
key: node-v1-{{ checksum "package.json" }}-{{ arch }}
- run: yarn install --ignore-engines
- save_cache:
key: yarn-v1-{{ checksum "yarn.lock" }}-{{ arch }}
paths:
- ~/.cache/yarn
- save_cache:
key: node-v1-{{ checksum "package.json" }}-{{ arch }}
paths:
- node_modules
- run:
name: Install applesimutils
command: |
brew tap wix/brew
brew install applesimutils
- run:
name: Install react-native, detox CLI and expo CLI
command: |
npm install -g react-native-cli
npm install -g detox-cli
npm install -g expo-cli
- run:
name: Prepare detox environment
command: |
detox clean-framework-cache &&
detox build-framework-cache
- run:
name: Download Exponent.app into bin
command: |
brew install wget
./scripts/setup.sh
# - run:
# name: Install the downloaded version of the expo iOS app on the Simulator
# command: |
# xcrun simctl install booted ./bin/Exponent.app
# - run:
# name: Login into Expo and publish to staging
# command: |
# npx expo login -u $EXPO_USERNAME -p $EXPO_PASSWORD
# npx expo publish --non-interactive --max-workers 1 --release-channel staging
- run:
name: Run expo locally using (&) Run detox tests
# shell: /bin/sh
command: |
yarn test:e2e &
expo start -c
workflows:
version: 2
build_and_test:
jobs:
- test
- e2e
My packages:
"detox": "12.3.0",
"detox-expo-helpers": "^0.6.0",
"expo-detox-hook": "^1.0.10",
Local Works
My local setup runs and the tests pass. This is the process at the moment:
Ensure local environment is setup:
brew update
brew tap wix/brew
brew install --HEAD applesimutils
npm install -g detox-cli
Run the setup script:
./setup.sh
Then start expo.
expo start -c
Launch the simulator that you plan to use for your test (so if you picked an iPhone X, launch the iPhone X etc). You do not need to run i from expo though, just open the Simulator program.
open -a Simulator.app
Finally, run the detox tests from a different terminal with:
yarn test:e2e
Known issues
Detox + Expo + jest : timeout on opening the app https://github.com/wix/Detox/issues/1422
I do not think this is related as I can get my setup to run locally...
UPDATE 2 July 2019
I can get the tests to pass if I build in my circle ci with:
- run:
name: Login into Expo and publish to staging (could update with $CIRCLE_BRANCH)
command: |
npx expo login -u $EXPO_USERNAME -p $EXPO_PASSWORD --non-interactive
npx expo publish --non-interactive --max-workers 1 --release-channel testing
And then in the e2e/init.js file load from that release channel:
beforeAll(async () => {
await detox.init(config);
// Run from the remote build if in CI
if (__CI__) {
const url = 'exp://exp.host/#alexpchin/iynk?release-channel=testing';
await device.relaunchApp({ url, sourceApp: 'host.exp.exponent' });
await expect(element(by.label('Got it'))).toBeVisible();
await element(by.label('Got it')).tap();
}
});
However, if I use this I must NOT use reloadApp from detox-expo-helpers (in e2e/init.js):
beforeEach(async () => {
await adapter.beforeEach();
// If not CI, use `reloadApp` from `detox-expo-helpers`
if (!__CI__) {
await reloadApp();
}
});
This is obviously really slow because you have to create a new build every time you want to test the UI rather than running from the branch code...
Still no answers or updates, so I'll try to provide mine.
From what I understand the flow that you'd want to automate is the test on Simulator. Steps are listed in the attached link.
i.e. for iOS
expo build:ios -t simulator
expo build:status (or expo url:ipa)
tar -xvzf your-app.tar.gz
open /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app --args -CurrentDeviceUDID `xcrun instruments -s | grep "iPhone 7 (12.2)" -m1 | cut -d "[" -f2 | cut -d "]" -f1`
xcrun simctl install booted <app path>
xcrun simctl launch booted <app identifier>