My GitHub Actions completes successfully, but when I go to my website all I see is a blank white page. From the chrome dev tools I check the console and I see this error:
react-dom.production.min.js:216 Error: accountId is required
at Z (brightcove-react-player-loader.es.js:950)
at Q (brightcove-react-player-loader.es.js:1061)
at X (brightcove-react-player-loader.es.js:1126)
at r.o.loadPlayer (brightcove-react-player-loader.es.js:1350)
at r.o.componentDidMount (brightcove-react-player-loader.es.js:1519)
at hu (react-dom.production.min.js:219)
at As (react-dom.production.min.js:259)
at t.unstable_runWithPriority (scheduler.production.min.js:18)
at Ha (react-dom.production.min.js:122)
at Ts (react-dom.production.min.js:252)
uu # react-dom.production.min.js:216
The following is my yaml file which creates a .env file including the BrightCove ID but it isn't getting the ID from the .env for some reason...
# This is a basic workflow to help you get started with Actions
name: Deploy React Dev
# Controls when the workflow will run
on:
# Triggers the workflow on push or pull request events but only for the master branch
push:
branches: [ development ]
pull_request:
branches: [ development ]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
env:
REACT_APP_BRIGHTCOVE_ID: ${{ secrets.REACT_APP_BRIGHTCOVE_ID }}
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
build:
runs-on: ubuntu-latest
defaults:
run:
working-directory: ./app
steps:
# Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
- uses: actions/checkout#v2.3.4
# Create .env
- name: Create env file
run: |
touch .env
echo REACT_APP_AUTH0_DOMAIN=${{ secrets.REACT_APP_AUTH0_DOMAIN }} >> .env
echo REACT_APP_AUTH0_CLIENT_ID=${{ secrets.REACT_APP_AUTH0_CLIENT_ID }} >> .env
echo REACT_APP_AUTH0_AUDIENCE=${{ secrets.REACT_APP_AUTH0_AUDIENCE }} >> .env
echo REACT_APP_VIDEO_URL=${{ secrets.REACT_APP_VIDEO_URL }} >> .env
echo REACT_APP_STORE_NAME=${{ secrets.REACT_APP_STORE_NAME }} >> .env
echo REACT_APP_PAYPAL_CLIENT_ID=${{ secrets.REACT_APP_PAYPAL_CLIENT_ID }} >> .env
echo REACT_APP_HASURA_GRAPHQL_ENDPOINT=${{ secrets.REACT_APP_HASURA_GRAPHQL_ENDPOINT }} >> .env
echo REACT_APP_BRIGHTCOVE_ID=${{ secrets.REACT_APP_BRIGHTCOVE_ID }} >> .env
echo HASURA_GRAPHQL_ADMIN_SECRET=${{ secrets.HASURA_GRAPHQL_ADMIN_SECRET }} >> .env
# Set up Node JS
- uses: actions/setup-node#master
with:
node-version: '16.x'
cache: 'yarn'
cache-dependency-path: app/yarn.lock
# Use cached node_modules directory
- uses: actions/cache#v2
with:
path: '**/node_modules'
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
# Install & build
- run: yarn install
- run: yarn build
# Upload artifact
- name: Upload artifact
uses: actions/upload-artifact#v2
with:
name: webapp
path: app/build
deploy:
runs-on: ubuntu-latest
environment: Orange Develop
needs: build
steps:
- name: Download artifact
uses: actions/download-artifact#v2
with:
name: webapp
# Deploy webapp to Orange server
- name: SCP deployment to Orange
uses: appleboy/scp-action#master
with:
host: ${{ secrets.FTP_HOST }}
username: ${{ secrets.FTP_USER }}
key: ${{ secrets.FTP_KEY }}
source: '.'
target: '/opt/media-exchange/app/build'
rm: true`
Found the answer on this stackoverflow question: https://stackoverflow.com/a/66929604/14502018
I needed to set the environment that my secrets are stored in.
Inside the build job I added this line:
build:
runs-on: ubuntu-latest
environment: Orange Develop #MISSING LINE
Related
I am new to azure and I made a setup on the azure portal with GitHub and set .yml. the pipeline runs successfully in the build phase but fails in the deployment phase.
here is my workflow file.
push:
branches: ["master"]
workflow_dispatch:
env:
AZURE_WEBAPP_NAME: wep-app-name # set this to your application's name
AZURE_WEBAPP_PACKAGE_PATH: "." # set this to the path to your web app project, defaults to the repository root
NODE_VERSION: "16.15.0" # set this to the node version to use
NODE_OPTIONS: "--max-old-space-size=8192"
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v3
- name: Set up Node.js
uses: actions/setup-node#v3
with:
node-version: ${{ env.NODE_VERSION }}
cache: "npm"
#- name: yarn install, build, and test
# run: |
# node --max_old_space_size=8192
# yarn
#yarn run build
#zip artifact
- name: Zip artifact for deployment
run: zip release.zip ./build/* -r #get files and folder in build folder and
#compress into release.zip with linux zip command
- name: Upload artifact for deployment job
uses: actions/upload-artifact#v3
with:
name: node-app
path: build
deploy:
permissions:
contents: none
runs-on: ubuntu-latest
needs: build
environment:
name: "Development"
url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
steps:
- name: Download artifact from build job
uses: actions/download-artifact#v3
with:
name: node-app
path: .
- name: "Deploy to Azure WebApp"
uses: azure/webapps-deploy#v2
id: deploy-to-webapp
with:
app-name: "app-name"
slot-name: 'Production'
publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_B2318A4382DB625 }}
package: .
I am trying to deploy my next app to gh pages but only the index and 404 pages are displaying. All other pages, images, js and css files are returning a 404 error - everything inside the _next folder.
After some research, I found a popular solution to this issue was adding a .nojekyll file into the output folder to prevent jekyll from ignoring files prefixed with _ which I've tried but the files remain missing.
Here is my gh action to building and deploy the app -
name: Deploy Next.js site to Pages
on:
# Runs on pushes targeting the default branch
push:
branches: ["main"]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow one concurrent deployment
concurrency:
group: "pages"
cancel-in-progress: true
jobs:
# Build job
build:
runs-on: ubuntu-latest
defaults:
run:
working-directory: ./docs
steps:
- name: Checkout
uses: actions/checkout#v3
- name: Detect package manager
id: detect-package-manager
run: |
if [ -f "${{ github.workspace }}/docs/yarn.lock" ]; then
echo "::set-output name=manager::yarn"
echo "::set-output name=command::install"
echo "::set-output name=runner::yarn"
exit 0
elif [ -f "${{ github.workspace }}/docs/package.json" ]; then
echo "::set-output name=manager::npm"
echo "::set-output name=command::ci"
echo "::set-output name=runner::npx --no-install"
exit 0
else
echo "Unable to determine packager manager"
exit 1
fi
- name: Setup Node
uses: actions/setup-node#v3
with:
node-version: "16"
cache: ${{ steps.detect-package-manager.outputs.manager }}
- name: Restore cache
uses: actions/cache#v3
with:
path: |
.next/cache
# Generate a new cache whenever packages or source files change.
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
# If source files changed but packages didn't, rebuild from a prior cache.
restore-keys: |
${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
- name: Install dependencies
run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
- name: Build with Next.js
run: ${{ steps.detect-package-manager.outputs.runner }} next build
- name: Static HTML export with Next.js
run: ${{ steps.detect-package-manager.outputs.runner }} next export
- name: nojekyll
run: touch ./out/.nojekyll
- name: Upload artifact
uses: actions/upload-pages-artifact#v1
with:
path: ./docs/out
# Deployment job
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages#v1
I've checked the artifact that gets deployed and all intended files are there.
What am I missing here?
in the public folder add file .nojekyll
then in package.json add
"deploy": "gh-pages -d dist -t true"
then run this command
yarn generate
yarn deploy
this file .nojekyll will be copied in the dist folder
I using nuxt app but the same idea
thanks
I'm using dotenv-webpack to set up the enviornment varibles from webpack. And push my code build to S3 then. I set up .env file on my local with APP_BASE = http://localhost:3000 inside .env.
I have created the github action workflow.yml:
name: React CI
on:
push:
branches:
- "main"
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [15.x]
steps:
- uses: actions/checkout#v1
- run: npm install
- run: npm run build
- 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: "ap-southeast-2"
SOURCE_DIR: "dist"
APP_BASE: ${{ secrets.APP_BASE }}
On my github actions secrets, I have added the secrets:
on webpack settings, I have set systemvars: true:
plugins: [
new Dotenv({
systemvars: true,
}),
It's working on my localhost.
I didn't commit .env file to my repository, and when I push code to github, github console output: Failed to load ./.env..
When I check the compiled file, it shows var e="MISSING_ENV_VAR".APP_BASE;. That means github action didn't catch the APP_BASE on the secrets.
How can I fix this issue?
One possibility is comitting .env to your repo with values suitable for local dev and containing no real secrets. Then put all your secrets in GitHub and when CI runs the local dev values will be overwritten by the ones in GitHub secrets via the systemvars setting.
I found the error, I should move the env varible to the higher level as the current one I put is for task on S3, not for build.
name: React CI
on:
push:
branches:
- "main"
env:
APP_BASE: ${{ secrets.APP_BASE }}
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [15.x]
steps:
- uses: actions/checkout#v1
- run: npm install
- run: npm run build
- 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: "ap-southeast-2"
SOURCE_DIR: "dist"
I am trying to deploy my project using Google App engine using Github actions. I created main.yaml file and added a job to create .env file during deployment. But it is showing the built successful but the .env is not added to the code. I am using actions Create .env file.
This is my main.yaml file-
name: CI
on:
push:
branches: [ deploy ]
pull_request:
branches: [ deploy ]
jobs:
create-envfile:
runs-on: ubuntu-18.04
steps:
- name: Make envfile
uses: SpicyPizza/create-envfile#v1
with:
envkey_DEBUG: False
envkey_DATABASE_URL: ${{ secrets.DATABASE_URL }}
envkey_USER: ${{ secrets.USER }}
envkey_PASSWORD: ${{ secrets.PASSWORD }}
envkey_DATABASE_NAME: ${{ secrets.DATABASE_NAME }}
file_name: .env
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Initialize Google Cloud SDK
uses: zxyle/publish-gae-action#master
with:
service_account_email: ${{ secrets.GCP_SA_EMAIL }}
service_account_key: ${{ secrets.GCP_SA_KEY }}
project_id: ${{ secrets.PROJECT_ID }}
# An optional variables parameter can be used
gae_variables: ${{ secrets.GAE_VARIABLES }}
- name: Publish app to Google App Engine
run: |
# This client-secret.json is converted by GCP_SA_KEY.
gcloud auth activate-service-account ${{ secrets.GCP_SA_EMAIL }} --key-file=client-secret.json
gcloud config set project ${{ secrets.PROJECT_ID }}
gcloud -q app deploy app.yaml --promote
This is the output of the https://github.com/khannakshat7/Elektra/actions/runs/888591866
You run shows
Unexpected input(s) 'envkey_DEBUG', 'envkey_DATABASE_URL', 'envkey_USER', 'envkey_PASSWORD', 'envkey_DATABASE_NAME',
valid inputs are ['entryPoint', 'args', 'file_name']
As explained in SpicyPizza/create-envfile issue 10:
because Github is expecting all the potential input variables to be defined by
the Action's definition.
You could ignore that warning except in your case, as commented here, it does not seem to work.
Check issue 12 for a possible .env right issue.
Here is an example which works (from issue 14):
- name: Make envfile
uses: SpicyPizza/create-envfile#v1
with:
envkey_DEBUG: false
envkey_REACT_APP_FIREBASE_API_TOKEN: ${{ secrets.FIREBASE_API_TOKEN }}
file_name: .env
So i have a Ionic React app which i would want that every time i push to the master branch it automatically uploads the files to amazons s3 bucket as well. I have come pretty far and my only problem is with the yml file in which i have to specifiy the directory to be uploaded. This is how it looks now:
name: Deploy
on:
push:
branches: [ master ]
workflow_dispatch:
jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- uses: actions/setup-node#v1
with:
node-version: 12
- run: npm install -g npm
- run: npm ci
- run: npm build
- uses: aws-actions/configure-aws-credentials#v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: eu-north-1
- run: aws s3 sync <What to insert here?> s3://example-bucket
Now i have tried with putting jsut an . there but it uploaded for 20 mins without reaching an end and it was not with a strcutured folders in the s3 buckets but every file for itself. Any solutions? I feel like it is a easy task but im no backend developer
I have the index file here: payeat-s3/public/index.html
I have used this YAML configuration to deploy my react site to S3 using Github Actions:
on:
push:
branches:
- develop
name: Build and Deploy Site to S3
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout#master
- name: Setup Node
uses: actions/setup-node#v2
with:
node-version: '12.x'
- name: Build App
run: |
yarn && yarn build && ls *
env:
CI: ""
- name: Copy 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: ${{ secrets.AWS_REGION }}
SOURCE_DIR: ${{ secrets.SOURCE_DIR }}
I have added more details in this blog - https://blog.coderise.io/deploy-react-app-aws-s3-using-github-actions/