I have an simple react app with some links and a landing page with a video background.
I have run an npm build to create the build folder for my web app which I have deployed on Azure. Everything works except my video background doesnt show up. My other images and icons do.
Im getting an error where the resources manifest.json and my static folder cant be found. I have checked in Azure to see if those files exists, and they do.
Here is my web.config. `
https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->
<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
<action type="Rewrite" url="public{PATH_INFO}"/>
</rule>
<!-- All other URLs are mapped to the node.js site entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="server.js"/>
</rule>
</rules>
</rewrite>
<!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough" />
<!--
You can control how Node is hosted within IIS using the following options:
* watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
* node_env: will be propagated to node as NODE_ENV environment variable
* debuggingEnabled - controls whether the built-in debugger is enabled
See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
-->
<!--<iisnode watchedFiles="web.config;*.js"/>-->
<staticContent>
<remove fileExtension=".mp4" />
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
<remove fileExtension=".json" />
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
`
Im sorry if my explenation is bad, im new to azure
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 have the following in my web.config
<configuration>
<system.webServer>
<httpErrors errorMode="Detailed" />
<rewrite>
<rules>
<rule name="Angular" 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>
<rule name="Redirect to www" stopProcessing="true">
<match url="(.*)" />
<conditions trackAllCaptures="false">
<add input="{HTTP_HOST}" pattern="^mydomain.com$" />
</conditions>
<action type="Redirect"
url="{MapProtocol:{HTTPS}}://www.mydomain.com/{R:1}" />
</rule>
</rules>
<rewriteMaps>
<rewriteMap name="MapProtocol">
<add key="on" value="https" />
<add key="off" value="http" />
</rewriteMap>
</rewriteMaps>
</rewrite>
</system.webServer>
</configuration>
I have the following in my assets in my angular.json
"assets": [
"src/favicon.ico",
"src/assets",
"src/web.config"
],
But my app does not redirect.
The issues is i have a App Service managed cert setup for www.mydomain.com
I have two custom domains setup
www.mydomain.com (this one allows me to add the binding to the app service cert)
mydomain.com (is unbound as I cant add a cert)
So I thought I could fix it with the redirect to always go to www. but it does not seem to work
UPDATE
You can RewriterConfig to set url rewrite function in web.config file. More details you can see my answer in anothor post .
PRIVIOUS
The Web Server integrated by App Service cannot have full control, which is one of the attributes of PaaS products.
App Service can only use some functions of IIS. It needs to be configured in the web.config file under /site/wwwroot (that is, the root directory of the project you develop).
All available IIS functions can only be configured through the web.config file.
solution:
• Try to add redirect rule in the web config file. If it fails, you can only use the rewrite feature of the application gateway.
• The following are some documents of Application Gateway about rewrite feature for your reference.
Redirection
Redirect web traffic
Troubleshoot--App service issues
I'm new to reactjs and currently facing some issue on IIS deployment for react app.
i execute npm run build and it generate a build folder, i then copy this folder to my IIS.
When i browse the page, im able to view blank page but when i navigate to test route it shows 404.
I've try to add "homepage":"/" or "homepage":"." in my package.json but still the same.
index.html
This is my build structure
Any help is appreciated.
Whenever you deploy a react page to production you will be facing this problem. Please refer to this page: https://inthetechpit.com/2019/06/13/handle-client-side-routes-with-iis-on-page-refresh-react-app/
The issue happens in the server (not IIS only, but all of them). You will be required to install an extension and then, to add a config file to the path of your front end build directory.
The extension to install is here: https://www.iis.net/downloads/microsoft/url-rewrite
the content of the web.config file that should be placed on the front end build directory goes as follows:
<?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>
you can create web.config file in public folder and paste below content in it and then
execute npm run build again:
<?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>
To deploy react js app in iis you could follow the below steps:
1)make sure you enabled below iis feature:
asp.net latest version
static content
directory browsing
2)open command prompt as administrator.enter to the react app folder then run below command:
npm run build
which create a build folder in your app folder.
3)open iis then select add site and add folder path build folder and site binding detail:
now, browse your site.
note: make sure you assign the iis_iusrs and iusr permission to the site folder.
I am using react-router and have put it in it, but I noticed that when I start at the landing page and go through all my routes it works. If I just type in a path url I get a 404.
Am I guessing this has something to do with the server not knowing how to pass it off to my client routes?
I found this post but I am a bit confused with the answers as some say to update the web.config file but I don't have one as it is a Reactjs only.
Edit
Here is what I have now for my rewrite
I am now getting a white page when I try to navigate to a URL that is not the index page.
When I look at my console. I see
Uncaught SyntaxError: Unexpected token <
which goes to main.js and complains about this "<!DOCTYPE html>" it almost seems as my index.html was merged into the javascript file.
The key to getting React-Router to work with IIS is to setup URL Rewrite rules. After looking at how some others have setup AngularJS SPA apps with IIS, I have come up with the following solution.
Download and install URL Rewrite on your server (development and production)
Setup rule to catch any url routes that ARE NOT files and ARE NOT directories. Optionally, you can negate any actual directories that you want serve regularly. More info can be found here on Microsoft's Documentation
<?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" />
<add input="{REQUEST_URI}" pattern="^/(docs)" negate="true" />
</conditions>
<action type="Rewrite" url="index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
In your base html page (index.html) add a tag with a href attribute to your app.
<base href='/path/to/my/app'/>
To expand a little bit you do need the URL rewrite package as Mohit explained but you don't need to write your own web.config file, you can do it straight from IIS Manager if you want.
Once you have URL Rewrite installed, you may have to reboot or restart IIS, you should see it on the dashboard for the sites. I do it at the site level and not the server level.
In there you are going to add a rule.
It must Match the pattern for the request URL using regular expressions with the pattern .*
This will match all urls sent by the browser.
In the conditions you will need two conditions that must Match All. There are two inputs you need:
{REQUEST_FILENAME} is Not a File
{REQUEST_FILENAME} is NOT a Directory
No pattern is needed on these.
Finally in the Action section you need to Rewrite with the rewrite url to be / appending the query string. This will keep everything being sent to react-router and not absorbed by the server.
At this point you might want to stop processing more rules unless you have other unrelated business logic that also needs to run.
This will configure IIS to send all requests to the root of the site which should be one of the default documents as setup in IIS, most likely index.html. From there React-router will pick it up.
Some remarks to Mohit Tilwani answer
say your url is
http://localhost/mySubDir
in web.config add rules to prevent rewrite of js, css files:
<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" />
<add input="{REQUEST_URI}" pattern="^/(docs)" negate="true" />
<add input="{URL}" negate="true" pattern="\.js$" />
<add input="{URL}" negate="true" pattern="\.css$" />
</conditions>
<action type="Rewrite" url="index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
in index.html
<base href="%PUBLIC_URL%/" />
in package.json add the line:
"homepage": "http://localhost/mySubDir",
in index.js you add the subDir part
const baseUrl = '/mySubDir/';
const rootElement = document.getElementById('root');
ReactDOM.render(
<BrowserRouter basename={baseUrl}>
<App />
</BrowserRouter>
</ThemeProvider>
</Suspense>
</StoreContext.Provider>
,
rootElement);
I have this web.config file into some of my PROD pages using Plesk as a Host. I've manually added this web.config to the React page root folder, hopefully, this might work with any IIS Server:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.web>
<compilation defaultLanguage="c#" />
</system.web>
<system.webServer>
<httpErrors errorMode="Custom" existingResponse="Replace">
<remove statusCode="404" subStatusCode="-1" />
<error statusCode="404" path="/" responseMode="ExecuteURL" />
</httpErrors>
<tracing>
<traceFailedRequests>
<add path="*">
<traceAreas>
<add provider="ASP" areas="" verbosity="Verbose" />
<add provider="ASPNET" areas="AppServices,Infrastructure,Module,Page" verbosity="Verbose" />
<add provider="ISAPI Extension" areas="" verbosity="Verbose" />
<add provider="WWW Server" areas="Authentication,Cache,CGI,Compression,FastCGI,Filter,Module,RequestNotifications,RequestRouting,Rewrite,Security,StaticFile,WebSocket" verbosity="Verbose" />
</traceAreas>
<failureDefinitions statusCodes="500" />
</add>
</traceFailedRequests>
</tracing>
</system.webServer>
</configuration>
After updating the web.config, I had a different issue when refreshing the page it was lead to a blank page with a console error as
here
Able to resolve the issue by adding the below tag to the Head section of index.html
<base href="https://mydomain/" target="_blank">
I have tried almost everything I found, I understand most of the examples show to set it up with a new app created with expressjs, but I haven't found anything specific for IIS.
We do have a token.
<!-- prerender token -->
<httpProtocol>
<customHeaders>
<add name="X-Prerender-Token" value="mytoken" />
</customHeaders>
</httpProtocol>
<!-- end prerender token -->
<!-- prerender.IO rule -->
<rule name="Seo rewrite rule" 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" />
<serverVariables>
<set name="HTTP_X_PRERENDER_TOKEN" value="mytoken" />
</serverVariables>
<conditions>
<add input="{QUERY_STRING}" pattern="(.*)_escaped_fragment_(.*)" ignoreCase="false" />
</conditions>
<action type="Rewrite" url="http://service.prerender.io/https://{HTTP_HOST}{REQUEST_URI}" appendQueryString="false" />
</rule>
<!-- end prerender.OI rule -->
I added this code line in app.js
$locationProvider.hashPrefix('!')
also the meta tag
<meta name="fragment" content="!">
I can see it prerendered with the local server
http://localhost:3000/https://example.com/?_escaped_fragment_=/blog/This-is-great
It's my understanding that if everything is correctly configured I should see the same result if I search for https://example.com/?_escaped_fragment_=/blog/This-is-great directly in the google search.
I appreciate any help you can provide me on this issue.