I'm trying to upload my website onto the web. I have two folders for holding my front-end React files and another for the back-end files that uses Nodejs, cors, and express. It also has my API and middleware.
The front-end pages have already been uploaded onto my IIS and port forwarded with my router, so I can access that anywhere with my IP. But it doesn't function well without my backend files, how can I host the backend files as well and make them work together?
I am getting a headache doing this, does anyone know how to do this??
Thanks in advance.
As far as I know, if you want to host node.js application, you should firstly install the node.exe and the a build of iisnode.
node.exe
iisnode
After installed the IIS nodes, you could set up samples, from the administrative command prompt call %programfiles%\iisnode\setupsamples.bat.
Then you could go to http://localhost/node to see the example.
The next step is to deploy the node.js application inside one iis web application.
Lastly, you should create or modify the web.config to use the iisnode modules.
For example,
<configuration>
<system.webServer>
<handlers>
<add name="iisnode" path="app.js" verb="*" modules="iisnode" />
</handlers>
<rewrite>
<rules>
<rule name="mysite">
<match url="/*" />
<action type="Rewrite" url="app.js" />
</rule>
</rules>
</rewrite>
<defaultDocument>
<files>
<add value="app.js" />
</files>
</defaultDocument>
</system.webServer>
More details, you could refer to below article:
https://www.hanselman.com/blog/InstallingAndRunningNodejsApplicationsWithinIISOnWindowsAreYouMad.aspx
Related
I have a web app based on .net core v2.1 with a React.js front-end, which I'm trying to host on IIS 10. The app runs fine via Visual Studio (2017), however when I publish the app and host via IIS, I get the following error:
Error image
HTTP Error 500.19 - Internal Server Error
The requested page cannot be accessed because the related configuration data for the page is invalid.
Error Code 0x8007000d
The web.config file was generated during the publish; I have not modified it:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<location path="." inheritInChildApplications="false">
<system.webServer>
<handlers>
<add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified" />
</handlers>
<aspNetCore processPath="dotnet" arguments=".\SkillsMatrix.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" />
</system.webServer>
</location>
</configuration>
<!--ProjectGuid: ea8a300c-5bb6-4a29-a8d2-d13dddbbac1d-->
This same error happens if I start a brand new project via VS, do not add any code, and publish it to IIS...
I have tried:
Giving access to the folder/file to the IIS_IUSRS user group
Removing app.UseHttpsRedirection(); in StartUp.cs
Does anyone have any suggestions for how I can clear this error and host my app?
You could try the below steps to resolve the issue:
1)Make sure you download and install the .net core hosting bundle and runtime.
https://dotnet.microsoft.com/download/dotnet-core/3.1
2)Make sure that the Application Pool > Process Model > Identity is set to ApplicationPoolIdentity or your custom identity has the correct permissions to access the application's deployment folder.
3)Set the application pool set the .NET CLR version to No Managed Code:
4)Confirm that you have enabled the proper server role. See IIS Configuration.
you could the below link for more detail:
https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/iis/?view=aspnetcore-3.1
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 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
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 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);
}
}