Reactjs - Why Is My React Static Web App failing to Deploy in Azure?

Tikhon
March 11, 2024
108 views
0 votes
2 Answers

I am trying to create a Static Web App in Azure Portal and deploy React code written in Visual Studio Code from github.

The instructions I am following are here:

Quickstart: Building your first static site with Azure Static Web Apps

Steps:

Create Static Web App -> my-react-project

Select a Region -> East US 2

Choose build preset -> React

Enter location of app code -> /

Enter the location of the build output -> build

At this point I receive this message:

Then the build deploy fails:

The content server has rejected the request with: BadRequest

Reason: No matching Static Web App was found or the api key was invalid.

Run Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ***
repo_token: ***
action: upload
app_location: /
api_location: api
output_location: build
/usr/bin/docker run --name b469e5e693774fc22146d1ae8f22f864953d6a_86588a --label b469e5 --workdir /github/workspace --rm -e "INPUT_AZURE_STATIC_WEB_APPS_API_TOKEN" -e "INPUT_REPO_TOKEN" -e "INPUT_ACTION" -e "INPUT_APP_LOCATION" -e "INPUT_API_LOCATION" -e "INPUT_OUTPUT_LOCATION" -e "INPUT_API_BUILD_COMMAND" -e "INPUT_APP_ARTIFACT_LOCATION" -e "INPUT_APP_BUILD_COMMAND" -e "INPUT_ROUTES_LOCATION" -e "INPUT_SKIP_APP_BUILD" -e "INPUT_CONFIG_FILE_LOCATION" -e "INPUT_SKIP_API_BUILD" -e "INPUT_PRODUCTION_BRANCH" -e "INPUT_DEPLOYMENT_ENVIRONMENT" -e "INPUT_IS_STATIC_EXPORT" -e "INPUT_DATA_API_LOCATION" -e "HOME" -e "GITHUB_JOB" -e "GITHUB_REF" -e "GITHUB_SHA" -e "GITHUB_REPOSITORY" -e "GITHUB_REPOSITORY_OWNER" -e "GITHUB_REPOSITORY_OWNER_ID" -e "GITHUB_RUN_ID" -e "GITHUB_RUN_NUMBER" -e "GITHUB_RETENTION_DAYS" -e "GITHUB_RUN_ATTEMPT" -e "GITHUB_REPOSITORY_ID" -e "GITHUB_ACTOR_ID" -e "GITHUB_ACTOR" -e "GITHUB_TRIGGERING_ACTOR" -e "GITHUB_WORKFLOW" -e "GITHUB_HEAD_REF" -e "GITHUB_BASE_REF" -e "GITHUB_EVENT_NAME" -e "GITHUB_SERVER_URL" -e "GITHUB_API_URL" -e "GITHUB_GRAPHQL_URL" -e "GITHUB_REF_NAME" -e "GITHUB_REF_PROTECTED" -e "GITHUB_REF_TYPE" -e "GITHUB_WORKFLOW_REF" -e "GITHUB_WORKFLOW_SHA" -e "GITHUB_WORKSPACE" -e "GITHUB_ACTION" -e "GITHUB_EVENT_PATH" -e "GITHUB_ACTION_REPOSITORY" -e "GITHUB_ACTION_REF" -e "GITHUB_PATH" -e "GITHUB_ENV" -e "GITHUB_STEP_SUMMARY" -e "GITHUB_STATE" -e "GITHUB_OUTPUT" -e "RUNNER_OS" -e "RUNNER_ARCH" -e "RUNNER_NAME" -e "RUNNER_ENVIRONMENT" -e "RUNNER_TOOL_CACHE" -e "RUNNER_TEMP" -e "RUNNER_WORKSPACE" -e "ACTIONS_RUNTIME_URL" -e "ACTIONS_RUNTIME_TOKEN" -e "ACTIONS_CACHE_URL" -e "ACTIONS_RESULTS_URL" -e GITHUB_ACTIONS=true -e CI=true -v "/var/run/docker.sock":"/var/run/docker.sock" -v "/home/runner/work/_temp/_github_home":"/github/home" -v "/home/runner/work/_temp/_github_workflow":"/github/workflow" -v "/home/runner/work/_temp/_runner_file_commands":"/github/file_commands" -v "/home/runner/work/my-react-project/my-react-project":"/github/workspace" b469e5:e693774fc22146d1ae8f22f864953d6a

DeploymentId: 04ac8c8e-306d-498e-890f-885b056fb322

Try to validate location at: '/github/workspace'.
App Directory Location: '/' was found.
Try to validate location at: '/github/workspace/swa-db-connections'.
Looking for event info
The content server has rejected the request with: BadRequest
Reason: No matching Static Web App was found or the api key was invalid.

For further information, please visit the Azure Static Web Apps documentation at https://docs.microsoft.com/en-us/azure/static-web-apps/
If you believe this behavior is unexpected, please raise a GitHub issue at https://github.com/azure/static-web-apps/issues/
Exiting

The repo is here:

REPO

Thanks in advance for any guidance.

Answers

Chosen as BEST ANSWER
- Tikhon
- March 11, 2024 at 10:42 am
- 0 votes
0
Thanks to @Dasari Kamali for his assistance.

I was able to finally get this to work by doing the following:
1. Deleted old repo in github
2. Created new React project
3. Created new Static App in Azure
4. Code deployed this time with no errors
Thanks again for your help.

(Edit)

I changed your App.js file as follows and successfully deployed it to the Azure Static Web App.

Code :

App.js :

import React from 'react'; // Remove {useState} from this import
import GoalList from './components/GoalList';
import Header from './components/Header';
import logo from './logo2.svg';
import './App.css';

const ShowGoals = () => {
  const [showGoals, setShowGoals] = React.useState(false); // Use React.useState instead of useState
  const onClick = () => setShowGoals(true);
  return (
    <div>
      <input type="submit" value="Goals" onClick={onClick}></input>
      {showGoals ? <Goals /> : null}
    </div>
  );
}

const Goals = () => (
  <div id="goals">
    <Header />
    <GoalList />
  </div>
)

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <body>
          <p className='smaller'>
            Hello, My name is Doug Dexter and I am looking for my next opportunity as a web developer.
            <hr />
            I am currently learning full-stack development 
            using React and ASP.Net Core API.
            <hr />
            This website is written in React.
            <hr />
            <ShowGoals />
          </p>
        </body>
      </header>
    </div>
  );
}

export default App;

GitHub Workflow :

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          lfs: false
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GENTLE_FLOWER_06B90A80F }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "/" 
          api_location: "api" 
          output_location: "build" 

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GENTLE_FLOWER_06B90A80F }}
          action: "close"

Azure Static Web App Output :

Please signup or login to give your own answer.

Click here to cancel reply.

Reactjs – Why Is My React Static Web App failing to Deploy in Azure?

Answers