Angular 9 Tutorial For Beginners #78- Configuring Environments Variables

hi friends welcome back to art tutorials we are continuing with our angular 9 full tutorial series today we are going to cover about how do you configure different variables for each environment specific work if you are working on any real-time project in a complex environment setup you will know that you will have to work your application in multiple environments dev test stage prepared broad and finally production we'll learn how to configure different data for each of these environments in this episode let's get started welcome back friends my name is sridhar i am here to share my knowledge with you all i bring over 10 years of experience as a full stack developer and i'm also here to learn from you and to see what you will build after this series so during the course of this tutorial series if you have any questions any doubts feel free to ask me in the comments section below i'll be happy to help you i am putting in a lot of hard work and bringing these tutorials for you so please support me by subscribing to my channel and liking the video thank you in advance this is part of the angular 9 full tutorial playlist where we have now close to 78 tutorials uh with complete code uh details and explanations i'm sure if you really want to learn and master angular 9 this is the playlist for you all right so we in this particular mini series where we are focusing on build and deployment today is the last of this on this particular mini series where we will learn how to configure our application to work with different environments in the previous episodes if you have missed please check them out we have learned how to build how to deploy and some basic concepts around build and deploy process and ahead of time make sure you check them out so you have a continuity in learning so let's talk about and get started with our configuring environments right so angular when you build enterprise level applications you don't have to work only you never get to work only in one environment basically we work on different environments like local which is local to a developer's machine then dev which is your development region then you have qa or test and then stage and then production so an application has to go through all of these environments in order to make sure that it is bug free and it works as expected and there are so many developers so many qa team which are working parallelly on it right so as a good developer we have to write code which is generic which can be customized to each environment right so angular provides us options to configure and work with various different environments we will find a folder called environments under source and under that we will create an environment file for each of the environment so for dev we'll create one for qa we'll create one for stage we'll create one and for one for prod there is no limit to how many prod environments we want to or to how many environments we can set it up okay you can set up as many environments as your application requires remember that for all the non-production environments there will be a key which is production it has to be always set to false it will be true only when it is a production environment now we can add any number of keys and variables in our environment files we'll see that in just a bit all right so how do we do that so we'll do it in four steps first we'll create an interface class for environment to define our variables second step we will create the same interface for each of the environment that we want to work with right and the third one we will then make changes in our angular.json to tell our angular application that there are multiple environments that needs to be configured now remember friends step number two step number three is where most of the developers will make mistake so 99 mistakes happen only in these two steps step number two and step number three so make sure you do it correctly and make sure you follow what i am doing correctly okay and the last step is nothing but just invoking the command in the command line interface to run a particular configuration or environment right so these are the four steps that are involved now let's get started and do one by one okay so first thing open up your application project and you will see under environments under source right inside source you have environments folder when you open this is what you would see the default environment.ts file which has production is set to false and you will also see environment.prod.ts where the production is true right so first step i told you is to work with we'll create an interface class for our variables so what i'm going to do i'm going to add some more variables and i'm going to say if the default should be localhost and i will say some if you want to pass some username you want to pass some encrypted password or token right so essentially you can pass anything and everything here okay so there is no restriction you can say port number you know 8080 or you can say you know environment name environment or it's not a good idea to use since it's a constant name so i'll say environment underscore name or we can say my name i'll call it by default right so you see i'm building a json object which is nothing but you know key value pair and you can give any key any value that you want to pass to the environment now copy this as it is right and copy this as it is and go to your prod and make the same details only thing the difference will be the this values will be now specific to the producer right whatever you want to mention it right now this was about prod i'll create one more file and i will save it as right i will create one more file here and i will call it environment dot dev upper dot yes so i'm creating one more environment file now this is for developer region right so again copy this settings same settings paste it here and make production false since it is a non-production here let's make a dev url right here we'll make it dev user one here will make it there so basically now you are making you are passing the values that are required for your dev region right similarly you will create a new file for qa right so you can create any number of you know details that you want here and keep passing them so let's quickly add some values for qa and then we'll see how to use them all right okay qa dot site so see now we have created three environment files one for developer one for qa one for prod right now this is the step number one and two first step is to create an interface class which we created in the environment here right and the second step is to create each environment file right so that's what we have done here in developer prod and qa we have added each environment specific values now this is the most important thing step number three now we have to go to angular.json right and call collapse all the details open project right now you would see build serve extract test lint e2e so these are all the various under architecture you'll see all this now first thing i told you we have to change it under build and under serve okay so what we'll do we'll go to the build and here you would see an option which says configuration right here all we have to do is copy this here and create a new entry for developer so here i'm going to say developer and here i'm going to okay so one more this is done this is done okay so for developer i have added a new rule in the configuration that whenever it is whenever there is a command which is developer you should use the environment as developer right this was for production here i have added for developer if you want for qa you'll copy this again and make it qa and here you'll make it qa right so see now i've added for developer and for qa under configuration inside the build right now the next thing inside the serve again we have to add under configuration if you don't do this you will get errors so here i am going to call it developer and here i'm going to say i'm going to pass the configuration as developer now you'll say i want one more for qa let's go ahead add it okay here we'll secure all right so now we have all the configurations done inside build and inside serve we have developer we have qa we have production so far good now the last thing we have to change is in the package.json so i'm i can just pass it here it's an optional step either you can add it here or you can pass it through command line that's up to us now this step number three is done now all we have to do is invoke it using the configuration so let's do that so how do we do that we will say ng serve that means i'm trying to run the application right and i am saying use the configuration developer right so now this will run it in develop mode because we we have clearly mentioned in our angular.json in the build and serve that whenever it is ng serve we have to pick this right developer and in the build i am saying use the here you see it says build developer so it will go to build and here it will find the developer and it will pick up the environment developer.ts right so that's how you connect the pieces right now let's see output okay so now we have the product one product two it's now running in develop mode but how do we know that it is actually picking this value right so let's do some value adding and check it so go to component.ts right so here we are importing the environment file right so we'll say import environment slash environment okay here the this is the constant that will import and here will let's define a url say host url equal to environment dot host url right now whatever is in the developer uh environment file here right we have a host url which is dev dot site right that is what we let's display it in the component for now so here we have the host url let's take it here add it here and say host url from environment file okay so let's see what it comes up now so it says dev dot site right now let's see the similar way let's so what i'm trying to show here here is that the values that it's reading from the environment file and that's the important thing we are trying to learn in today's episode all right so we need to define them both the username and token so username token all right here i will say dot username here i will say dot token right now let's see the application it should show us the values which is app user dev1 xyz dev right if you see our environment file of developer user dev1 xyz dev right so far so good so it's reading the values which are there in the environment file right now let's change the environment now instead of running it in developer now let's run it in qr mode so now you will see this values will change right once the site builds you will see that now these values will point to the environment file of qa which means it's dynamically picking up the values from environment file these are specific to that environment all right while it's building if you enjoy if you're enjoying this video do like the video please thank you all right so now you see after compilation now it's saying the host url is q a dot sight user is this right now one last time i will show you for prod build right so now it will show the values which are corresponding to prod so this is how we will configure all the different different variables that are required in your build pipeline in your deploy pipeline for your configuration like what's the urls everything when you want to make them dynamic you include them in the environment files right let's give it one quick minute again friends please try it out if you have any doubts just let me know i'll be very very happy to help you i hope you are enjoying the series if are you enjoying if yes drop in comments if no what can be improved uh please do let me know i can try and improve on it all right so this is compiled successfully now we see prod dot sight user prod abc xyz prod right so now we just learned in today's episode that our application will behave differently with different variables which can be passed via environment files for different environments right all right so that brings us to the end of this particular mini series in the next series i'm starting angular crud operations a lot of you have written me can you please cover it end to end on angular functionality in a live project so i will set up something for you i will start it starting today you should see getting new series started if you enjoy this series if you're liking if you're learning please drop your encouraging comments in the comment section thank you so much i'll see you in the next episode where we are starting a new series on angular crud operations in a live project thank you so much for joining see you in the next episode

Channel: ARC Tutorials

Views: 13,200

Keywords: Angular 9 tutorial for beginners, angular 9 tutorials, angular tutorials for beginners, angular interview questions and answers, angular live projects, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, angular environment variables setup, angular environment variables, environment variables angular

Id: fyW5ZzwMUjA

Length: 16min 55sec (1015 seconds)

Published: Sat Jul 25 2020