CI/CD Pipline can't build dynamically loaded components - vue.js

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"

Related

Deploy expo app to GitHub Pages using Action

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.

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

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'

How to run WebdriverIO tests with GitHub Actions?

We are actually moving our repos to github and we want to use github actions for our pipelines, also our testautomation framework based on WebdriverIO. I'm completely new to github actions, I'm more an expert for Jenkins and Jenkins pipelines.
So, there is a really small github actions example on WebdriverIO webpage, but it is not really helpful for us/me. I try to execute only some tests on pushing some stuff to a branch. We are running that currently on "ubuntu-latest" image and I try to execute only some simple web tests, but it is not really easy possible. I tried the following ways at first:
Executing the tests using the chromedriver directly on ubuntu-latest image occurs an error:
ERROR webdriver: Request failed with status 500 due to unknown error: unknown error: Chrome failed to start: exited abnormally.
Using the wdio docker service with docker image "selenium/standalone-chrome-debug" produces also an error. If I re-run this job, then everything is fine. It is also a problem with a first run, bit the first run is the more interesting one ;):
ERROR wdio-docker-service: Failed to run container: request to http://localhost:4444/ failed, reason: connect ECONNREFUSED 127.0.0.1:4444
Maybe you have some experiences, recommendations or examples for me to solve that issue? What is the best way to execute WebdriverIO tests via GitHub actions?
This is my github action workflow yaml:
name: Testautomation Example
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout#v2
- name: Setup
run: npm install
- name: Test
# 1. issue with chromedriver
#run: ENV_PATH=environment/QS npm run clear-test -- "wdio-configs/wdio.conf.chrome.chromedriver.js --cucumberOpts.tagExpression=#example"
# 2. issue with wdio docker service
run: ENV_PATH=environment/QS npm run clear-test -- "wdio-configs/wdio.conf.chrome.docker.debug.js --cucumberOpts.tagExpression=#example"
- name: Upload Test Reports
uses: actions/upload-artifact#v2
with:
name: reports
path: tests/reports/
- name: Upload Logs
uses: actions/upload-artifact#v2
with:
name: logs
path: log/
I've solved my issues and this is an example github workflow for the github actions:
name: Multiple Environments Example
on: [push, pull_request]
jobs:
e2e-test-on-ubuntu-with-local-chrome:
runs-on: ubuntu-latest
#runs-on: macos-latest
#runs-on: windows-latest
steps:
- name: Checkout
uses: actions/checkout#v2
- name: Setup
run: npm install
- name: Test
run: npm run clear-test -- "wdio-configs/wdio.conf.chrome.chromedriver.headless.js --cucumberOpts.tagExpression=#myTests"
env:
ENV_PATH: environment/QS
- name: Upload Test Reports
uses: actions/upload-artifact#v2
with:
name: reports
path: tests/reports/
- name: Upload Logs
uses: actions/upload-artifact#v2
with:
name: logs
path: log/