This is my github actions yml file. After completion, the /build folder of my github repository is deployed to my linux server. But after that, my react website can't access the .env variable. When I look at the console in Chrome browser, I see that process.env.REACT_APP_API_URL is undefined. What's the problem? How can I fix the error?
name: Build & Deploy production server
on:
pull_request:
branches:
- main
types: [closed]
jobs:
build-deploy:
name: Build & Deploy production 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 production server
uses: easingthemes/ssh-deploy@main
with:
SSH_PRIVATE_KEY: ${{ secrets.PRO_SSH_PRIVATE_KEY }}
ARGS: "-rlgoDzvc -i --delete"
SOURCE: "build/"
REMOTE_HOST: ${{ secrets.PRO_REMOTE_HOST }}
REMOTE_USER: ${{ secrets.PRO_REMOTE_USER }}
REMOTE_PORT: ${{ secrets.PRO_REMOTE_PORT }}
TARGET: ${{ secrets.PRO_REMOTE_TARGET }}
EXCLUDE: "/dist/, /node_modules/"
I have over 10+ variables in .env file.
Oh, I found the solution and it works very well now. Let me provide my solution. Thanks all.
name: Build & Deploy on production server
on:
pull_request:
branches:
- main
types: [closed]
env:
REACT_APP_API_URL: ${{ vars.PRO_REACT_APP_API_URL }}
REACT_APP_PUBLIC_NFT_STORAGE_API_KEY: ${{ vars.REACT_APP_PUBLIC_NFT_STORAGE_API_KEY }}
REACT_APP_STRIPE_PRO_PRODUCT_ID: ${{ vars.REACT_APP_STRIPE_PRO_PRODUCT_ID }}
REACT_APP_STRIPE_PRO_TRIAL_ID: ${{ vars.REACT_APP_STRIPE_PRO_TRIAL_ID }}
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_ENOKI_API_KEY: ${{ vars.REACT_APP_ENOKI_API_KEY }}
REACT_APP_GOOGLE_CLIENT_ID: ${{ vars.REACT_APP_GOOGLE_CLIENT_ID }}
REACT_APP_SUI_NETWORK: ${{ vars.REACT_APP_SUI_NETWORK }}
REACT_APP_SUI_PACKAGE_ID: ${{ vars.REACT_APP_SUI_PACKAGE_ID }}
REACT_APP_SUI_SETTING_ID: ${{ vars.REACT_APP_SUI_SETTING_ID }}
REACT_APP_ADMIN: ${{ vars.REACT_APP_ADMIN }}
jobs:
build-deploy:
name: Build & Deploy Gallerai on production 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 production server
uses: easingthemes/ssh-deploy@main
with:
SSH_PRIVATE_KEY: ${{ secrets.PRO_SSH_PRIVATE_KEY }}
ARGS: "-rlgoDzvc -i --delete"
SOURCE: "build/"
REMOTE_HOST: ${{ secrets.PRO_REMOTE_HOST }}
REMOTE_USER: ${{ secrets.PRO_REMOTE_USER }}
REMOTE_PORT: ${{ secrets.PRO_REMOTE_PORT }}
TARGET: ${{ secrets.PRO_REMOTE_TARGET }}
EXCLUDE: "/dist/, /node_modules/"
I used env context and defined all variables in Settings/Secrets and Variables.