❔ How should I correctly interact .NET Core App with client-side app?
Hello guys. I'm trying to resolve some issue and would like you to explain me how some things work. I created Vue2 app. I also created .NET Core app which serves as my backend. Now I want both apps to interact with each other. I know that they need to communicate through API. However, I have more technical questions regarding how technically this should be done (I developed Vue app but I think the pattern works for Angular, React and other frameworks):
1. Does my backend need any API proxy/API gateway to make calls through
axios from Vue? So the question is if axios should communicate to API gateway or directly to services endpoints (every single API service)?
2. Should I need to use other tools e.g. NSwag to auto-generate code which interact with backend API? Is NSwag code a kind of API Gateway in this case?29 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Sure, I can use
fetch as well. But I also need to know if I need to create API Gateway/Proxy on backend-side? Is it necessary? I'm wondering if I need to make calls from Vue to API Gateway or directly to API location (w/o any gateways)?Is your .NET Core app actually an ASP.NET app? ie, is it a web application?
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
I have several .Net Core projects under one solution: a few libraries projects and API project with controllers. And I need to communicate with this API project
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Could you please give me a real example of using API Gateway? Because If I get it correctly API Gateway is a single entry point for many API services which facilitates communication with them (requests/responses). In my case I have one API project which references to other projects (namely libraries, like Core, Infrastructure, Application, Persistence etc., I created app in CleanArchitecture). If I have just one API project which exposes endpoints then it makes sense at all to make API Gateway? If I had 8 API projects then it would make sense?
You do not need an API gateway in that case.
A single API backend with a single FE application is a very common architecture for web apps, especially smaller ones. You can worry about scaling later.
So I need to use API Gateway in case of many API projects?
Potentially.
But why would you have multiple API projects for a single FE project?
an API gateway is just an API that calls other apis, more or less
so that your end-user application can route all its requests to a single place
Ok, now I understand. I should use, more or less, API Gateway if I have mnay API projects. Then API Gateways is a single entry point which serves all apis
pretty much.
Ok, thank you for clarification
When it comes to my second question - what's the benefit ofusing
NSwag if I could simply make call to API location from Vue/React.. (using axios or fetch)?Swagger/openapi is just a nice way to document your API, but its hardly mandatory or required.
it helps a lot during development thou, since you can test your BE endpoints directly from the built in UI
you can generate an axios/fetch-based client around a swagger file, which if you are using typescript would also properly type the entire API on the clientside.
Maybe I'm wrong but if
NSwag generates the clientside code to connect to my api endpoints then why make the same job manually using axios?because you can
Im not saying you should
just that there are many tools that can generate an API client for whatever language you want from a swagger file
thats one of the main purposes of swagger/openapi
Ok, so I can use either of them: axios or NSwag, they do the same job so I have a choice. NSwag do this for me, with axios I must do that manually. Now I get it
no?
axios is an alternative to using
fetch()
not an alternative to nswag.
you likely have the top green box atm ( a web api in asp.net)
yes
if you set up swagger in that, it will generate a swagger specification
thats the orange bottom box
from that, you can generate clients
axios is just a JS/TS library for making web requests. it has some nice features like interception, adding client-wide headers etc.. You can 100% use fetch() instead.
Yes, but NSwag generates the clientside code to connect to api, I can do the same with axios (or fetch). If I can do the same with both approaches then NSwag is better because it makes all the job for me
sure
just fyi, the nswag generated client will use fetch() internally, just so you are aware.
Ok, and this is what I was curious about too. Does NSwag uses axios internally or something else? Thanks for clarification, now I know it uses fetch. SO it means that if I wanted to make any changes/add extra code then only
fetch() library is acceptableyou would not manually change the generated client
you'd just generate a new one
if you need to modify something, you write a wrapper around the generated one
so
your frontend -> your api client -> the generated api client -> the apiOk, thanks for clarification. Sorry for basic questions
its fine.
Was this issue resolved? If so, run
/close - otherwise I will mark this as stale and this post will be archived until there is new activity.