I have a React app that builds correctly locally with yarn build. I have the following job in my config for Github Actions to deploy the app to S3:
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout#v1
- name: Configure AWS Credentials
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: us-east-2
- name: Install dependencies
run: yarn install
- name: Build
run: yarn build
- name: Deploy static site to S3 bucket
run: aws s3 sync build/ s3://my-s3-bucket --delete
The Build phase is failing with this error:
Module not found: Error: Can't resolve './components/Layout' in '/home/runner/work/storefront-app/storefront-app/src'
This module does exist under the src/components/ directory, so I'm not sure why it can't be found. I'm exporting it with export default Layout;
So I found that the issue was with filenames and Git.
Locally, all my files were named correctly: Nav.js, Layout.js, etc. On Github, they were downcased: layout.js. Git never picked up the change to the filename, and so the build on GH could not find ./components/Layout. Deleting the files and re-committing them solved the problem.
Related
I'm trying to deploy my application on vercel through a GitHub workflow that runs whenever the code is pushed onto the remote repository. The workflow is successfully running, but when I visit the deployed link, an empty white page is shown. On inspecting the network tabs, I could see that the request to the URL is returning a 304 status code. I'm quite clueless why this is happening. Below is the folder structure of my project.
Below is my workflow file
name: Preview Deployment
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
push:
branches-ignore:
- release
jobs:
Deploy-Preview:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Install Vercel CLI
run: npm install --global vercel#latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
During the build step, I could also notice the following log along with some other warnings:
Failed to load ./.env.
Despite the warnings(mostly related to the build file size being over the recommended size) and the above log, the build is successful. How do I fix this 304 issue? TIA
Further, to verify things, I also built the application locally and tried running it, and it worked as expected.
I'm trying to deploy my Vite react app to azure as an app service, but after deploy I always get the default screen (see picture). I tried deploying manually from VS code, but also creating the following yaml file in GitHub actions. The pipeline ran successfully and I still got this problem. I have my react-app in ./LOL_Contest/frontend, that's why I use that in the pipeline. What is the solution?
name: Build and deploy Node.js app to Azure Web App - lolcontest-fe
on:
push:
branches:
- master
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Set up Node.js version
uses: actions/setup-node#v1
with:
node-version: '18.x'
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
npm run test --if-present
working-directory: ./LOL_Contest/frontend
- name: Upload artifact for deployment job
uses: actions/upload-artifact#v2
with:
name: node-app
path: .
deploy:
runs-on: ubuntu-latest
needs: build
environment:
name: 'Production'
url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
steps:
- name: Download artifact from build job
uses: actions/download-artifact#v2
with:
name: node-app
- name: 'Deploy to Azure Web App'
id: deploy-to-webapp
uses: azure/webapps-deploy#v2
with:
app-name: 'lolcontest-fe'
slot-name: 'Production'
publish-profile: ${{ ... }}
package: ./LOL_Contest/frontend
I can not share the repository, but I have the following folder structure:
- DataAccess
- LOL_Contest
-- frontend
I want to deploy the contents of the folder "frontend"
I have a ReactJS project that I have been deploying to GitLab Pages for a while without any issues. Today however I started using .env files to get the app name and app version from the package.json file.
REACT_APP_VERSION=$npm_package_version
REACT_APP_NAME=$npm_package_name
When I deployed the app again, any references to either process.env.REACT_APP_VERSION or process.env.REACT_APP_NAME shows undefined although it works on my dev machine. I looked at the artifacts and it does have the .env file under the public/ directory.
Here's my .gitlab-ci.yml file that I use to deploy the app to GitLab Pages:
stages:
- build
- deploy
build:
image: node:16.15-buster-slim
stage: build
script:
- yarn install
- yarn build
- cp .env.example build/.env
artifacts:
paths:
- build/
pages:
image: alpine:latest
stage: deploy
variables:
GIT_STRATEGY: none # Do not clone git repo
NODE_ENV: production
PUBLIC_URL: https://somedomain.com
script:
# Rename the CRA `build` folder to `public`
- mv build public
- cp public/index.html public/404.html
artifacts:
paths:
- public
I'm trying to create a workflow so whenever I push code to my main branch, it automatically do npm run deploy so my github pages website is always up to date with the main branch.
My app is a react and gatsby app but I can't find a way to make a workflow to do that. I tried many workflow and I always end up with some errors.
name: GitHub Pages
on:
push:
branches:
- main
pull_request:
jobs:
deploy:
runs-on: ubuntu-20.04
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- uses: actions/checkout#v2
- name: Setup Node
uses: actions/setup-node#v2
with:
node-version: '14'
- name: Cache dependencies
uses: actions/cache#v2
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- run: npm ci
- run: npm run format
- run: npm run build
- name: Deploy
uses: peaceiris/actions-gh-pages#v3
if: ${{ github.ref == 'refs/heads/main' }}
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public
now my problem is that when I do npm run deploy the website on github pages is allright, but when I try to use my workflow most of the images aren't working.
Here is my files structure: https://github.com/JeromevDEV/my-portfolio
The solution is to use Gatsby Publish : https://github.com/marketplace/actions/gatsby-publish
I'm following this tutorial on setting up CI/CD with github actions for a react app. I want the action to build and deploy my react app to my firebase project for hosting. I'm fairly sure I'm followed the directions, but when I trigger my action with a push, I get this error:
> Run actions/download-artifact#v2
> with:
> name: build
> path: build Starting download for build Error: Unable to find any artifacts for the associated workflow
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
name: Firebase CI
on: push
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [14.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/f
steps:
- uses: actions/checkout#v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node#v1
with:
node-version: ${{ matrix.node-version }}
- run: npm ci
- name: Archive Build
uses: actions/upload-artifact#v2
with:
name: build
path: build
deploy:
name: Deploy
needs: build
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Download Build
uses: actions/download-artifact#v2
with:
name: build
path: build
- name: Deploy to Firebase
uses: w9jds/firebase-action#master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
I can install, build, and deploy manually from my console just fine. I thought this error might have something to do with my build directory's location, but its in the standard place. Any thoughts on what this might be?
Link to the full repo here
Additional Screenshots:
Seems like removing /build from my .gitignore solved the problem. I'm not %100 sure why though, as none of the examples of similar actions I have seen include their build folders.