I'm trying to create an app with a react frontend and make calls to a web api in Visual Studio 2019. I had originally created the API in it's own project and the react front end in it's own project but when I try to test it locally I get an error that it can't find the web address of the API. The examples I see on here as well as on other sites have the controllers and logic in the same project. My question is which is the correct way to design this?
No they don't have to be in the same project. if the API project is running on you rlocal machine then you can send request to http://localhost:PORT/api-path
Related
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
Traditionally I've built web apps with a React/Typescript front-end and a Python back-end. But I'm experimenting with using ExpressJS/Typescript on the back-end. So far it's working really well.
Today I built a little helper function to test if a string was a valid email address. I actually want to use this function on both the front-end and back-end.
Is it possible to have a "common" module of sorts that both the front-end project and back-end project could call? My team at work does this with Python microservices calling such common functions and types so I'm wondering if this is possible with such an all Typescript application?
this is a very simple question to which I am not able to find a simple answer: how can I implement log4js to run in a react app?
I have tried to install the npm package https://www.npmjs.com/package/log4js
But this one seems to be made to run in a node application, and not a react application. the documentation is very scarce about how to use log4js in a react app. I can't find anything to help me.
log4j is a backend service,it's used to log events that happen on the backend, you can use it with a backend framework that would be the api and database of your application.
react is a frontend framework, you can use a client side logger library such as
https://github.com/pimterry/loglevel to log your errors in development.
if you want to keep getting logs in production (after you deploy your website)
use this plugin to send logs to your server
https://github.com/kutuluk/loglevel-plugin-remote
My project contains two apps. Backend – springboot and a frontend - React.
I am using the spring-boot app only as a rest API to fetch data from the database. The React app frontend will call the API. Up until now, we were using only one environment (Windows) so production build was one jar that actually contains both apps and a tomcat. That was quite simple so by adding a proxy in the package.json file to point to the backend and some maven(frontend-maven-plugin) plugin the building process is simple.
Now we need to change the system architecture so each app will be hosts on a different windows machine.
I was trying to use express to host the react app but I am struggling with the proxy setup for the backend (spring) app from the express server. All the tutorials that I found actually using the express server as the backend API but I need the express server only for hosting the production build.
Is there a good tutorial that shows how to set up this type of architecture in production env.
Thank you