Set up and deploy Asp.Net Core API with Angular front end

hey there if you're new to asp.net core web development I'm sure that you heard a lot of times about asp.net core API with angular front-end and maybe you are familiar with angular already and you are familiar with asp.net core but how can we really set such a project up and how can we deploy it so that we can really see a result stay tuned because in this video we'll talk exactly about setting up an asp.net core Web API weight and angular front-end [Music] [Applause] welcome to developer ramped up a channel dedicated to anybody who wishes to become a software developer or a better software developer in this video we'll talk about setting up and deploying a solution where we will have in the end an asp.net core API and an angular front-end the things that we do here are fairly similar even if you want to have a react front and part for this video we'll concentrate on angular and the reason why I decided to do such a video is because when I started to develop in asp.net core and when I started to develop my first very simple and basic API I also wanted to have a front-end for them so I started to study a little bit of angular and I got fairly familiar with angular and I always so kind like if I have two different total different things the asp.net core API and the angular front-end and on my local machine I was developing them separately let's say and I was able to make them communicating via HTTP calls and everything went fine because I was I was running like an G surf with open and then I would open the front end and the front end so the angular app would then basically make all the needed calls to the API and so on but I really struggled to find a way how to really set a project in such a way that we can easily deploy it to Asia or to any is server or to any Linux server and so on so this is why I think it is important to understand how this is supposed to work and of course there are several scenarios we will concentrate only on the most simple one but we'll also talk a little bit about how we can do this also in a more complicated way so let's get started by creating a new videos to do solution and I will click on file new project and here there is one important thing I always like to do for this type of projects where I want to have a back-end like asp.net core API and separately a front-engine maybe or probably also other application layers what if really like to do is to always start with a blank solution and the way to create a blank solution in Visual Studio is simply going on other project types where of course you can find also visuals to the solution and you find this blank solution so I will choose this blank solution and let's name it angular API which is fairly strange because angular is now you cannot create an angular API but it's the concept of our demo here because we want to combine this asp.net core API and the angular front-end so just click on OK and the new solution will be created as says this is a blank solution so you really don't have anything here as the next step we can really start creating our project so right click and add new project here we have several options but I would like to start with my asp.net core API so what I will do here is simply find here in this list web development which is here and I have here asp.net core application running on asp.net core of course so let's click OK we can also give a title here like an API then click OK normally now I should be presented with a new dialog from where I can choose a project template and you can see here that there are a lot of project templates already there for you in Visual Studio and we can see that we also have an angular project template the reason why I really don't like to use this angular project template is because in this case angular is really tied to a totally separate asp.net core application and I prefer to have my angular really running independently of anything else sure we will have to make some configuration in our API so that we can serve the angular files and we will come back to that a little bit later but once again I really don't like to use this angular project template however right now I wanted to create the API so let's create the API we can also use this configure for HTTP which is a new default feature in asp.net called 2.1 and now our project will be created ok so now we have our new project we can simply also close this window and what we can do here is maybe wait just a little bit for all packages or and all depend dependencies to be resolved in the meantime if we take a look here this is the really basic and standard values api that you would get with this API project template if we click on this controller we will see that we have really very simple action results everything is in memory on a get we simply return of value 1 and value 2 and so on we can also post and get a value by ID however you notice here that we have a lot of red squiggly lines this is because the dependencies aren't still completely resolved we can help this by right-clicking the project and clicking on build so this will hopefully make the dependency resolution a little bit more faster now everything seems to work fine all dependencies are resolved so we don't have any red squiggly lines anymore and right now I don't want to concentrate about this asp.net core API project of course we have the start upload CSV reconfigure our services and our middleware and we will come to this a little bit later but right now I would like to set up this solution further so what I would need to do is to add a new project this time I would like to add a project that would hold our angular application so we have add new project normally what I do here is I all so choose asp.net core web application but I will name this angular click OK and now when I have this window I usually choose empty and of course okay now when we have this new project we have the exact same problems that we had also earlier dependency dependencies are still not resolved and we see also that we have this startup dot CS and program dot CS and WW root and so on we won't need this classes and we won't need a w-w-w-whoa so what I would do and what I usually do is simply delete them because we really don't need them anymore this will hold only our angular project now of course you can also go into the dependencies and remove this dependency from here because we don't need a dependency to asp.net core in this project we will not run asp.net core at all we simply want to install an angular application here this is also precisely the next step that we will do I will assume that you are already a little bit familiar with angular with angular CLI and how you create a new angular application using the angular CLI so let's switch over to the angular CLI or to the node command prompt and let's try to create a new angular application so here we are this is my node command prompt where I already have installed of course angular CLI and so on so everything should be ready to proceed of course what I would like to do is to install the application the angular application or to create the angular application in the folder that corresponds to the solution or to the project that I have already added so I would need to switch directories to source Ripple's you basically would have to to change the directory to the directory where you have created your sourcing and project and here I mistyped something so let's change a directory once again so it would be source repos and I don't remember is exactly where I have safeties but this should be API angular and here I have my angular API so I would have to switch directory again and this would be an API this is correct now let's check exactly what folders do we have here and we see that we have the angular API folder and we have the angular folder and we want to install work to create a new angular application in this angular folder because this is the folder that corresponds to the project that we have added for angular so once again we switch directories and we will go to angular and of course if we click here on D we will see different things that were added with our project but these things really don't bother us right now what we will do next is simply create a new application so this would be mg new the standard comment line or angular CLI comment to create a new angular application then we have to provide of course our application name and let's name it a dev ramp from developer ramp up of YouTube channel and click on enter now it would take a little bit for this process to complete but right now the angular CLI will simply install a new angular application in the specified folder and you see that there will be a lot of packages that would be extracted there will be a lot of packages that will be installed and so on so we have to wait a little bit until everything is done and then we can of course continue when the installation completes we'll see something similar to this and purely theoretically now we should have the new angular application if we look once again in our directory structure here we see that we have so a new folder which is called dev ramp this is exactly the name that we gave to the application so let's switch to this folder in this folder we should have some very specific angular files like the CLI dot JSON and so on theoretically right now what we could do is ng serve dot oppan and this should start the application and of course open a web browser however I got this error this is due to my angular version I have an older angular version which is 5.6 and right now we already have angular 6.1 and in 5.6 there was a problem with this missing node module but what we can do is simply and p.m. installed and install this new module that we would need and afterwards we should be able to run the application now we will also have to wait a little bit until everything is installed but then we can come back and try to run our application once again so once again ng served with the option to open I want to also open a web browser and to see the application now we should wait a little bit because what is CLI we'll try to do right now is to build the application so that it can serve the file afterwards and then I should be able to see everything opening up in the browser and that's it our brand new angular application of very cool application though even very simple right now because this is the standard application that you get when you create a new application using the angular CLI now we could of course start to build our front-end to add new components to make our application look much more fancier and so on but in this video we'll we won't concentrate on this because this is not an angular tutorial instead what I would like to do is go back to visual studio because right now we have to configure few other things to make our application run also in Visual Studio and if we go here we already see that we have a new folder which is called dev ramp now you have to be sure to click this button first because normally by default it is not on so if you click it then you would be able to really see all folders and it also could happen that this folder was not added correctly to the solution well in that case you can simply right-click this folder and then you would have an option add to solution and that would make your folder available for the solution right now this folder is already available for the solution and we can see here for instance the angular CLI dot JSON which is a very important part of our angular application right now we have to configure some few more things let's for now remain with the angular application if we look in this angular CLI JSON file we see here a bunch of things that are important for the configuration of the angular application so these settings make sure that our application is able to run correctly depending on the environment that we are in these settings also make it possible to unit test angular applications and so on but right now I would like to concentrate on a very important setting for our scenario and this is this out dear what does this mean normally when you build an angular application so with ng build what happens is that of course the angular CLI will build this application in a way that you can simply then upload via FTP to your web server and it should work and by default these packages or artifacts are located in a dist folder that will be created when we first run this ng build very important for our scenario is because we want to serve also the angular application from our angular API so this means that we want to have both of front-end but also the API served from the exactly same web server and this is possible the only thing that we have to do is to make sure that we can get the build artifacts from angular CLI to be located in the www root folder of our API in this case this is exactly what will we do so we would have to navigate to that specific folder and if we watch the fold that the folder structure you would see that our folder containing the egg API project is two levels up so this is why we use this dot dot slash dot dot slash and now we would have to see exactly how the folder is called and for this one let's also open this egg API project in File Explorer so here should be an option to open in File Explorer and here we can check the exact path because it's in source repos and then it's in angular API and a and G API so let's try to do this here let's first however look at something else if we go back here in this repo and we see that we have this angular API so this is the folder that contains both our angular project which is the front-end project and our API project the asp.net core projects right now our angular application is located here so that's why we have tool to go two levels back one level two level the two levels and this means that we are right now in the angular API so what we would have to do here is then say AMG API where we have our W root folder so AMG API and hopefully I've written this correctly and then W double the W root and that should do it let's test this out by running an energy build right now we have to stop the webserver here of course because we don't need it anymore okay then on yes and our webserver is stopped right now and let's run energy build this will take once again some seconds depending on how fast this goes but since this project was already built one time this should be now very very fast and in fact we are already at 92% and we can see that everything completed correct - completed correctly so let's go to this www root folder and we can see here a bunch of angular files which is very cool because right now this means that we have a way to serve these files from our API project good let's for now close this angular project because we really don't need it anymore the next steps that we have to do in order to make sure that we can set up angular to be served from this www root is to add here some configuration in the middleware because if you remember we did some videos about middleware this concept of middleware in asp.net core is very important because this is the way to which we could let's say dive into the request pipeline and make some changes or add some logic ourselves for the purpose of this demo so that it would not be too crowded let's simply remove the HTTP settings and let's add some things here so first what we add to what we need to add is AB use static files static files middleware enables us or tells our asp.net core project that in our project we also use some static files these are the angular files so we instruct the application to know that we will have static files that will be served from this project another middleware that we need is the default files middleware so to use it just simply Abdur choose default files and that should do it for now right now what we have accomplished so far is that we tell our application our our asp.net web application that we will have some default files and that we also want to serve static files from the ww-would folder there is however one thing that we still need to add here and this is a custom middleware a very simple custom middleware that makes sure in cases where the asp.net core application is not able to find any route that it redirects or it served it serves the index.html file and less than angular do the routing on the front-end to do this I will use a code snippet code snippets are very fancy if you are familiar with them they are very very important because it makes a lot of things much easier we have here to import also another web space which is system IO and what does this middleware let's let's dive into it so of course this is not a final middleware we what we do here is a wait next we call the next delegate so this means that when a request comes in from above let's say it will hit this app use middleware first so our custom middleware and it will then pass to the next middleware in the pipeline but will also await the next so this means that we want to await until we have a response so in that case we go into this if statement and if the context and the response status code coming from asp.net core is 404 which means it is a file not found and if the but if there is a part that has a certain value or has a value so it is not null it's it's not simple a host name so this means that a request came in for a route that asp.net core was not able to resolve in that case what we'll do is we will add the part to the hostname this would make sure that when we serve or when the browser gets this response it will get this index.html file which is of course managed by angular so as soon as this happens angular will be hopefully able to resolve that needed route and if not of course we can throw there an exception or show a page with 404 not found and then of course we also use a wait dot next to make sure that we pass this response now in this case to the next middleware which would be this one and right now theoretically we should be able to run this project and when we debug we would expect that we would be able to access the angular application so let's try this out it's once again the first time I am debugging this project so it would probably take a little bit of time until it loads but when this happens what I would expect is of course we didn't configure anything yet but I would expect that a browser window would open and normally to see the values from the API controller so value 1 and value 2 because if you are familiar when you use this template what it happens is that it is configured by default when you access this application when you debug this application that it should go to API values however we will show you exactly how we can revert this setting so that when we debug the application it goes directly to the hostname so not trying to get any values from the API we still need to wait a little bit until everything is loaded but afterwards I would expect to see here just some simple strings like value 1 and value 2 which is the default normally in this controller values controller that comes by default with this asp.net called Web API project and in fact this through we see here value 1 and value 2 however the important thing is if we remove this part that our asp.net core application of course is able to resolve because we have a controller but if we do that we get the angular application so what we did by running and rebuild we already provisioned this angular artifacts into the www root folder of this API so when we debug this API when we run this project what we get on the default hostname is basically our angular application so let's close this down for now and go back here if you want to configure your project to go directly to the hostname we can simply go to properties and under debugging we should have under debug the option here you see that we have this years of what we will need instead is let's simply add this hostname there and this should do the trick for us so okay let's save and let's debug once again right now I would expect that directly our angular application will pop up and it should be a lot faster than previously because we already built it once it knows exactly where all files are and so on and as you can see here already we are not redirected to our API but we get the angular application instead so this is cool this is one checkpoint that we wanted to achieve we have deployed basically our angular application into an asp.net core project and when we debug this project we see we see our angular application now of course there is one last thing that we have to take into consideration let's say that we want to deploy this application somewhere so that it would be publicly available in my case what I would like to is deployed to an azure app service so let's look a little bit into how we could do that this is my inner Porter where I already created a web app where I want to deploy this demo it's a very simple web app and here are a lot of settings and information about this web app it is however out of scope of this video to dive deeper into how web apps work for now is just important to know that we have this web app in Asia now if we switch back to visual studio what we'll do right now I have to say that if you have an azure subscription and if you are logged in to visual studio with an account that also has an angel subscription or if you add an additional account to visual studio that has an inter subscription deploying this application to Asia is really really very simple also in order to this work when you install visual studio is good to install also all the major features and dependencies that you can choose when you choose what exactly do you want to install with visual studio and if everything is alright we can simply right click our API project and then of course we can click on publish what this will do it will build a publishing profile so it will publish this application all the needed artifacts and so on and here I see this window where I say that ok I want to deploy it to an app service and I want to deploy it to an existing app service and then when I click on publish you see that this is also my account on which I am running an edger subscription so I will choose the subscription and then I can already see the resource group and here I can see my application that is ready for this demo to run so just click on ok here and this will publish the application and of course it will build it and in few seconds depending on how fast this goes because it's the first time that this application gets published it could take a while but what it would happen afterwards it will simply push all this artifact together with everything that we have here in ww2 the area of services that I have specified and as we know we already know that we are able to run this application and to also run our angular application when we debug this project so I would expect that when we deploy it to Asia we would be able to have the same outcome this means that when the publishing is over normally a new browser window will open and what we would see it should be the standard angular application that we also saw earlier when we debugged that locally however in this case as you can see everything is running in this ater app service and that's it it works right now we have a very cool door very simple an angular application as front end with a back end with an asp.net callback and an effect if we go on API values we should be able to see our values value 1 and value 2 so we have everything up and running everything is configured locally for debugging and we also have published our application to Asia so that's mostly it for this video however before we really wrap this up there are some things that I want to say first of all this is not the only way in which you can configure an angular application to run alongside your asp.net called Web API there are several ways and a lot of developers would say that there are a lot of better ways but in my opinion this is also a matter of preference the main drawback to this approach that I have used here is that you would have if you when you want to test this locally what you would need to do is to separately start your asp.net core API to debug it and you would have then to separately start with ng surf the front end for it if you want to test the front end and well this might seem like little bit of overhead but L said my personal preference is that I keep these two different applications these two projects really separated because for instance there are some times when I want to work with Visual Studio code until when I just want to test my my front-end and I really don't want to debug the entire visual studio solution when I'm running different tests so this is the main drawback that you cannot simply run both back-end and front-end from the same place there is or there are some static file middleware for SPS so for single page applications that you can use and configure everything in such a way that when you click f5 on or when you debug the asp.net core project what it would happen in in the background is that some npm scripts or angular's here CLI scripts will be ran and also your front-end will be built then at the same time however I said I prefer to have everything separated and this is why I also made this video on this specific approach however an advantage of this approach in my opinion is that this is really easy to configure and get started with and there are a lot of circumstances or scenarios with let's say smaller not that complex applications that you might even build for production that you could configure and deploy this way you could even let's say put this on V STS fused to the team services or Jenkins or in any other CI CD a pipeline and you can build the final artifact based exactly on the same structure and in fact I did this with some applications in production where I used exactly this approach when you have a lot more complex applications or more complex scenarios or environments that you would have to handle it might be useful to use a different approach a totally different approach to angular and asp.net core back-end is to deploy this separately so we could choose for instance to run our angular application in one edge or web app and the asp.net Web API in a totally different web app the main advantage here is that you could scale than these applications individually so this means if you have more load on your front-end you can scale your front-end up and out if you have less load on the asp.net core API then you can scale also independently the asp.net core API and so on in that case but the way to proceed is simply take the angular artifacts and upload them via FTP to the web server where you want to host your angular application or is your web app and then of course then publish with the.net zeolite this asp.net core API take then the files and of course then upload them via FTP to the other web server or to the ad to the other ater web app that you might want to use so that's mostly it I think after this video we should all be able to set up a project or a solution where we run an asp.net core API and an angular front-end and serving of course all the static files all the angular files from our WW root from our asp.net core API thank you very much for watching if you enjoyed this video don't be shy and hit the thumbs up and the subscribe button to the channel also if you think that there are some more things that you want to have discussed on developer ramped up make sure to drop a comment and let me know about your thoughts and maybe you have some questions also you can drop a comment and if you really feel feel that this content might be useful also for other colleagues or peers from your networks and so on don't be once again shy and share this video on your social networks thank you once again very much for watching and until the next time I wish you the very best

Channel: Codewrinkles

Views: 35,615

Keywords: programming, software development, web development, ASP.Net, Asp.Net Core, Angula, C#, Azure, Azure AppService, Azure WebApp

Id: G1Z_481DI4I

Length: 36min 28sec (2188 seconds)

Published: Fri Jul 06 2018