React JS deployment in IIS Server | Hosting React in IIS Server | Nihira Techiees

and in this video Let Me Explain how to deploy our react.js application in IES server this step is very simple first we have to generate the Builder file using the command npm run build so after that we have to do the site setup in our IAS server and then we have to map these files okay now let me go to my application we can generate the build and if you have watched my angular deployment video the steps are almost similar only okay the build will take some time meanwhile we can open our IAS server we can follow the steps so under the sides we can add our new website react red and the physical path so let me Define my deployment folder so insert the deployment I'm going to have one more folder react server let me choose the same path now let me click ok one thing I missed the binding okay the default value 80 is loaded so let me change this into 85. so here I choose to 85 as the port it is not mandatory So based on the available Port you have to choose your own port okay and the next let me go to my application okay great the bullet is completed and if you see this output so the Bullet file available in the path of build okay so let me go to my application folder okay this is my application Redux grid and said that we have this build folder so here we can see our build files so let me copy everything and we can move in our deployment folder okay next in our IAS server let me restart this one and also in our app pools the dotnet CLR version is 4.0 so let me go to the basic settings so this is our react.js application the code is no managed code okay now let me browse this application see we are in the home page react.js credit using reduction.json server so if I am clicking this user okay I'm getting the network error because my AP is the Json server's GP it is not running so anyway let me run in the local okay AP in the running mode so let me go to the home page you can refresh the screen again I am coming to our user screen see the data is loaded so if I'm trying to edit this one should have that been user and let me provide admin user one so I'm clicking submit okay it is updated so even if I am trying to remove this record it is working fine so let me refresh the screen okay so when I'm refreshing time I am getting the issue so this is all about the URL rewrite issue okay the step is very simple for resolving this issue so while my angular deployment also I have explained the same thing so in our IES server first is check whether we have this URL rewrite if you don't have just go to the browser type like URL rewrite download so in this first link just to move on the bottom So based on your system requirement download this installer and install the URL rewrite model 2.1 okay so after that just to restart your mission so then you are able to see this URL rewrite okay then defining our URL rewrite rules we have to create on web config file so in this deployment folder just right click and the text file then change the name web and the extension is config then opening this notepad plus plus and here you have to add the lens okay so then close this one I will add this content in our description you have to use it so let me close this one at the next in our IAS server let me restart this one so now I am trying to refresh the screen see the data is loading so again I am trying to remove one more record it is removed automatically discard refreshed again if I'm trying to refresh also it will work and I am able to navigate in the different menus so finally let me create one new record also see the new record is created successfully okay great now we are in the end of the video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 6,418

Keywords: React JS deployment in iis server, React deployment in iis server, React JS hosting in iis server, React hosting in iis server, how to deploy react js application in iis server, how to generate build files in react js application, how to handle url rewrite in iis server, create site in iis server, bundle initial exceeded maximum budget. Budget 1.00 MB was not met, bundle initial exceeded maximum budget. Budget 500.00 kB was not met, nihira techiees

Id: dHEzao6pvbk

Length: 6min 14sec (374 seconds)

Published: Wed Apr 26 2023