Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – Building react app with github actions then pushing build to digital ocean apps

I am trying to build my react app on github actions then deploy it to digital oceans app platform. It keeps building but doesn’t seem to actually be making changes, here is my actions script. I’m also not even sure this is possible


on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    env:
      CI: false
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20'
      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - name: Install dependencies
        run: npm install
      - name: Build project
        run: npm run build
      - name: Install doctl
        uses: digitalocean/action-doctl@v2
        with:
          token: ${{ secrets.DIGITALOCEAN_ACCESS_TOKEN }}
      - name: Deploy to DigitalOcean App Platform
        run: doctl apps create-deployment ${{ secrets.PROD_APP_ID }}
Tags:

2

Answers


  1. 0

    Try changing the DigitalOcean run command to doctl apps update PROD_APP_ID --spec .do/app.yaml

    Make sure you have the .yaml file in your repository, that specifies the configuration for your DO deployment.

    Code:

    on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    env:
      CI: false
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20'
      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - name: Install dependencies
        run: npm install
      - name: Build project
        run: npm run build
      - name: Install doctl
        uses: digitalocean/action-doctl@v2
        with:
          token: ${{ secrets.DIGITALOCEAN_ACCESS_TOKEN }}
      - name: Deploy to DigitalOcean App Platform
        env:
          DO_API_TOKEN: ${{ secrets.DIGITALOCEAN_ACCESS_TOKEN }}
        run: doctl apps update ${{ secrets.PROD_APP_ID }} --spec .do/app.yaml

    And here’s and example for the app.yaml file:

    name: my-react-app
services:
  - name: web
    github:
      repo: github-username/repo-name
      branch: main
      deploy_on_push: true
    build_command: npm run build
    run_command: npx serve -s build
    source_dir: /
    environment_slug: node-js
    http_port: 8080
    routes:
      - path: /
    instance_count: 1
    instance_size_slug: basic-xxs
    envs:
      - key: NODE_ENV
        value: production
    Login or Signup to reply.
  2. 0

    I think you can use ssh-deploy to deploy your react app on Digital ocean. I provide sample code I used in my react web application.

    name: Build & Deploy Gallerai on server

on:
  push:
    branches:
      - main

env:
  REACT_APP_API_URL: ${{ vars.REACT_APP_API_URL }}
  REACT_APP_PUBLIC_NFT_STORAGE_API_KEY: ${{ vars.REACT_APP_PUBLIC_NFT_STORAGE_API_KEY }}
  REACT_APP_STRIPE_PUBLIC_KEY: ${{ vars.REACT_APP_STRIPE_PUBLIC_KEY }}
  REACT_APP_STRIPE_ESSENTIAL_ID: ${{ vars.REACT_APP_STRIPE_ESSENTIAL_ID }}
  REACT_APP_STRIPE_PRO_LITE_ID: ${{ vars.REACT_APP_STRIPE_PRO_LITE_ID }}
  REACT_APP_STRIPE_PRO_ID: ${{ vars.REACT_APP_STRIPE_PRO_ID }}
  REACT_APP_GIPHY_SDK_API_KEY: ${{ vars.REACT_APP_GIPHY_SDK_API_KEY }}
  REACT_APP_TINYMCE_API_KEY: ${{ vars.REACT_APP_TINYMCE_API_KEY }}
  REACT_APP_EMAIL_REDIRECT_LINK: ${{ vars.REACT_APP_EMAIL_REDIRECT_LINK }}
  REACT_APP_CLOUDFLARE_WORKER_TOKEN: ${{ vars.REACT_APP_CLOUDFLARE_WORKER_TOKEN }}
  REACT_APP_TRUNSTILE_SITE_KEY: ${{ vars.REACT_APP_TRUNSTILE_SITE_KEY }}
  REACT_APP_DISCORD_CLIENT_ID: ${{ vars.REACT_APP_DISCORD_CLIENT_ID }}
  REACT_APP_DISCORD_REDIRECT_URI: ${{ vars.REACT_APP_DISCORD_REDIRECT_URI }}
  REACT_APP_DISCORD_SCOPE: ${{ vars.REACT_APP_DISCORD_SCOPE }}
  REACT_APP_DISCORD_TYPE: ${{ vars.REACT_APP_DISCORD_TYPE }}

jobs:
  build-deploy:
    name: Build & Deploy Gallerai on server
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18.x'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Run build
        run: npm run build --if-present
    
      - name: Deploy on server
        uses: easingthemes/ssh-deploy@main
        with:
            SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
            ARGS: "-rlgoDzvc -i --delete"
            SOURCE: "build/"
            REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
            REMOTE_USER: ${{ secrets.REMOTE_USER }}
            REMOTE_PORT: ${{ secrets.REMOTE_PORT }}
            TARGET: ${{ secrets.REMOTE_TARGET }}
            EXCLUDE: "/dist/, /node_modules/"
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search