Publish an ASP.NET Core & React SPA to IIS

hello everyone how y'all doing today so today what we're gonna do is we're gonna learn how to publish an asp.net core and a react app into IAS now if you were in me last week you'll remember that what we did was we basically created an asp.net Court at and we integrated a react app into it so it will run off the asp.net core application if you weren't here last week that wakes I'm just going to quickly run through it would be now and so we've got it up here so this is our application inside this client app folder here we've basically got our react app in there so got all our files in there we've also we also integrated the two with signal R as well so we basically created this message hub and what would happen is that the react app would actually send a message through signal R which the asp.net core app would pick up know when it would go for the API and then the signal our integration would happen on the actual API call and it would throw it back to the react app so if I can show you how it's working try and run this and I can show you exactly what we did last week so just let it build up so let's see how we're getting on okay it has it loaded up yet it's just going through the motions so yeah it just had to do a rebuilt there it's now going up loading up via browser so whilst it's doing that I will just talk you know I think it's loading up now now it's still going there at the moment so I can just quickly talk you through what we did we do react app so we've got this hub connection here and it's got this full slash message now that's basically the address for the message hub that we created for signal our starts up a connection and then what we've got here is we've got a couple of react function components got same message so it's got a text box and a button and then we've got a list of all the messages which is down here so it all been well if our react app has started which it has we can put messages in here and then yeah it goes through signal our calls an API point in the asp.net core application and then it uses signal R to basically throw the message back so done that so if we stop the application now so once that stopped what I'm going to do is I'm going to show you show you the message controller it goes fruit so this is it's basically going through this create method here that you can see on the screen we've got this send to react method here and what basically happens is in here it basically hooks into that actual method there and then once it's done that it stores the message into a list array and then basically updates the messages so it's basically going to be sending this message here back to the reactor application so that's all very well and good next thing we want to do those we want to learn how to publish it how can we publish it I mean I'm going to show you how to publish it in Ras but you probably follow the same sort of principles if you're using a zero or you want to use a docker container I personally don't know a lot about the zero docker container but I will certainly show you how to do it in IAS so let's get on with it now so we need to make a few changes first so first of all we need to do so when we use it in the iOS app it's going to have a different host so on here we've got like localhost port number but we're just going to create our own host probably call it react to signal art or something like that so what I realized from the last demo is that basically I've got the full URL for this bit where it's submitting it to the API so it's submitting the message to API so signal arc and communicate with it so we just need to take that off and make it a relative link so let's go ahead and do that so that's done so next part we need to do is we basically we we need to tell the asp.net core application where the static files are going to be so for our react app where are the CSS and the JavaScript files where they going to sit so we're going to do that in the startup configuration so we go in here we need to go into our configure method so if I bring that down a bit so we've got bit more room so if we're going to our configure method and we go in it's underneath what we're going to put it underneath here and what we need to do is we need to use the add static sparse static files so we've got the method there and then we need to create new static files option and the request path is going to be client apps so that's the folder with our reactor app and then when it builds all the files up it will store it into a build folder so when we actually build it it will also be stored all that when it uses the type script and converts it all into JavaScript and all the SAS files into CSS it will all go in the build folder so let's go ahead and put that in there we go that's that done so when you create a react app through one of the react boilerplate plates in asp.net core in one of the visual studio templates creates a sort of series of functions in the project file where basically it tell it basically checks that you've got node installed and then does an NPM install and then it does a build on the react app as well using NPM because we created just an API application we haven't got that at the moment so we need to integrate that in so what I'm going to do is open up the CS proj file and then basically I'm going to have to include some of these things inside let's write that right move that down there so don't let call 3.1 we already had that in and then some stuff about typescript is packable Spyro it routes it to the react app client app and then it's also got this default items excludes so basically we don't want to be including the node modules in that so we've got some package references for our asp.net core application that's all good so this first step here that we need to do so this is just basically just specifying where the files are I believe where the react files are the next part after that this basically ensures that node is installed and if it isn't then it will basically throw an error so that's so good in there also check to see node version as well just to make sure and it does an NPM installed so make sure that all the node files in your reactor have actually been installed lastly we need to input the publish targets so let's do that let's copy that in so what this is doing is so basically we're going to publish this to a folder and we're going to map that folder to is and this is basically some of the commands that it needs to do so it needs to do an NPM install just to make sure the notes no modules are installed it's going to use this yarn build : iis and we're going to set that up in a bit but basically that's gonna build our react app and then it just basically distributes all the files and this is what's basically happening down here so next part so we've got this build code on is so basically what we're gonna do is we're gonna create an environment type called iOS so we've got a couple of steps that we need to do with this let's get a lot of Emergency Services down here live on a busy road so right so we need to create an environment to iose and we need to do it in the client app folder so let's go ahead and do that so we need to create a key called public URL and specify where the build folders are so basically when it's built when we go back to where is it I believe it's in public so this is our sort of homepage for our reactor app and you can see here we've got this public URL in here so we basically need to specify the path as to where these files are going to be located so we've done that you save that the next step after that is we need to go into our package JSON file now this is where we basically going to set up that build colon is which I just showed you so we're going to be setting up this here this build codon is so if we go in here and we basically need to run this command here so I'm gonna write this out and then tuck you through it's certainly what's happening so in a moment we need to install this env CMD this is so the environment files the one that I just set up actually work and then it points to this file here that's the one we just created so it's this one here so it's pointing to that so it knows that and then it's just running this react scripts build so pretty much default to react right next we need to add some young packages into our project so we need to add the EMV CMD which I just told you about so we're gonna go ahead and do that so this may take a while might not be too bad in fact I think this is not too bad I think it's when we install when we actually try and publish the solution has to go through install all the node modules and then it basically has to build the asp.net core application as well as their react application as well so we just let that do that at the moment and also so what should happen with this is it should install bubble runtime but it didn't seem to work it seemed to throw up an error when I was trying it yesterday so we need to also install that as well so we will be doing that after it's once this is all been complete so yet takes a little bit of time so whilst it's actually doing that we're gonna just step ahead a little bit about hosting so if you want to run this on is you need to make sure that you've got the asp.net core runtime installed so most of you have probably got the SDK installed for doing your developments and that and as you can see here it says on Windows we recommend instead in a hosting bundle which includes dotnet core runtime and IAS support so that's this option here so you need to make sure that for whatever asp.net core version you're running that you basically make sure that that's installed onto your server let's have a look and see how it's getting on now it's still still running at the moment but yeah it's gonna be dependent on the version you're using if you've got the right one installed or you're using different version then you might have to have some issues but you can sort of debug it as well you can sort of set logs when you're running it through is which is quite good enough but I remember I'll show it to you later on so nearly there I think nope it's doing something else now good opportunity to have a sip of water so final part it's doing something else now all done is it it's thinking about it yes it's done right next part no we don't do that down here we just need to add the babble in not really too sure what bubble is to be honest but it's required for this I'm sure people way more knowledgeable than me will know so here we go again we oh it doesn't look like it's going to take quite so long this time that number down there is a lot lower than the 22,000 from last time all being well here we go so what we're gonna do after this we're gonna publish it in in Visual Studio but then that's going to take even longer than this so we're gonna set up our is and we're also gonna set up house file as well so here we go so let's go back to our visual studio okay so let's go ahead and now publish it so we're gonna publish it to a folder so we click on publish here just let it load up so here we go so yeah where are you publishing it today so you've got options in Visual Studio 2019 where you can publish it to a zero if you're using that publish it to a docker container by the looks of it you can also publish it to is directly and FTP and a couple of other things but we're going to choose folder today we're gonna do that so we're gonna set it into a folder and we're just going to publish it into our publish folder so that's a good folder location let's go ahead and do that so all set up there need to click on the publish button here that's something I forgot to do when I was testing it earlier so it looks like it's doing something it's going ahead and doing the build so yet whilst it's doing that let's go ahead and we're set up the is record sorry first things first so jumping ahead of myself a bit there we need to just set up a hosts for it so we're gonna call it well we need to specify the local address for this machine's one nine two one six eight zero five and we're just gonna create a local react signal our that's going to be our host name for it so done that then if we go back I'm going to copy that actually and then I can paste it when I'm setting up the is configuration so that's out the website so there we go now what I need to do here is I need to get the full path for it so it's gonna be it's gonna be sitting in here we don't want to start it at this point because we don't want is to sort of stop it from publishing the files it should be alright but just to be on the safe side we're just going to have it non secure as it's a demo certainly wouldn't recommend it if you're doing it in production it's if the whole world is seeing it but certainly for a demo it's absolutely fine let's not start it for now there we go so it's called its signal or let's call it react signal off so we can just rename that if we need to and we're going to in this so there we go we've changed that so yep so this is basically going through the steps that I showed you for the publishing so it's doing this npm install and then it's running the yarn build code on iOS at the moment so it can take a bit of time to go through and do that but once it's done though that's it we should have it all working in is and then we should just be able to have a play around with it and see and see how it works so there's always the install that seems to take a little bit of time the actual build doesn't take so long what I do is once it's all done I'll show you the publish folder and you can see the actual typescript the typescript files being converted into JavaScript files it's quite clever I think appreciative best at how clever is how they can sort of write a preprocessor and then it they can just convert it into typescript there must have been a lot of man-hours at Microsoft doing that okay so you get a few warnings here it's nothing I don't think that we need to be concerned about I'm sure we'll find out when we've got some errors but certainly for now I think we're gonna be okay something about not removing not sure what eyes we've got an empty folder we got any files that you know we haven't so must they'll be doing the installation again oh it's still in see so if you weren't with us last week and might just talk to you for a couple of our aspects why this and does what it needs to do so this hub this is basically inheriting the hub and that's from signal arts part the signal our library again we're not really well we're not using it at this point here it's basically being used in our API message so we set up this API message controller here what happens is it basically uses dependency injection and passes in the message hub through the iHub context interface and then we're basically using it and basically all the clients that are connected through signal are so in our example it's a react app but you could also have an angular app connected through the same signal our hub it doesn't really matter and then as long as the application so in our react app it's listening out for this send to react and if it gets a message from it then it will basically respond to that message in the way you want it to so that could happen with an angular app as well so you could program it in the same way and it doesn't really matter too much and then what this is doing is it's just basically sending the message saying that it's been received so it's doing that and then we were just returning a 200 response we're not actually returning anything in the response so when the response is returned it would just be an empty 200 response so is that anything else we got we did have a number of configuration changes to make in here so we have to specify this sparse static files make sure it's routed to the client app build and after all that we've actually got an error what is the error I can't find the file EMV that is I wondering if I've put that in the wrong place and may very well have done let's have a look who the wonders of a live demo ah I know what I've done yeah so made a small mistake there hopefully this shouldn't take too long though because now we should have all the node modules installed but basically it should be DMV do is I've got to put the dot at the beginning so let's go ahead and do that again let's just remove this publish folder so let's do that it's all gone and hopefully this shouldn't take too much longer that might have been why it was taking so long today but let's have a look so hopefully as I say we shouldn't have to install all the name modules again all being well we will see and that but hopefully say if there's any sort of comments that you wish to make on this or any sort ideas you've got what you want me to talk through on these live streams then please let me know just drop me a message round the code calm there's a contact button at the top of the page click on that fill in your name your email address write any comments you want and I'll get back to you as soon as I can so all been well oh I think it is doing the NPM install it again unfortunately oh no no no we're good we're good it's now actually building the react app so it's it's got free the it's now actually got through that creating an optimized product build and hopefully this should now be creating the files into our publish folder so we go in here save it no we don't got anything on the moment getting a bit premature yes yes we're all dopes we're all good so yeah there we go so we got all our dll's in here got web.config as well and I sort of used to that not used to that in XP net core but this is basically used I can quickly show you that actually if you never published asp.net core application before then it's probably worth just something a quick look at it we can open it up so not much to it it's basically got this handler of asp.net core and it's using asp.net core module v2 don't know what was in v1 I don't know what the difference is between v1 and v2 and then what we've got here is some sort of process it's targeting they react signal or DLL and then you've got this an aid this log enabled so it's default set proposed but you said it's true so that's really if you're having some issues like you're getting a weird arrow of is you're not too sure what's going on with their set that to true and it will actually tell you what's going on so there's any errors then it will basically log love those errors to a folder and that's all there is to that so last thing we need to do is we need to turn on our website on is so that's all good to go so we called it reacts signal are so hopefully we should be able to run that and we should be able to see our react app let's see what happens it should work he says nervously there we go so we've got our react app working so let's just check and make sure that the signal our connection is working fine no oh yes no it is it is is working but once you sure what's going on there maybe had to do a bit of warming up let's just send enough a message anyways yes so it's all good it's all working just before I go I want to show you about the logs so this is probably empty at the moment yeah you can see it's got 0 kg but basically it will output any sort of errors into a log file like this so basically if you have any errors as long as you've got is configured properly if you've got if you haven't got that configured properly then this is not going to work and it can't run the actual application and sometimes it's because you haven't installed the dotnet core runtime which I showed you earlier on in the video so something to bear in mind right so that's it for me if you've got any sort of comments then go to around the code comm and click on the contact form or you can leave a message on this YouTube video more dotnet articles if you want to read more about dotnet and sequel server go to around the code comm subscribe to my youtube channel and like this if you liked it around the code comm for such YouTube and you can also follow me on Twitter it's at around the code so hope you enjoyed it and I will see you next time you

Channel: Round The Code

Views: 20,533

Keywords:

Id: PM2TRSCBST0

Length: 28min 40sec (1720 seconds)

Published: Tue Jul 07 2020