I'm currently having problems when serving a HTML file in my react app. I use #nrwl/react to build my application.
The html folder is present after building my application (in the public folder).
My setup works when running the application locally. The moment I deploy the application and host it I think the react router is messing up the path. In the deployed version I see my application nested with a blank screen in my iframe.
Router:
<Switch>
<Route path="/" exact />
<Route path="/home" component={HomeComp} />
<Route path="/iframe" component={IframeComp} />
<Route onEnter={() => window.location.reload()} />
<Route component={NotFoundPage} />
</Switch>
IframeComp:
import React from 'react';
const IframeComp= () => {
return (
<iframe
src="/staticfolder/index.html"
></iframe>
);
};
export default IframeComp;
My rewrite rules in web.config
<rewrite>
<rules>
<rule name="HTTPSs">
<match url="(.*)"/>
<conditions>
<add input="{HTTPS}" pattern="Off"/>
<add input="{HTTP_HOST}" negate="true" pattern="^localhost" />
</conditions>
<action type="Redirect" url="https://{HTTP_HOST}/{R:1}"/>
</rule>
<rule name="ReactRoutes" stopProcessing="true">
<match url="^(?!api|swagger).*" />
<conditions>
<add input="{HTTP_METHOD}" pattern="^GET$" />
<add input="{HTTP_ACCEPT}" pattern="^text/html" />
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
Related
When I deploy the React App to IIS Web Server, the pages 404. I know I can fix this issue with a rewrite rule or hash router. Is there any other way?
The set up in app.js
<Switch>
<Route exact path="/Documents/Home" component={Home} />
<Route exact path="/Documents" component={Documents} />
<Route component={NotFoundPage} />
</Switch>
You can set up a rewrite rule in the web.config to have IIS point to index.html
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="ReactRouter Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
<action type="Rewrite" url="index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Or I can wrap the routes in a HashRouter so it doesn't send the route info to the web server. though it has a /#/ in the url.
<HashRouter>
<Switch>
<Route exact path="/Documents/Home" component={Home} />
<Route exact path="/Documents" component={Documents} />
<Route component={NotFoundPage} />
</Switch>
</HashRouter>
Is there a third way of fixing this issue of routing on IIS?
I have created a multipage application using reactjs and have manage the routing using react router-dom. I tested it using npm start and it is working fine. The pages are properly redirecting. But when I run "npm run build" and add it to IIs server, only the home page is coming. No matter what link I click on, I am getting redirected to the home page.
I tried modifying the web.config file.
`
<?xml version="1.0"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
`
But it seems the index.html is not updated with the rest of the pages other than the homepage. My user routes are `
<BrowserRouter>
<Routes>
<Route exact path="/" element={<HomepageAtm />} />
<Route
exact
path="/New-Registration"
element={<RegistrationAtm />}
/>
<Route exact path="/View" element={<VIEW_ATM />} />
<Route exact path="/List_View" element={<LIST_VIEW />} />
<Route exact path="/Airport_View" element={<AIRPORT_VIEW />} />
<Route exact path="/Map_View" element={<MAP_VIEW />} />
<Route exact path="/History_Data" element={<History_Data />} />
<Route exact path="/ContactUs" element={<Contact />} />
<Route exact path="/Terminalarea_View" element={<TERMINALAREA_VIEW />} />
</Routes>
</BrowserRouter>
`
I also tried using HashRouter but the results were same. Except for the home page, no other pages are loading.
In App.js component I was defined route like this:
<Route path="/item/:itemId" exact element={<Item />} />
But when I manually enter the URL in the browser like :
http://example.com/item/3
The browser shows me an error page:
404 - File or directory not found.
How can I fix the error?
Finally I got it.
According to this article, I should install the URL Rewrite module first. then
create a web.config beside project build files. and put these inside it :
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="ReactRouter Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
<action type="Rewrite" url="index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
So now my problems solved
If you are using router v6 there is not exact keyword
I have a sample React application. I deployed the application to IIS. Default page is OK, but /category page returns 404 - File or directory not found.
import { Route, BrowserRouter } from "react-router-dom";
const Home = () => (
<div>
<h2>Home</h2>
</div>
);
const Category = () => (
<div>
<h2>Category</h2>
</div>
);
export default function App() {
return (
<BrowserRouter>
<Route path="/"><Home /></Route>
<Route path="/category"><Category /></Route>
</BrowserRouter>
);
}
Web.config file content. runAllManagedModulesForAllRequests solution not working unfortunately.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<modules runAllManagedModulesForAllRequests="true">
<remove name="UrlRoutingModule"/>
</modules>
</system.webServer>
</configuration>
Detailed Error Information
Module: IIS Web Core
Notification: MapRequestHandler
Handler: StaticFile
Error Code 0x80070002
ny suggestion please
Using URL rewrite modul, redirect all requests to index.html file.
<?xml version="1.0"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
I've been looking for a way to make my app working with IIS. I can access my homepage just fine but when I navigate to my route http://10.7.138.131/home/wellchart I'll received 403 error.
So I have a web.config that looks like this :
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="ReactRouter Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
My createBrowserHistory :
export const History = createBrowserHistory({
basename:"/home"
});
And lastly my react routing :
<Router basename={"/"} history={History}>
<div>
<Route path="${process.env.PUBLIC_URL}/wellchart" component={WellChartPage} />
<Route path="${process.env.PUBLIC_URL}/welldetail" component={WellDetailPage} />
<Route path="${process.env.PUBLIC_URL}/tableau" component={TableauPage} />
</div>
</Router>
Thanks :)
You need setup url rewrite on IIS.
In react application we have single entry point index.html. If you try to open other page, IIS will try to find that file but we don't have any physical file there so IIS will return 404.
URL rewrite will solve this problem
https://learn.microsoft.com/en-us/iis/extensions/url-rewrite-module/creating-rewrite-rules-for-the-url-rewrite-module
https://www.iis.net/downloads/microsoft/url-rewrite