azurecreate-react-appazure-static-web-app-routing

How to deploy a Create-react-app project to Azure


We created a static web app project in azure.

Pushed the code to a github repo.

I added staticwebapp.config.json file with because the routes were throwing 404s. I'm handling 404s and every route with ReactRouter

{
  "navigationFallback": {
    "rewrite": "index.html"
  }
}

now I'm getting this error message with a page that has only 2 routes

The content server has rejected the request with: BadRequest Reason: The number of static files was too large.

Could I be doing something wrong or is Azure only able to handle Nextjs apps and no CreateReactApp projects ?


Solution

  • These are the steps below to create a React app and deploy it to Azure Static Web App:

    npx create-react-app my-react-app
    cd my-react-app
    

    Add staticwebapp.config.json to the React app folder.

    {
      "navigationFallback": {
        "rewrite": "index.html"
      }
    }
    

    Build and push the application to Git.

    enter image description here

    With routing:

    Here are the corrected sentences:

    These are the steps below to create a React app and deploy it to Azure Static Web App with routing.

    
    // src/index.js
    
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import { HashRouter } from 'react-router-dom';
    
    ReactDOM.render(
      <HashRouter>
        <App />
      </HashRouter>,
      document.getElementById('root')
    );
    
    
    // src/Navbar.js
    
    import React from 'react';
    import { Link } from 'react-router-dom';
    import './App.css';
    
    export default function Navbar() {
      return (
        <div className="App">
          <center>
            <ul>
              <li><Link to="/">Home</Link></li>
              <li><Link to="/about">About</Link></li>
              <li><Link to="/contact">Contact</Link></li>
            </ul>
          </center>
        </div>
      );
    }
    
    
    // src/templates/Home.js
    
    import React from 'react';
    import logo from '../logo.svg';
    import '../App.css';
    
    export default function Home() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React With Swaraj
            </a>
          </header>
        </div>
      );
    }
    
    
    
    // src/templates/About.js
    
    import React from 'react';
    
    export default function About() {
      return (
        <div>
          <h1>
            <center>
              <p>
                This is About.
              </p>
              <a
                href="https://github.com/swarajgosavi/swarajgosavi"
                target="_blank"
                rel="noopener noreferrer"
              >
                About Me.
              </a>
            </center>
          </h1>
        </div>
      );
    }
    
    
    
    
    
    
    
    // src/templates/Contact.js
    
    import React from 'react';
    
    export default function Contact() {
      return (
        <div>
          <h1>
            <center>
              <p>
                You can Contact Me.
              </p>
              <a
                href="https://github.com/"
                target="_blank"
                rel="noopener noreferrer"
              >
                Sampath (GitHub) [@Sampath]
              </a>
            </center>
          </h1>
        </div>
      );
    }
    
    
    
    // src/App.js
    
    import React from 'react';
    import { Routes, Route } from 'react-router-dom';
    import Home from './templates/Home';
    import About from './templates/About';
    import Contact from './templates/Contact';
    import Navbar from './Navbar';
    
    function App() {
      return (
        <>
          <Navbar />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
          </Routes>
        </>
      );
    }
    
    export default App;
    

    staticwebapp.config.json:

    {
    
    "routes":  [
    
    {
    
    "route":  "/",
    
    "allowedRoles":  ["anonymous"]
    
    },
    
    {
    
    "route":  "/about",
    
    "allowedRoles":  ["anonymous"]
    
    },
    
    {
    
    "route":  "/contact",
    
    "allowedRoles":  ["anonymous"]
    
    },
    
    {
    
    "route":  "/profile*",
    
    "allowedRoles":  ["authenticated"]
    
    }
    
    ],
    
    "navigationFallback":  {
    
    "rewrite":  "/index.html"
    
    },
    
    "globalHeaders":  {
    
    "cache-control":  "no-store, must-revalidate"
    
    },
    
    "trailingSlash":  "auto"
    
    }
    

    Push the Code To Git:

    enter image description here

    Deployment status in Git Action:

    enter image description here

    Azure : enter image description here

    enter image description here

    enter image description here