I created a new react app and also a new project on Visual Studio: .NET Framework Web Application, under my Azure subscription.
What should be the process so when I run the Web Application locally, I will see the new react app and not the ASP.NET screen ?
I deployed the new react app to azure so when I run the website I do see the new react app, however when I run it from the .sln file, I get this screen:
Thanks in advance!
I think the step you missed is to update the Index view which is used to generate the website root to include the bootstrapping of the React app. It should be located at Views/Home/Index.cshtml or Pages/Index.cshtml, depending on the template you used when you created the project.
As a side note, I would consider dropping the ASP.Net project entirely and just use VS Code for the React app, through there you can easily deploy your app to an Azure Storage Account using the new Static website hosting in Azure Storage, thus removing the need for an ASP.Net website.
Hope it helps!
Related
I have created a website using react and firebase and hoisted on firebase. After making changes I want them to be visible on my website. What is the process for the same so that the website is not deployed on a different link ?
Most likely you deployed the web site to Firebase Hosting by running some variant of:
firebase deploy
To update it you can simply run the same command again.
How to publish ASP.NET 6 Web API with React Project to IIS
I followed this MS tutorial for creating an ASP.NET Core project with a React front-end - https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022. I choose the option to create my client app in a separate project outside of the ASP.NET core project.
I am trying to publish my project to a local IIS server but I’m running into a few snags.
I’ve followed the instructions in the Publish the project section of the same guide. When I follow those steps, my web api project and dependencies are deployed to the root of my IIS project folder, and the react web files are placed in a wwwroot directory within my IIS project folder. If I navigate to the site, I get a can’t reach this page.
I was under the impression that my single asp.net app could host both the react web files as well as my web API. If I should be deploying the react app and the web API to separate sites within IIS, what is the most effective way to update all my API paths in react once deployed? Right now all my web api calls are relative links “/api/resourcesA”. Finding this all a bit confusing as someone coming from Razor Pages and MVC.
From what I gather I will also need to update the “homepage” property in package.json to my site’s URL, and I will also need to install and configure a URL rewriter as I am using react-router. However, I feel like I am getting stuck before getting to these steps. Any advice/direction appreciated.
I refer to the document(https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022) on my side and I am able to reproduce the said issue.
It might create confusion as its combines the React project and .Net Core API in the single folder while publishing it.
You could refer to the steps below may help to fix the issue.
I assume that your project is running successfully from the VisualStudio and showing the data.
Go to Program.cs file and add these 2 lines.
app.MapFallbackToFile("index.html");
app.UseStaticFiles();
It should look like below.
For simplicity, try to publish it to Folder.
While creating the site in the IIS, set physical path like below.
While setting physical path, Select the site folder(don't select the wwwroot folder in it).
Visit the site in the browser.
We currently have a reactjs front end app that runs on its own and is deployed to an azure app service on one sub domain, and a back end app, the api, an asp.net core app that is deployed to another app service on its own subdomain. Both have authentication managed by a third app, that uses identity server to authenticate requests to either the front or backend, that also is its own app service in azure. We'd like to combine the front-end and back-end. Is it possible for them to run together if we create a wwwroot folder in the api project and move the react app into there, and then modify the api project to serve static files? How does that impact the auth server usage in the mix? I assume that means we'd need to move to take advantage of duende bff then. Is this common? We'd like to do this in an effort to stop jwt token usage, because having the front end and back end in the same project/app would mean they are the same domain and we could authenticate with the auth server and get a samesite browser cookie for auth instead of the front end directly going to the auth server to get a token and store it in browser storage.
Microsoft Visual Studio already has a project template that uses ReactJS(for front-end) and C#.Net Core(for back-end).
You should have used this template while making this project solution in the first place.
As your ReactJS and .Net Core projects already exist, it will be difficult to combine them.
I am not sure whether it will work successfully but while checking the project structure. I noticed that the React app was placed in the Client App folder in the .Net Core project.
If it doesn't work then you could use the template from the Visual Studio project and try to move your code into that project.
Below are some helpful references:
Use React with ASP.NET Core
Integrate Create React app with .NET Core 5
Single project that contain React plus ASP.NET Core MVC Application
What all options we have to deploy react web application to Azure?
Few options which I have already explored are: Azure web app, Container instance, Azure blob storage as static website.
What all other options we have to deploy the react web app to Azure? What option is better for react app (With regards to Availability, cost, maintenance)?
Also, To run react app, all we need is artifacts (like js, css, images etc.) which we can get by running simply build command so do we really need server to execute the code? can we not directly host it to some storage and then browsing it?
I have been working on this app on my localhost, which has Flask as the backend (localhost:5000) and React as the front end (localhost:3000), and they have been communicating well. Now I am supposed to put it up online so that other ppl can see it as well - I didn't have much experience in Azure, but how can I deploy these two components(React&Flask) into one URL on Azure web app service? (Before I had some experience in using FTP to upload the 'build' folder to a "site/wwwroot" folder to put up a simple React app without any backend)
Newest
After testing, the python project is deployed in the webapp, the react project is deployed in the virtual application, and the normal node project is also deployed in the virtual application.
Deploy the flask python project to the windows environment, the normal deployment method will fail, please be sure to follow this blog document (third-party document) to operate, it works for me.
Running Flask app with HttpPlatformHandler in Azure App Services
The effect is shown in the figure. You can see that the normal node project can be accessed normally, but the react project is not. I think there are some bugs. (Has raised a support ticket to confirm)
The deployment method of virtual application is recommended to adopt the publishing method shown in the figure below.
Privious
It is recommended to choose windows when creating azure web app, because windows supports virtual application.
We can deploy flask app normally and deploy react app in virtual app.
Under normal circumstances, the process.env.port of the two webapps is the same and will not interfere with each other because of the virtual path.
Reference post:
1. Vue Frontend and Express backend on same Azure web app Service
2. Azure Front Door Is Not Maintaining Custom Domain in Browser