I am deploying a React app to an Azure App Service that uses non-hashed URLs (eg. browserHistory) like
http://mywebapp.azurewebsites.net/map/50.9375/6.9603/13
but that should all be handled by the same index.html for all paths. How do you accomplish this in Azure App Service? Basically, i want all requests against the app service to map to /index.html and let React work it out.
Add a web.config file in the root of your application that you deploy to Azure App Service:
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="redirect all requests" stopProcessing="true">
<match url="^(.*)$" ignoreCase="false" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
</conditions>
<action type="Rewrite" url="/index.html" appendQueryString="true" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Related
I have a React SPA published on IIS which is using React Router for URL routes which is working perfectly however within the public directory i have a sub folder that is completely separate to the React project that im trying to access however it doesnt seem to be working:
URL: http://{REACT_SPA}/Dev (/Dev is a sub folder)
web.config:
<?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>
any ideas?
I have two different web apps hosted on one Azure web app service.
Here are two different directories.
http://menuapp.azurewebsites.net/MainSite
http://menuapp.azurewebsites.net/AdminPanel
How I can map them to one public IP? example below
MyMenu.com
adminPanel.MyMenu.com
UPDATE
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="mydomain.com" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{HTTP_HOST}" pattern="^(admin.mydevapp.nl)$" />
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
<action type="Redirect" url="http://mydevapp.nl/app2" redirectType="Temporary" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
PRIVIOUS
You can use rewrite in web.config.
My Sample（After 12 hours, the URL expired）:
Main site url(): http://mydevapp.nl/
virtual app site url: http://mydevapp.nl/app2
Gif
Visit main site , webapp1
Visit virtual application site , webapp2
My structure of webapp.
my config:
Add web.config like below.
Result.
Ok, this is similar to other questions out there but I am not familiar with url rewrite.
I am hosting (hopefully only for development and testing) a react application under IIS.
If hosted in the root of the site folder all is well using
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Static Assets" stopProcessing="true">
<match url="([\S]+[.](svg|js|css|png|gif|jpg|jpeg))" />
<action type="Rewrite" url="{R:1}" />
</rule>
<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="/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
But I need it to work in a subapplication. For instance: http://myserver:8888/myapp. Where myapp is the sub application.
IIS diagram:
Sites
- MySite
- MyApp
Better example of the url that includes the route: http://myserver:8888/myapp/1234/abcd.
1234 and abcd are route values/params.
contents of my app directory are:
index.html
main.a9e1df0325f4fdb57e7e.js
vendors~main.c8848853e10f698af19d.js
web.config
Thanks
Gina
You could host your app in any subapplication in iis but be careful to defining correct route for serving contents. It seems you want to host static content so you can't use route parameters in url hence these parameters are used by asp.net. Static content are served by iis. You can try this url for serving content in myapp:
http://myserver:8888/myapp/index.html
I made a react app using create-react-app. I am trying to deploy it on azure web app. I created a build and deployed using FTP.
When there is the internal redirect from the react the app I am able to see the webpage. But when I try to directly go to the url, I get this error.
For example:
if base url is www.example.com, and the app internally redirects to /new, the page goes to www.example.com/new. But if I directly try to load www.example.com/new, I get the above shown response. This doesn't happen in local testing
Demo:
I have created a demo here
For it to work for me, I added a web.config-file in the public-folder (this is where favicon.ico, index.html & manifest.json is located), and added the following code:
<?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 hope this might help :)
Place the below web.config file under the /site/wwwroot directory
<?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>
When there is the internal redirect from the react the app I am able to see the webpage. But when I try to directly go to the url, I get this error.
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
If you use Network tool to capture network traffic when you click the button New to render (redirect to) the new page, you will find it just changes the URL locally instead of really requesting for http://data-trigger-mass-test.azurewebsites.net/new to the server. When you directly browse and request for http://data-trigger-mass-test.azurewebsites.net/new to the server, the server could not find the resource, so it returns (404) error. In order to make the URL http://data-trigger-mass-test.azurewebsites.net/new work on both server and client-side, you may need to set up routes for it on both server and client side.
Your server should always send the root html file for all client request, so that it can pass routing to react.
If the server is NodeJs, add something like below into your server.js.
app.get('*', (req, res) => {
res.sendFile('public/index.html', { root: __dirname });
});
This worked:
<?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 created a web.config file in the public-folder where the index.html is located and added the above code.
I am working on an Angular2 app. It uses "#angular/common": "2.0.0-rc.4" and "#angular/router": "3.0.0-beta.2".
My problem is that when I use the browser refresh on some of the pages I see an error saying...
"The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."
This also happens if I hit the url directly.
An example url is...
https://tilecasev2.azurewebsites.net/profile/therichmond
However if you view pages via the homepage they work ok but only until refreshed (https://tilecasev2.azurewebsites.net).
I have the below in my index.html head...
<base href="/">
Why does this happen and how can I fix it?
HashLocationStrategy avoids the issue by including a # in all of your angular routes but doesn't really fix it.
To make angular routes without hashes work in azure the same way they do in your local development environment, you just need to configure IIS to rewrite all requests as root. This lets angular handle the routing.
To do this, add a Web.config file to your site's root folder with the following contents:
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" 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>
If you deploying in same app service plan both angular and API project then this the solution.
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Angular" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_URI}" pattern="^/api" negate="true" />
<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>
for more details refer this link https://less0.github.io/azure-angular-II/
As Gunter pointed out HashLocationStrategy needed to be setup.
I followed the steps in the Angular2 docs and it all works now...
https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html