Question 357250 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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:

  1. Create Static Web App -> my-react-project

enter image description here

  1. Select a Region -> East US 2

enter image description here

  1. Choose build preset -> React

enter image description here

  1. Enter location of app code -> /

enter image description here

  1. Enter the location of the build output -> build

enter image description here

  1. At this point I receive this message:

enter image description here

  1. 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.

enter image description here

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    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.


  2. 0

    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 :

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search