Angular CRUD with Web API Tutorial Part #13 - Testing and Deploying Feature Module

hi friends welcome back to ark tutorials we are continuing with our angular crud full tutorial series this is the part 13 and the last part we have been building this feature module called products for our e-commerce shopping cart application over the last 12 parts we are already it's time to test and deploy it i'll while deploying i will also show you why it will not work in most servers that you deploy and how to fix it important piece of information you don't want to miss welcome back friends we my name is sridhar i bring over 10 years of experience as a full stack developer and i'm here to share my knowledge on modern web technology stack like angular node express mongodb and much more while i'm here to share my knowledge i'm also here to learn from you i know a lot of you are building your own feature modules along this particular series and i cannot tell you how excited i am and i how eagerly i'm waiting to see what you build during the course of this series of building your own feature modules if you have any doubts any queries let me know drop in the comment section i will try and help you as much as i can this is part of the angular full tutorial playlist the playlist link is in the description box below make sure you check it out just a quick recap for people joining us new on this particular series we are building up a complete feature module called products for an e-commerce shopping cart application called shop for less all right so we are at the end of this particular series today is the last episode but definitely not the last video on this particular channel last part of this particular series where we'll be testing and deploying the feature module so we have spent quite some time in developing this particular feature module from scratch we have seen how to install an angular application to routing to feature module to lazy loading and then the parts of it which are services components crud operations so today we will do some kind of testing manual testing fix up some bugs and we'll learn how to deploy let's get started all right so what i'll do is i'll make some quick notes for you uh here some of the important things right so the question that comes is what to do right what to do after you have developed develop the product or application or say feature module right so once you have it you need to ship it right so you'll probably merge your code into your master branch or dev branch and then you're ready to ship it right so before we do that let's do a quick round of testing to make sure everything is good right so let's so so let's see this uh we have it here when we launch the products we see all the products that are listed good so far you can click on a particular category and see category based the results right and we can click on view all products so we need to have a link let's say let's throw in a link which says here and i'm going to throw in a link here and saying create product or i can say add new product right and the path will be slash create hyphen product all right so background let's make it gray all right so you see here now we have the link for add new product so we click on it we can go and add a new product right this particular thing doesn't have a title so let's add the dub so under the create product i'm going to go and just throw in a h1 or even better let's keep it simple let's make it h2 and say add new product and you can alternatively style it based on your comfort and how you would prefer it i'll keep it simple i'll keep it really simple i'll say bg back i'm using some utility class background warning going to throw in some margin bottom two so now you see we have got this add new product or if you don't want any right so we have bg light so you see there's a slight light color that gets added so good so far i think this looks neat enough not great but neat enough right um so yeah so that's for a create product now similarly take the same experience put it in update product right and call it update product right so go to all products click on any product click on update product here you see update product right all right so we have view products we have uh this is basically this is what we started out to kind of build our application if you see and these are the things that we covered at product view product view all products update delete view products by category right so once you have developed this what next right so obvious thing is we need to deploy that right so once so i have done manual testing but i will cover in some other tutorial how to write unit test for testing uh as part of mean stack that i will start uh starting tonight uh so but let's focus on this first so deployment right so we can deploy to any server right we can deploy to to any web server right any web server or you can even deploy to any cloud platform like aws or xur or gcp all right or you can even choose any web hosting apple sites like uh bluehost or siteground or godaddy right etc for this particular tutorial i will be using a local server right i have covered this tutorial in deployments in as part of angular 9 full tutorial series so make sure you check it out if you are new here so yeah i'll be deploying it to a local server using xampp right so it's an apache based free open source local server setup right now you can use apache you can use any any iis any any server of your choice now that being said let's go ahead and build the application right so for that what we need to do go here i'm going to cancel uh the important thing a most important most important thing about deployment is the is the base base href right so when i deploy to my local server it would be something like this localhost 50 slash shop for less right this is my folder name this is my server now if you have a web hosting url you will probably be having a root directory for it right so you'll it is about basically which folder you are hosting at your server right so my folder name is shop for less and this is my server url now that being said i have to use a command which is ng build this is what it will build and there will be an output in a folder called dist right list folder output of the application which is nothing but javascript files one index.html one index.html and few javascript files like main polyfills etc all right so let's go ahead and build it and we'll pass the base href so i'll say base href equal to http local host 50 slash shop for less slash make sure when you when you give the base href right make sure you give it as a folder which means backslash is needed at the end okay so like here i've given now similarly i'll say my deploy url is also same right and then i'm going to say shop for less all right so now we have our base href and we have our deploy url now we are good to deploy so let's go ahead and now execute this it will create a new folder here under uh e2e just in the same folder as source inside shop for less and it would give the output in dist folder while it is building i'll request you if you're liking the video keep those keep those positive encouraging comments coming like the video drop in your comments i feel very happy when i see them all right so you see uh we have the list folder here and it completed it task now what i'm going to show you here is this is the um folder so you have the dist shop for less so you see products module is generated everything so just copy it as it is ctrl a ctrl c and what you need to do is just go to uh the folder path which you want to deploy so in my case it's the shop for less which is on xampp right so now that i have it i'll go to my url and i'll enter shop for less okay so it is not working let's see why okay so it says fail to load uh okay so you see i made a mistake in not giving the slash right so that's the mistake so make sure you don't do it that's a common mistake right so this is a common mistake common mistake a lot of developers make but these these usually will be these commands are usually run in your pipeline right so if you don't do it manually do it manually right we do it automatically in the build pipelines all right so we have it here again let's go back and take our code from this control a control c and then go to our server folder delete this and paste the new code so i've just done copy paste nothing fancy here make sure that you also do the same and then just re reload now we should see our application right so our application data is not showing up okay so the data won't show up the data won't show up the reason being json server is not is not listening now is not listening to 4200 right or 3000 from the correct directory so what i'll do i'll quickly navigate right so if you see i have navigated to the same folder source folder on uh xampp right so what we'll do we'll go to xampp and then i'm going to say htdocs then i'm going to say shop for less source assets and then data and here i'm going to run json server now it's running locally so now we should see some products but it's still not showing so let's see why okay in the network you can see that it's making calls so it's getting categories which is correct but it's not showing the products right so now that's the common you mistake that a lot of people do now why it is not working right the reason is the reason is uh these most web servers right they don't support path strategy of angular right so to fix this right what we'll do we will import location strategy okay let's do that so how do you fix it you go to app routing module okay and then what we'll do we will add in the providers okay here i'm going to say under in providers i'm going to say provide the class location strategy okay and i'm going to say use class right uh just be an array here so here i'm going to say use class and i'm going to say hash location strategy close this here okay so we imported location strategy hash location strategy so what this means now is to access right to access now will the new url will be google host 50 slash shop for less slash hash products right so using hash location now right so you see there will be a hash in the url that's how at least this particular server will know okay so let's go ahead and now that we fixed the routing module let's go ahead and generate it again the output it may it may look like it's tricky but it's actually not it's pretty straightforward and you know that once you start working on real-time applications you get used to these things um if something is not working you will exactly know why it's not working because that's what experience will teach you okay so i think in the app routing by mistake we imported a wrong one uh crypto so okay so let's remove it here okay and okay so let's again build it in the meanwhile let's clean up our application so in the server i'm just deleting uh everything try again it will not uh cancel the reason being that we are running a node json server on that particular data so i'm again deleting now now it's gone so i'll wait for the dist folder to come up again so it's coming up so we have the data let's see our code so it's generated so let's go here take our take our output and put it in the server all right so now we know that when we refresh we need to start our server on data so in the in the local host server you start that application and reload you still don't see data okay so just when something one doesn't work just empty cache and reload all right so now it is showing hash so i'm going to say hash products so it shows the products images again are not coming because of the path that i have to change uh similarly you can say so you need to update the routes part of all of this to show so let's quickly do that and change some of the data so you get the idea right so um this is how you have to fix up the route so wherever you have the routes in your routing module right you have it here so i'll go to my sidebar component and here i'm going to say hash slash right so it was just products right so i'm going to say hash slash right so now this would be a slash so it would be slash right so this is how the navigation would be so let's build again it may look like a tedious process but trust me this is how products are built so you need to have little patience alrighty uh this is all good uh so you just need to fix the base uh path or wherever you're printing or looping things right uh once you do that uh things would be pretty straightforward from there all right so let me cancel it here again and it has generated the output let's go to this copy the entire thing go to our server delete that paste the new ones and then what we are going to do is i'm just going to change the data right because now it will not be any more 4200 it's localhost 50 slash shop for less that's the part of the server right so you need to fix that path and here and here right okay good so so far so good now let's start our application again so we copied our files we got everything in place let's reload okay so it's did we reload okay so it says shop for less and then there is looks like we didn't start the server here okay so we have our application running looks like we can copy the data hit it okay so let's copy them again from this go back to the folder of the server copy paste replace all the files okay then let's do a hard reload okay so it's still not showing or either let me refresh it once okay so here now it shows category two so now you see it's showing the casual products all products that the the the image of the link that's not showing up because of the path so you know you have to fix this by using the assets so once you give that the correct path of where you're hosting your images it would start showing up so that is how we do end-to-end development of a feature product module we have learnt to build the feature module test it and now we deployed it to our local server that concludes uh this particular series um that's the end of this particular series on angular crud full tutorial series congrats to all of you on completing this series as usual i'm right here to help you if you have any doubts while you look up for it i thank you so much uh for having patience for bearing up with me i hope these were helpful to you uh starting next uh i'm going to start a mean stack tutorial series where i will cover five tracks um including express angular and node.js in detail uh i hope you will keep supporting and encouraging me like you have been doing all the way so far thank you again so much appreciate all your love and comments that are so encouraging and positive thank you so much again see you in the next series mean stack tutorials

Channel: ARC Tutorials

Views: 5,573

Keywords: angular crud with web api, angular crud tutorial, angular crud operations, angular crud project, angular crud example, angular crud with json server, angular crud application tutorial, angular crud table, angular crud mysql, crud angular 9, crud angular 8, angular bootstrap crud example, angular bootstrap crud, deploying angular apps, deploy angular app, angular app deployment tutorial, how to deploy angular app, angular 9 app deploy, angular deploy modules, angular deploy

Id: hyyHoc2UeUs

Length: 21min 22sec (1282 seconds)

Published: Mon Aug 10 2020