I've got a web app with asp.net Core 2.0 and ReactJS.
If I publish the app in Azure in a Production environment everything goes right.
But when I try to change it to Development (adding on the Application Settings the key ASPNETCORE_ENVIRONMENT with value Development) the app crashes at the startup.
More exactly on the Configure method trying to do this:
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true,
ReactHotModuleReplacement = true
});
}
And it throws an error like this:
An error occurred while starting the application.
AggregateException: One or more errors occurred. (Attempt to connect to Node timed out after 60000ms.
)
System.Threading.Tasks.Task.GetResultCore(bool waitCompletionNotification)
NodeInvocationException: Attempt to connect to Node timed out after 60000ms.
Microsoft.AspNetCore.NodeServices.HostingModels.OutOfProcessNodeInstance+d__13.MoveNext()
I tried to publish it locally but is the same that in Azure.
Any one could help me to configure it correctly?
Thank you.
We host our site in Azure as well and the solution for me was to add this config key/value to the Application settings.
Key: WEBSITE_NODE_DEFAULT_VERSION
Value: 6.9.1
I suppose you could also add it to your appsetting.json or web.config as well.
ok after a long struggle I have found a way to overcome this issue.
First set the app settings in Azure WebApp Settings - WEBSITE_NODE_DEFAULT_VERSION with the latest version. In my case I have used the node version 8.9.4 matching my dev machine environment.
The Azure deploy task in VSTS has got a feature to run a script post deployment where we can run "npm i -g" which will pick the package.json file from the wwwroot folder.
Try this and update here.
Related
Created a new app in VS2022 from tamplate:
Everything runs fine locally and I get the Json payload successfully (fetch-data).
However, when deployed to Azure it does not. It looks as if routing does not work for some reason.
I've tried different suggestions here:
React JS App Routing Issue Only After Deploying to Azure Web App
React routing not working in Azure website
https://social.msdn.microsoft.com/Forums/en-US/836324ff-2893-4eca-828d-0ac47f8fc5bf/azure-web-app-service-react-routing-amp-deploy-problem?forum=windowsazurewebsitespreview
Azure Configuration: Tried nesting wwwroot, that didn't work either:
Error:
Please help
I have followed the steps you provided, and the demo application works well in my side. And I think your app service is normal, the issue should be related to publish file.
Test Environment
Microsoft Visual Studio Enterprise 2022 (64-bit) - Current Version 17.2.4
PM> node -v
v16.15.0
PM> npm -v
8.13.2
I know it works well in your local now, and please follow my suggestion to try 😁.
Troubleshooting Steps:
⚠️Upgrade your visual studio 2022 to the latest version, and also update npm and node.
Please create a new azure app service(.Net6 LTS), you can delete it later. We don't need do any setting in this app.
Create a sample project in VS2022, and test it in local, make sure it works well.
The above steps ensure that the VS environment is up-to-date and the app environment is initial.
Publish this demo project
Check the kusu site. url like: https://app_name.scm.azurewebsites.net
Check the publish files. My demo create by template, have contain 1 wwwroot folder and 9 files.
If you still want to figure out what's wrong with the current app, see the introduction below.
Delete all the settings, make app service is clean. It means you can access the site like your second pic contains loading....
Find the web.config file and change stdoutLogEnabled to true.
Back to the azure portal and enable detailed error messages.
Restart the app and back to kudu site, and remember to refresh kudu site.
Looks like I was using an old template that came with VS2022. I updated my VS version, created a new project from template and noticed this line was added in Startup.cs (in this new template):
endpoints.MapFallbackToFile("index.html");
and also this:
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
Now my app works in Azure as well. Thank you
I have just deployed my .net core and react project on Azure using web deploy and published using Windows instead of Linux. I seem to be getting a HTTP Error 500.30 here are the error logs below, I have used the pre configured identity server 4 when making the application but I assume the error has something to do with this, anyone know of a fix for this?
Error log
Error log 2
I'll assume that this app works in your development environment, so I think this is a configuration error.
ASP.NET Core have 3 default environments: development, staging and production; and you have differents appsettings for each of them (appsettings.json wich is the base, appsettings.Development.json, appsettings.Stating.json and appsettings.Production.json).
My theory is you have the configuration related to IdentityServer only in appsettings.Development.json, so this is not beign loaded in production environment.
Include the configuration in appsettings.json or appsettings.Production.json an check it out.
If you're deploying the app to Azure AppService you could include the config in the AppSettings section.
Check more about config and enviroments:
https://learn.microsoft.com/en-us/aspnet/core/fundamentals/configuration/?view=aspnetcore-3.1
I've solved the problem it did have something to do with my appsettings.json where i needed to include "Key": {
"Type": "Development"
},
I am currently trying to deploy the default react web app to Azure and I am encountering an issue where though I deploy the contents of my build folder to the azure hosted /site/wwwroot folder I end up on the following page when going to my hosted address: https://[project_name].azurewebsites.net/
Landing Page :
I intend to deploy the default create-react-app react application so that I may have the process down for when I deploy my real site.
The process I have followed is pretty much exactly what is mentioned in this article https://medium.com/#to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321
Create the default React App with create-react-app
Run "npm run build" to get the build folder
Go into the Azure React Portal and create a new Web App ***
FTP / Git deploy the contents of the local build folder into the Azure website's /site/wwwroot/ folder
For overkill I added the below web.config file to handle future routes, but have also tried without this step
In the end my Azure site's contents look like this
Folder contents :
At this point when I try to access the Azure site I get the "Hey, Node developers!" page which implies my code is not deployed. Any thoughts as to why this might be the case?
*** I have a hunch that during the configuring of the Azure Web Api something is not set up correctly perhaps because I select Node 10.14 as my Runtime stack simply because that is the version of Node that I have installed and am using with my local React app.
Thank you folks for your time.
Another approach is to configure Azure Linux Web App Service to run a startup command to serve your React app in "Settings > General settings > Startup Command":
pm2 serve /home/site/wwwroot/ --no-daemon
Remember to change the path to your build path (The path to your index.html file).
If you use react-router and wants to make any direct access on custom routes be handled by index.html you need to add --spa option on the same command.
pm2 serve /home/site/wwwroot/ --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
You have created a Linux App Service - your web.config won't work because there is no IIS.
If you don't select node as the runtime stack, your app will work for the most part because it serves the files like a static web host. However I would suggest to keep the runtime stack as node and add the following file to your deployment in the wwwroot folder:
ecosystem.config.js
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
https://burkeknowswords.com/this-is-how-to-easily-deploy-a-static-site-to-azure-96c77f0301ff
There's an extremely simple way to overcome this problem, and although it is not perfect, it works both on AWS, Microsoft Azure, and probably any other hosting:
Just point the error document to: index.html
I found it out here:
https://stackoverflow.com/a/52343542/3231884
Disclaimer: This solution is not perfect and impacts SEO. Google doesn't rank well sites that throw 404s.
I have a nextjs react website running fine locally, after I ran 'next build' I got a .next file. I tried uploading the contents to azure app services but when I visit the URL I get an error that I don't have permission to view this page.
From googling the issue I've found that I need to install something on the azure app service: https://github.com/MRCollective/nextjs-server-azuresiteextension - "Install the nextjs-server site extension (either via the Portal or programmatically via ARM)" but I don't understand what that means or where I can find it (extensions in portal and site extensions does not have nextjs-server)
I have developed a very simple demo Todo List app (Express + React), according to Brad Traversy's YT tutorial and successfully deployed this app to Heroku, where it is up and running. However, when I deployed the same exact code to IBM Cloud, I only got a blank screen with a sentence Invalid Host header.
Some more context:
I've used create-react-app in the root of my project
There is a proxy between the server and the React client
I'm deploying a production version that serves the static files:
// Serve static assets if in production
if (process.env.NODE_ENV === 'production') {
app.use(express.static('client/build'))
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'))
})
}
Build and Deploy phases in my Deployment Pipeline in IBM Cloud pass with no problem
I have googled and tried to solve this using the approach the official create-react-app docs suggest:
HOST=mypublicdevhost.com
DANGEROUSLY_DISABLE_HOST_CHECK=true
Some people asked a similar question on Stack Overflow, too:
Invalid Host header when running Create React App on localhost subdomain
"Invalid Host Header" in When running React App
How do I fix an Invalid Host Header error when deploying my react app to Heroku?
None of the answers helped, however.
I've come to a conclusion that it is an IBM Cloud-specific issue. Does anyone know the possible cause of this? Are there any limitations IBM Cloud has that prevents my app from loading correctly?
Any help will be appreciated.
EDIT:
The script for the Build phase:
export PATH=/opt/IBM/node-v6.7.0/bin:$PATH
npm install
npm run build
The script for the Deploy phase:
cf push "${CF_APP}"
A working solution is to use http-proxy-middleware to manually set up the proxy. Please see an explanation here: deploying create-react-app to heroku with express backend returns invalid host header in browser
Here is a minimal working example: https://github.com/sehailey/proxytest
and here is that example deployed: https://proxytest2.herokuapp.com/
If you are in production mode and have a domain, make a file in your root client directory named .env.production. Inside this file write this
HOST=yourdomain.com
No need to write any code, this is the right way to get rid of this error.
Docs