My AngularJS app requires all actions to redirect to index.html for processing and it works fine on localhost, but it doesn't work in Azure.
For example:
localhost:1234 -> localhost:1234/#/ works
myapp.com -> myapp.com/#/ doesn't work
myapp.com/index.html -> myapp.com/index.html#/ works
I added:
<system.webServer xdt:Transform="Replace">
<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>
The weird thing is that this works sometimes. I can't for the life of me figure out why sometimes going to myapp.com -> myapp.com/#/ works and other times it doesn't. It seems to also break myapp.com/index.html#/ but only sometimes. This is without making any deployment changes. It just works about half the time.
Edit
Here is the actual error message:
Microsoft.Owin, Version=2.1.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)
It might be about application startup. Here are some troubleshooting ideas.
Restart your app. Does that reliably cause the error?
Turn on application logging. portal.azure.com > Browse All > The Site Name > Settings > Diagnostic logs > Application Logging > Level Error. If you want lots of stuff, set level to verbose and turn on web server logging, detailed error messages, and failed request tracing.
View diagnostics at service control manager mysite.scm.azurewebsites.net. Choose Debug console > PowerShell. Now you can look through the logs at home/LogFiles.
Based on the error you are receiving, it looks like Owin is the problem. Check your websites bin to see if there are any Owin references. From the online service control manager, you can try this:
cd site/wwwroot/bin
Get-ChildItem -filter *Owin*
If there is anything there, then it's probably the cause of the particular error you are receiving.
Related
How can i host reactjs app in IIS webserver?
I used npm run build and replaced the file into the server and create new site which refers to those file.
also i add the binding all IP to port 80 using * sign.
but not worked.
After we run the below command, the output will create a new folder called “build” inside the project which contains production build. We could host the project by copying these files to the root directory of the IIS website, the website root folder should be able to be accessed properly by the anonymous account, and therefore we should grant IUSR account full access to the folder if it is not the default website.
After adding the web site binding in IIS binding module,
We could access the website properly by using the below address.
http://localhost
Besides, if we adding certain routing features (multiple components) in the react application, we have to install the IIS URL Rewrite extension.
https://www.iis.net/downloads/microsoft/url-rewrite
After a successful installation, we need to create a web.config file containing the below content under the root directory of the IIS website.
<?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>
Feel free to let me know if the problem still exists.
I followed this tutorial to deploy a react app to and Azure WebApp
https://medium.com/#to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321
After I uploaded the Build folder via FTP, when I access the url i get the following message:
"You do not have permission to view this directory or page."
I tried with and without the web.config file.
Log Presented by the App
I then tried adding this to the web.config file but then it just renders a white page with the correct Page Title.
<defaultDocument enabled="true">
<files>
<add value="build/index.html" />
</files>
</defaultDocument>
I assume because it can't access the referenced .js files in the index.html.
I went to deployment options. Configured my local Git Repository.
Configured my local Git. Then inside the build folder ran:
git init
git add .
git commit -m "initial build"
git remote add <azure your-git-clone-url>
git push azure master
And it now runs
I've also followed the tutorial that you've tried.
Sometimes it works and sometimes it doesn't work.
Problem
Even after I've restarted my server, the new static content was not reflected to endpoint. (eg. https://my-endpoint.azurewebsites.net)
Or routing is not updated properly with my web.config.
Environment
Webapp(Node 10.14 + Windows), FileZilla of MacOS
Source Code: React-boilerplate
Solution
Copy and paste all files in build directory into server's webroot directory except web.config
Then, copy and paste web.config
Comment
I don't know why Azure not works as my expectation.
I've made several Azure Web app for deployment. Whenever I've created new Azure web app, some instance is updated with web.config trigger and other instance is updated with index.html trigger. However, depending on my experience, web.config looks final trigger.
If you trouble with some 4xx, 5xx error which is not mentioned in tutorial page from your Web app , just delete web app and create another new one. I also tried to connect DevOps CI/CD pipeline in Azure to Web app. However, after success build and deployment process, my site is not updated and there was no files in directory of server(I checked via FileZilla)
After that, direct FTP deployment not working. The only solution for me was deleting it and creating new Web app.
I spent my 2-3 days due to this issue. If anybody have advice or right guide or right information about Azure's internal logic for my case, please comment it for saving my few weeks in future.
Web.config
Below is mine from the tutorial
<?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 have the following rule
<rule name="SEO" enabled="true" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAny">
<add input="{HTTP_USER_AGENT}" pattern="(facebookexternalhit)|(facebook)|(Twitterbot)|(Pinterest)" />
<add input="{QUERY_STRING}" pattern=".*escaped_fragment_=(.*)" />
</conditions>
<action type="Rewrite" url="http://localhost:8004/{URL}" />
</rule>
of my angularJS app hosted on the IIS (Windows Server 2012).
My app uses the html5Mode
$locationProvider.html5Mode().enabled = true;
and the port 8004 is opened (I turned off Windows firewall for a while to check if my scenario works)
The scenrio is easy. When someone wants to share my AngularJS page via facebook, the request will be redirected the the port, whene the PhantomJS is listening on (to render the page)
But the problem is I can only see the 404 error in the share box, and no request is fetched by the phantomJS script (I don't see anything in the console window)
var system = require('system');
var server = require('webserver').create();
server.listen(port, function (request, response) {
console.log(JSON.stringify(request, null, 4));
});
so it looks like the rewrite rule doesn't work (that's my guess). If I just go to the http://localhost:8004/, I can see the rendered page and the phantomJS log in the console window (so it works)
If you are trying to rewrite requests to different IIS website (or different app), then before that you need to install ARR:
1) You need to install ARR module https://www.iis.net/downloads/microsoft/application-request-routing
2) In IIS manager you should enable reverse proxy
2.1) On server node click "Application Request Routing Cache"
2.2) Click "Server proxy settings" and click "Enable proxy", then "Apply"
Also you need to apply small fix in your rule:
<rule name="SEO" enabled="true" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAny">
<add input="{HTTP_USER_AGENT}" pattern="(facebookexternalhit)|(facebook)|(Twitterbot)|(Pinterest)" />
<add input="{QUERY_STRING}" pattern=".*escaped_fragment_=(.*)" />
</conditions>
<action type="Rewrite" url="http://localhost:8004{URL}" />
</rule>
URL not redirecting to Prerender.io when sharing the url from facebook.
My site is http://www.vbuy.in/ , which is in demo and I am trying to share one of the url in facebook for example "http://www.vbuy.in/product/samsung-galaxy-grand-2-black-/1975"
Title and Description are showing from the home page (I added all those supported ng-content, and in script i registed the viewtitle etc..
I wrote a URL rewrite and also tested in https://developers.facebook.com/tools/debug/og/object/.
But, for me it looks like its not redirecting to prerender.io url. What Am I missing here? . I use IIS and also downloaded ARR and enabled proxy there.
I am having tough times for the last one week with SEO & social sharing part. Even before starting the project we were aware of SEO issues in angular js, but we thought when we go
live, we can use prerender or any pre render static html support. ( we didnt evaluated in depth earlier, due to time & resource constraints)
My code .. (Which is copied from other Stack overflow solutions.
<httpProtocol>
<customHeaders>
<add name="X-Prerender-Token" value="XXXXX....." />
</customHeaders>
</httpProtocol>
<rewrite>
<rules>
<rule name="Prerender" stopProcessing="true">
<match url="^(?!.*?(\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent))(.*)" ignoreCase="false" />
<conditions logicalGrouping="MatchAny">
<add input="{HTTP_USER_AGENT}" pattern="googlebot|baiduspider|facebookexternalhit|twitterbot" />
<add input="{QUERY_STRING}" pattern="_escaped_fragment_" ignoreCase="false" />
</conditions>
<action type="Rewrite" url="http://service.prerender.io/http://www.vbuy.in/{R:1}" />
</rule>
I am finishing up a new mobile website to compliment the desktop version. Currently I have a rewrite rule in the web.config file on my desktop site that looks like so:
<system.webServer>
<rewrite>
<rules>
<rule name="MobileRedirect" patternSyntax="ECMAScript" stopProcessing="true">
<match url=".*" ignoreCase="true" />
<conditions logicalGrouping="MatchAll">
<add input="{HTTP_COOKIE}" pattern="nomobile" ignoreCase="true" negate="true" />
<add input="{HTTP_USER_AGENT}" pattern="android|blackberry|googlebot-mobile|iemobile|iphone|ipod|opera mobile|palmos|webos" />
</conditions>
<action type="Redirect" url="http://m.mysite.com" appendQueryString="false" redirectType="Found" />
</rule>
</rules>
</rewrite>
This works perfect if I never want the user to be able to use the desktop site while on a mobile device, but that is not always the case. Some links on the mobile site DO link back into the desktop version. I have a link on the footer of the mobile site to "view full site" as well.
So my question IS: how to properly handle cookie setting on that link and then detecting in the web.config and NOT redirecting to the mobile version IF it exists.... I have a conditional check in the web.config for http_cookie "nomobile", but I don't think it is properly working. Do I just send in a querystring value from the mobile and check that in the global.asax file or does that not work because the web.config runs first?
The desktop is a C# MVC4 site on IIS 7.5 if any of that helps, and the mobile site is a simply jquery mobile site.
Thank you!
EDIT:
I have tried checking the querystring in the global.asax file (code below) but it seems that "Request is not available in this context".
// create and set cookie if ?nomobile detected
string forcedesktop = HttpContext.Current.Request["nomobile"];
if(forcedesktop != null){
HttpCookie nomobile = new HttpCookie("nomobile");
Request.Cookies.Add(nomobile);
}
}