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

Question

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 ?

Answer 1

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

• Create a React app using the following command:

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.

• Create a Static Web App and select the Git repository where you pushed the code.
• Browse the app after the Git action has been completed.

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.

• Code Reference DOC @Swaraj Gosavi and routing configuration of Azure Static Web Apps from MSDOC npm install react-router-dom

// 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:

Deployment status in Git Action:

Azure :