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 ?
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.
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.
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 :