We are migrating our React Web App to a Linux App Service from a Windows App Service. We had a custom web.config that would handle routing so that when a user manually visits one of our routes, they would not run into a 404. This fix is not working on a Linux App Service.
We're running into 404's and we need this to work as we have custom routes that the user should be able to reach. The site works if they route to the default index.html, but custom routes don't. We've tried creating a new Windows App Service and the migration works just fine. Any ideas on how to get custom routes working in a Linux App Service?
Here's our web.config we are currently using:
<?xml version="1.0"?>
<configuration>
<system.webServer>
<staticContent>
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<remove fileExtension=".otf" />
<remove fileExtension=".ttf" />
<remove fileExtension=".eot" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
<mimeMap fileExtension=".otf" mimeType="application/font-otf" />
<mimeMap fileExtension=".ttf" mimeType="application/font-ttf" />
<mimeMap fileExtension=".eot" mimeType="application/font-eot" />
<clientCache cacheControlMode="DisableCache" />
</staticContent>
<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>
As you are running your app in a Linux App Service you don't need a web.config file since its only used by IIS, as #PeterPan already said.
To run your React web app in Azure Linux Web App Service, and make any direct access on custom routes be handled by index.html you need to configure the startup command on "Settings > General settings > Startup Command" like the exemple below. Remember to change the path to your build path.
pm2 serve /home/site/wwwroot/build --no-daemon --spa
Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.
You can find more information about it in pm2 documentation: https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml
I've coped with the same problem recently: React router direct links not working on Azure Web App Linux
Azure Linux WebApp is based on Docker Container which be different from Azure Windows WebApp with IIS and web.config.
So you just need to remove the web.config file and make it run on local or a docker container, then to build it as a docker image or use Azure CLI to deploy to Azure WebApp for Container.
There are two offical documents you can refer to.
Create a Node.js app in Azure for Linux
Run a custom Linux container in Azure App Service
Related
I tried following the many existing questions and blogs online but I couldn't get it to work, I have created a simple React app with this setup:
It run fine locally. I also ran "npm run build". I also added a web.config to my public folder, which got copied to my build folder with the following content:
<?xml version="1.0"?>
<configuration>
<system.webServer>
<httpErrors errorMode="Detailed"></httpErrors>
<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>
My public folder look like this:
I create my Azure Web App online fine and I was able to deploy to it but I browse to it I get this error:
The page cannot be displayed because an internal server error has occurred.
What error do I have?
The page cannot be displayed because an internal server error has
occurred.
This error may occur if application is not deployed properly or dependencies are not loaded.
Steps to deploy React to Azure Web App :
Open your Project in VS Code
Go to Extensions. Search for Azure App Service and click on Install.
Go to Azure App Service. Sign in to your Azure Account.
Click on Deploy to Web App.
Select your Subscription. Select your App Service.
Now you should be able to deploy your react app to Azure App Service
I have an existing ASP.Net MVC hosted in IIS that is being extended/replaced using a react SPA which has to sit under the site in IIS in an application.
This has been done as there are many deployed instances of this for multiple clients which cannot be tenanted for business reasons and the existing system is web-forms and due to how its built there is no desire to add the SPA to the project, it was decided that the sub-app would be the easiest way to deploy the new functionality - did not want another MVC project or make the WebApi project serve the static pages due to other client related customizations that have to be accommadated.
The SPA talks to a new WebApi backend which is itself an application under the react application.
To help visulise it looks like this:
Now this all works, the SPA can be loaded from the parent app simply by a normal href and the SPA talks happily to the WebApi backend.
Where I've hit a brick wall is sorting out the IIS Url rewrite rule so that if the user hits F5 in the SPA that IIS will return the SPA index.html and then client side routing (react router v4) will handle rendering the correct components.
The url rewrite rule is defined in the v5 application.
I've followed the advice on questions such as this one and this one and if the react SPA is at the root of the site it works perfectly but as soon as I move to the sub-app all I receive is a 404 response that states the full Url cannot be found e.g. when requesting Url localhost/v5/documents IIS tries to find a v5/documents file/directory which doesn't exist.
To take the existing system out of the equation I've got the site deployed to a new folder where the top level site has no content and the react site is in the v5 application and the webapi in the api folder - again all working.
I've tried several patterns for the match, the current pattern I'm using is .*/v5/?.* which the test pattern functionality in IIS Manager tells me matches the url's I expect e.g. url of localhost/v5/documents should be matched but in practice never is.
I found this link about configuring angular and this Rick Strahl post which touches on creating the rules but with no luck.
The full config I'm using at the moment is
<rewrite>
<rules>
<rule name="Rewrite Text Requests" enabled="true" stopProcessing="true">
<match url=".*/v5/?.*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_URI}" pattern="/api(.*)$" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="{HTTP_HOST}/v5/index.html" logRewrittenUrl="false" />
</rule>
</rules>
</rewrite>
I've also installed Failed Request Tracing but when I look at the logs I don't see the url rewrite being fired for the request which is why it then tries to find the non-existent file/directory.
I've uploaded the Failed Request Tracing log here
I'm using IIS 10.0.15063.0 on windows 10, react site created with create-react-app (I'm testing using a production build not webpackdevserver) and WebApi project is .Net Framework 4.7
I just reproduced you're scenario in the simplest way I could think of.
I created a web site named MySite with two applications /v5 and /v5/api.
I put the following in the web.config for the v5 application, so the web.config was in the root directory of v5
<rewrite>
<rules>
<rule name="Rewrite Text Requests" enabled="true" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_URI}" pattern="^/v5/api(.*)$" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/v5/index.html" logRewrittenUrl="false" />
</rule>
</rules>
</rewrite>
The url for the rule matches everything under the v5 application. The conditions are used to back off if the target is a file, directory, or anything in the api application.
The host name is not needed in the rewrite action.
I have an application using Angular and node.js (running on IIS 7.5) for the UI, and then a .NET Web API for all the endpoint calls.
Angular routing is working as expected, and API routing is working as expected...when running the API through Visual Studio/IIS Express and ng serve to fire up the UI. Of course, they're running on two separate ports.
The goal is to deploy to a single IIS Web Site and, unfortunately, a single Application Pool.
Given the URL of http://www.mycoolapplication.com for the UI and http://www.mycoolapplication.com/api for the API, how to I get Angular to ignore routing for anything matching api and all of api's children?
I'm going through the Routes module, and would love to be able to add something to a path object, but there doesn't appear to be anything to accomplish excluding something from the Angular routing table.
Put this web.config in your frontend app (the folder with index.html). It will handle all requests except api/*.
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="API Rule" stopProcessing="true">
<match url="^(api)(.*)$" />
<action type="None" />
</rule>
<rule name="Angular" 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>
I have an AngularJS SPA application that I have developed using Visual Studio 2015. When I click publish it publishes the index.html and works just fine. However if I am on a page and I click refresh then it tries to do a refresh of the SPA page such as example.com/home/about. This fails as I don't have a home/about page.
Is there some way that I could modify my web.config file (just for local testing) so that it would actually go to the index.html (load that up) and then to the /home/about state?
Here's my current web.config:
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</system.web>
</configuration>
It seems you are using html5mode. In this case there's no # to keep the URL changing from requesting to the server.
With this configuration, you need help from the server. It will serve the index.html when it receives requests from your SPA routes.
This SO answer has details on configuring URL Rewrite on web.config:
Rules go by:
<system.webServer>
<rewrite>
<rules>
<rule name="AngularJS 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>
It assumes your API is under: /api and for any directory or file that it finds, it serves as-is.
Anything else, gets rewritten to / which having default document configured to index.html, will load you SPA.
Also note you need to install the URL Rewrite module for IIS (IIS Express doesn't need the module)
Another option is one of these lightweight HTTP servers npm packages.
John Papa has one: lite-server. It uses BrowserSync under the hood:
BrowserSync does most of what we want in a super fast lightweight
development server. It serves the static content, detects changes,
refreshes the browser, and offers many customizations.
When creating a SPA there are routes that are only known to the
browser. For example, /customer/21 may be a client side route for an
Angular app. If this route is entered manually or linked to directly
as the entry point of the Angular app (aka a deep link) the static
server will receive the request, because Angular is not loaded yet.
The server will not find a match for the route and thus return a 404.
The desired behavior in this case is to return the index.html (or
whatever starting page of the app we have defined). BrowserSync does
not automatically allow for a fallback page. But it does allow for
custom middleware. This is where lite-server steps in.
lite-server is a simple customized wrapper around BrowserSync to make
it easy to serve SPAs.
Hi I have a project built in ASP.NET 5 (dnxcore50 and dnx451). It is serving the requests for my AngularJS scripts. When I built the project I was using the Microsoft beta 5 dependencies and using a rewrite rule to send all the requests to index.html and so my angular routing would work just fine. But today I had to upgrade to the rc1 dependencies and now my rewrite is not working and I'm just getting a 404 on my route. This new libraries added this weird lines of code to my web.config
<handlers>
<add name="httpPlatformHandler" path="*" verb="*" modules="httpPlatformHandler" resourceType="Unspecified" />
</handlers>
<httpPlatform processPath="%DNX_PATH%" arguments="%DNX_ARGS%" forwardWindowsAuthToken="false" startupTimeLimit="3600" />
Is there a way how can I set my routing so that it works with angular for example if I go to localhost/shop it will redirect it to index.html and my angular routing will take over.
I am on similar setup and I have in Configure in Startup.cs,
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseIISPlatformHandler();
and a rewrite rule in system.webServer in web.config, needed that to be able to have both web api and index.html angular app served:
<rewrite>
<rules>
<!--Redirect selected traffic to index -->
<rule name="Index Rule" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_URI}" matchType="Pattern" pattern="^/api/" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
You may need something similar too with your own rules
I think there is a better way than using the url rewrite in the routing setup (So that there is no need for the url rewrite at all). E.g. I did this:
app.UseMvc(routes =>
{
routes.MapRoute(
name: "api",
template: "api/{controller}/{action}");
routes.MapRoute(
name: "angular",
template: "{*url}",
defaults: new {controller = "Home", action = "Index"},
constraints: new {url = new DoesNotContainConstraint(".", "api/") });
});
This ensures that all /api goes to controllers and everything else goes to the Index. I had to do my own DoesNotContainConstraint to ensure that files and api with wrong url are properly handled, but it's rather easy.
If you want to use ASP.NET 5/ASP.NET Core with IIS you need to install HttpPlatformHandler. Here is a nice step by step instruction showing how to install Http Platform Handler, configure IIS and publish an APS.NET Core application to IIS.