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
Related
Really new to web dev. so forgive me if this is a simple issue...
I want to host a React application on Microsoft IIS. This application makes server calls: this is the project I am trying to do https://www.twilio.com/blog/react-app-with-node-js-server-proxy)
What happens when I link the build to IIS is that I'm able to type something in the form, but I'm unable to see a response from the application (the fetch call is being made but is failing and nothing is returned). When I run npm run dev in the project folder the form works as it should, so it appears that the server isn't being hosted(?).
to deploy react application in iis follow below steps:
1)run below command to build the site:
npm run build
the above command creates a build folder inside your application folder.
2)now open iis manager.right-click on the server node and select create new site.
provide site binding detailed and set the folder path of the site to the build folder which is generated by the command.
https://stackoverflow.com/a/60110712/11147346
I am using Google Cloud to deploy my application. I have followed the steps in the documentation for deploying. I deployed early on in my project and it was successful. I then decided to change some files and update some features in my app. For this i followed the documentation for updating a deployment. This update was successful. It had me create the deployment in my Deployment Manager and run the gcloud commands to commence update. When I redeployed with gcloud app deploy, it was successful.
I have since added a couple more lines of code and features in my application. I followed the same documentation for updating a deployment as I had the first time I made an update and it is no longer working for me.
Does anybody have any idea what would be the problem? Again, I was able to successfully deploy, and even update that deployment once by following Google Cloud docs. Now I am having no luck.
Have you been changing the version number? Go to:
https://console.cloud.google.com/appengine/versions?project=< your project name >&serviceId=default
And make sure the version you want is active. Also, you can try:
http://<VERSION>-dot-<SERVICE>-dot-<PROJECT_ID>.<REGION_ID>.r.appspot.com
Example:
https://20200813-dot-myapp.uc.r.appspot.com
if the version number was 20200813 and your appname is myapp and the region is uc
I am new to React. I have created a simple React application. I wanted to explore deployment and hosting options for React. I have worked previously in Angular and it can be deployed in IIS. can we do the same for React. Please enlighten me.
According to your description, I suggest you could follow below steps to host or publish the application to IIS.
1.Open cmd and locate your react application folder
2.Build the project to production folder.
npm run build
3.Open IIS management console and create a new web sites and use the build path as the physical path. for example: D:\ReactAppTest\my-app\build
Notice: You should pay attention to your port number.
4.Then you could use that port number to access your react application. For example: http://localhost:9965/
I have one project with asp.net core server and another project (which one supposed to be nodejs for azure server, but I don't need server part) with my react (cra) app. I want to be able run npm install and npm run build every time before publishing. For now, I solve this problem by using post build action. But this runs only if files is out of date. Changes in folder with my react app is not enough for visual studio to rebuild. So i need to manually run rebuild every time I want to publish changes in my react app. Is there more correct way to publish react app separated from backend, from visual studio to folder on aws?
Follow the same as you were upload any other app is very simple.
https://learn.microsoft.com/en-us/visualstudio/deployment/quickstart-deploy-to-azure?view=vs-2017
You could set up automatic deployment from a Github repo. I have it set up so that everytime I push code to the master-branch on my Github-repo it rebuilds my app and publishes it.
Here's a guide on how to do it: https://blog.github.com/2015-09-15-automating-code-deployment-with-github-and-azure/
If I'm honest, I find this approach to be easier than having to publish manually. Also, all I need is Git.
So I finished the Tour of Heroes tutorial. I understand it and can alter and have fun and what not. Got a git repository from Visual Studio Team Services for the app. Now here is where I'm lost I just want to build web based apps for now. How do I get the app on to my hosting to display as a website. I can't seem to find any tutorials (or once that I can understand) online for this.
If anyone can help with this or point me in the right direction it would be greatly appreciated.
Thank you
You can refer to these articles to deploy angular app (part 1 and part 2).
Simple steps:
Use NPM and gulp build tasks to build and package your app
Deploy package to azure or IIS.
There is IIS Web App Deploy task in IIS Web App Deployment Using WinRM extension, so you can install this extension and deploy packaged app to IIS if you want to deploy app to IIS.
Your hosting provider probably gave you a FTP access to a root directory for your website.
Upload the project over there and make sure there is an index.html file there, that pulls all the relevant JS files into place.