Deploy expo app to GitHub Pages using Action - react-native

I am trying to build an Action on GitHub to have always up-to-date the web version of my app. However, it is not updating.
For the first deploy, I followed the expo deploy to GitHub Pages documentation. Then, I built the following workflow:
name: Web
on:
push:
branches:
- main
workflow_dispatch:
jobs:
web:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
with:
fetch-depth: 0
token: ${{ secrets.GITHUB_TOKEN }}
- name: โš™๏ธ Set up repository
uses: actions/checkout#v2
- name: โ‡๏ธ Setup Node.js environment
uses: actions/setup-node#v3.6.0
with:
node-version: 16.x
- name: ๐Ÿ”ท Set up Expo
uses: expo/expo-github-action#v7
with:
expo-version: latest
token: ${{ secrets.EXPO_TOKEN }}
- name: ๐Ÿ“ฆ Install dependencies
run: yarn install
- name: โคด๏ธ Export the app
run: |
git remote set-url origin https://git:${GITHUB_TOKEN}#github.com/${GITHUB_REPOSITORY}.git
yarn deploy -- -u "github-actions-bot <support+actions#github.com>"
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: ๐Ÿš€ Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages#v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./
I also changed the Pages settings to deploy from an Action.
However, when the action ran it did not update the website. I decided to change back to the branch deployment, but now my site is crashing.
Have anyone ever done it? I could not find any reference browsing on the internet.

Related

Github actions automated unit tests failing with "cannot find module 'aws-exports'"

I am trying to find a way to run unit tests automatically on a project hosted by amplify using Github Actions to trigger the unit tests on pull request.
On each instance of the action, it is failing on line
import awsconfig from 'aws-exports';
With the error:
Cannot find module 'aws-exports' from 'src/resource/utils/HttpMethods.js'
The issue seems to be that the aws-exports file is generated by Amplify at build time, however, since these test are being run on github when a PR is created, Amplify has not yet built out and has not generated the aws-exports file.
I'm sure I'm not the first person to want to run automated unit tests for an Amplify hosted site. Has anyone encountered this issue/found a solution?
My github action for reference:
name: Node CI
on: [push, pull_request]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- uses: actions/checkout#v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node#v1
with:
node-version: ${{ matrix.node-version }}
- run: yarn install
- run: yarn test
I have already tried removing the aws-exports from the gitignore and manually posting it to the repo. This worked but is not ideal since amplify will re-generate this file on build.
edit
My current (working?) solution is to create a dummy config file for each environment, which contains the contents that the aws-exports would contain if it had built. I import this file instead of aws-exports.
While this solution "works" for now, it feels flimsy, and I would much rather have a proper solution.
I was able to use the amplify-cli-action to configure amplify in my GitHub Actions.
Note: I had to make a minor update to the default example to include amplify_cli_version: 10.6.1 as described in a workaround to this issue: https://github.com/ambientlight/amplify-cli-action/issues/31
name: Build/Test
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v3
- uses: actions/setup-node#v3
- run: npm install
- name: configure amplify
uses: ambientlight/amplify-cli-action#0.3.0
with:
amplify_command: configure
amplify_env: dev
amplify_cli_version: 10.6.1
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
AWS_REGION: us-west-2
- run: npm test

CI/CD Pipline can't build dynamically loaded components

Component
I built a web app with Vue.JS that uses dynamically loaded components, like in the example below.
Everything works just fine: I can build it (vue-cli-service build) locally and use the dist folder on the webserver without any problems (so I can at least deploy the code manually via SFTP). But I can't build the app in my CI/CD action on Github.
Action
The runner (ubuntu-latest โ€“ this is in my opinion the only difference to my local setup which is mac os) couldn't build the code. The error states that it can't find the dependencies โ€“ which is kind of reasonable because they're not there while building, but it just works when it's done locally. Basically my local setup works just like the action (I even specified the exact Nodejs version here).
Error
This dependency was not found:
* #/components/Modules in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Settings/DynModule.vue?vue&type=script&lang=js&
Template Part of DynModule.vue
<component v-if="component" :is="component"/>
Script Part of DynModule.vue
The function is located inside computed.
component: function () {
return () => import(`#/components/Modules/${this.module.data.type}.vue`);
}
Workflow Configuration for Github Actions
name: Deploy to example.de
on: workflow_dispatch
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Set up Node.js version
uses: actions/setup-node#v2
with:
node-version: '14.18.1'
- name: Install Dependencies
run: npm install
- name: Build for Production
run: npm run build
- name: Deploy to Server
uses: easingthemes/ssh-deploy#main
env:
SSH_PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }}
SOURCE: "dist/"
REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
REMOTE_USER: ${{ secrets.REMOTE_USER }}
REMOTE_PORT: ${{ secrets.REMOTE_PORT }}
TARGET: ${{ secrets.REMOTE_TARGET_STAGING }}
EXCLUDE: ".github"

Upload 'ng build' to S3 Bucket

I am trying to upload my angular-meteor project's 'ng build' to S3 Bucket.
This is my .yml file
on:
push:
branches:
- dev
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v1
- name: Setup meteor
uses: meteorengineer/setup-meteor#v1
with:
meteor-release: '1.8.1'
- name: Install Node.js
uses: actions/setup-node#v1
with:
node-version: '10.x'
- name: NG build Angular
run: ng build --prod
- name: Deploy to S3
uses: jakejarvis/s3-sync-action#master
with:
args: --acl public-read --delete
env:
AWS_S3_BUCKET: ${{ secrets.DEV_AWS_S3_BUCKET }}
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
AWS_REGION: ${{ secrets.AWS_REGION }}
SOURCE_DIR: 'browser'
Once I run this, I am receiving this error message for the NG build Angular section
Instead of running ng build --prod i have also tried to run ng build โ€” prod โ€” aot, ng build -- --prod & npm run build -- --prod but Still I am receiving the same error message.
Does anyone know how to solve this problem?
By default GitHub runners won't have ng/angular cli. So we got to install it . Below piece of code should do the job for you.
on:
push:
branches:
- dev
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v1
- name: Setup meteor
uses: meteorengineer/setup-meteor#v1
with:
meteor-release: '1.8.1'
- name: Install Node.js
uses: actions/setup-node#v1
with:
node-version: '10.x'
- name: Install Angular CLI
run: npm install -g #angular/cli
- name: NG build Angular
run: ng build --prod
- name: Deploy to S3
uses: jakejarvis/s3-sync-action#master
with:
args: --acl public-read --delete
#angular/cli is installed as a devDependency, so you have to use:
- name: NG build Angular
run: npx ng build --prod
or in Angular 12+
- name: NG build Angular
run: npx ng build --configuration production

GitHub Actions Upload Artifact not finding provided path from npm run build

I'm trying to set up a react website using CICD principles. I can run it locally, use 'npm run build' to get a build folder, and the website works fine when I manually push the files to S3. However, when I try to run the build and deployment through github actions, the upload-artifacts step gives the following warning: 'Warning: No files were found with the provided path: build. No artifacts will be uploaded.' Obviously the deploy job then fails since it can't find any artifacts to download. Why exactly is this happening? The build folder is definitely being created since running ls after the build lists it as one of the folders in the current working directory.
name: frontend_actions
on:
workflow_dispatch:
push:
paths:
- 'frontend/'
- '.github/workflows/frontend_actions.yml'
branches:
- master
defaults:
run:
working-directory: frontend
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- uses: actions/setup-node#v2
- name: npm install
run: npm install
- name: npm build
run: npm run build
env:
CI: false
- name: Upload Artifact
uses: actions/upload-artifact#master
with:
name: build
path: build
deploy:
needs: build
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Download Artifact
uses: actions/download-artifact#master
with:
name: build
path: build
- name: Deploy to S3
uses: jakejarvis/s3-sync-action#master
with:
args: --acl public-read --follow-symlinks --delete
env:
AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
AWS_REGION: 'us-west-2' # optional: defaults to us-east-1
SOURCE_DIR: 'build' # optional: defaults to entire repository
It turns out that my knowledge of github actions was incomplete. When setting a default working directory for jobs, the default directory is only used by commands that use 'run'. Hence all of the 'uses' actions are run in the base directory. I guess I've never encountered this issue since I've never tried uploading/downloading artifacts that weren't created in a base github directory.
Fixed the issue by changing the path from 'build/' to 'frontend/build'.

GitHub Action: Deploy output of vue-cli-service build to Azure App Service

I'm using a GitHub action to deploy to Azure App Service, and, although the npm build succeeds, I cannot figure out how to get the output of that build to be deployed along with the output of the .NET build.
As you can see in my workflow file, for the .NET build, I specified --output ./deploy and then at the bottom, that is deployed via package: './deploy'
However I don't know how to get the npm build output into './deploy'. Currently, the npm build places the output into ClientApp/dist, according to vue.config.js.
Vue config relevant line: outputDir: path.resolve(__dirname, "ClientApp/dist")
Entire action workflow file:
name: CI
on:
push:
branches: [ master ]
jobs:
build-all:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- uses: actions/setup-dotnet#v1
env:
DOTNET_CLI_TELEMETRY_OPTOUT: 1
with:
dotnet-version: '5.0.x'
- run: dotnet build ./source/trunk/my/project.csproj --output ./deploy
- name: Frontend build
working-directory: ./source/trunk/my/project
run: |
npm install
npm install #vue/cli-service
npx -p #vue/cli vue-cli-service build --mode development
- name: Azure login
uses: azure/login#v1.1
with:
creds: ${{ secrets.MY_SECRET}}
enable-AzPSSession: false
- name: Azure deploy
uses: azure/webapps-deploy#v2
with:
app-name: my-app-name
package: './deploy'