✅ Deploying Node app along with .Net Core on IIS
Hello guys, I am looking for an answer for how to deploy and host ASP.NET Core app along with Vue.js.
I developed the frontend app separately from the backend. My backend exposes an API for Vue.js. My backend is .NET Core API app. What's the best solution/practice to make them work together on IIS? I read some articles and this is what I got:
Once Vue app is ready just build it. Then create wwwroot folder in .NET Core API and move all files from 'dist' folder (where is Vue built version) to wwwroot. Then add app.UseStaticFiles() middleware component in the ‘Configure()’ method of Startup.cs file. Configure CORS properly. Next, publish your project in VS and move all files to the IIS server.
I have several questions:
1. Is the above the best practice to deploy both apps together?
2. Do I always need to copy-paste built version of my seperate frontend to wwwroot? Can't I just store Vue files in some other place on IIS server and communicate both apps (API and Vue) via http protocol?
3. Now I make calls from Vue to API using axios. I point to specific location (endpoint) in my API to extract data. If I moved all Vue files to wwwroot folder (which is currently added under API project) could I still make calls to API or not?
4. And last one - are there any other configurations I should make in order to make it work together? Like setting environment path or changing mode from development to production etc.?
I would appreciate your kind reply. If you have any experience with this topis please let me know.
12 Replies
2. don't. make a task that copy pastes for you.
3. yes, you could, but there's no reason to do it.
4. you need the node app to serve the vue files in development ideally. you need a reverse proxy for that. also you can generate a typescript client with swagger
Thanks for replies.
AD.2. I understand that I could make some task to do it but my question was: is moving Vue files to wwwroot the only one solution for make both (Vue, API) work together? Can't I store Vue files somewhere else on server and communicate both via http?
AD.3 Could you explain why? If I won't point the API endpoint location using axios then how they can communicate?
2. you can, and you should, only in development. in production, since they're static, there's no reason to do this
in production you just serve the files directly
3. I meant there's no reason to move the files. you make calls by urls
it has nothing to do with the problem
1. Ok, question: isn't it a good approach to host both apps on the same IIS server but under 2 seperate urls? Then ui doesn't share resources with my api which will be more compute resource intensive.
3. But I have to move the files if , for example, I make some changes to Vue.app. Then after each change in UI I would have to bulid Vue again and move files to wwwroot.
3. that's what reverse proxy is for
1. if vue is just static files, it's not an app, it's static files.
put your api under
/api
you don't change the vue part in production all that often, right?My Vue app will be quite complex, with a lot of interactions with users. Users will be able to do CRUD operations as well (through backend API). So there are not only static files
you said your api is aspnet core
yes
so the vue app is static files that talks to aspnet core
you do understand that vue is just javascript, right? client side code that dynamically renders the webpage by talking to the server
the front is just static files
yes, i understand this. I will try to follow your hints and deploy both apps. Thanks
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Ok, thanks for your guidance. I will try to make it work, we will see. In case of any questions I'll create a new post on this channel