We have these two files here, they're both JavaScript files, called env.example.js and then env.js. And if you're curious on why we have two of them, it's because there might be times where this env.js file has some secure information such as API keys or something like that and you don't want to share that with anybody else.

So in that case I'm going to show you later on in just a few guides how we could hide this from others for security reasons. And the reason why you have an example version is because say that you have an entire team of developers and you want to give them the ability to know what their env.js file should look like.

A very common approach is to create a sample one, it wouldn't contain all of the secure items so that when you share the file with them they would not see all of your API keys or passwords or anything like that. But they would know exactly what the name should be and then they could replace it then with their own variable, so that is why we have two of them.

Now let's walk through exactly what they are, and they're both identical here, and we're not going to be changing these as we go through the guide so I just want to show you what they represent.

We have a dev server rule here and we are saying that we want to use a specific host and then port. So this is simply going to be something that we're using on our local machine and it is a configuration value. So if you were to want to take a look at what this is doing, if you open dev.config.js you'll see that we have this env variable.

So let me close this, and you see where we have env and we're requiring env.

So what we're doing here is, if you double click this Visual Studio Code has a very helpful little tool. If you hit command + F it will show you all of the spots in the file that have env and so you can go click these arrows and it'll move and you can see that we have the ability to access those environment variables.

So we can check to see what the environment is and access any rules. So specifically, you remember how we had dev server, host, and port here? Well, what this is giving us the ability to do is to override the behavior of our local server. So let's just test this out, if I change this value here, so instead of 3000 let's say that it's 7000 for some reason.

If I hit save and now come to the terminal and type "npm run start", what this is going to do is this is actually going to override the default port. Remember that we've been accessing the application at localhost:3000. Well now we're going to be able to access it at localhost:7000.

So we can switch over into the browser, go to localhost and just type in 7000 and now you can see our application is loading on this different port.

Now if you're curious on why you'd ever want to do that, it is because if you ever have a situation, and this can become common as you start to build out more applications. If you are running multiple applications on your local machine... So you might have some backend application like a Python app or a Rails app and it could be running on one port and say that that port is 3000, well you can't run two applications on the same port.

So what you can do here is you can actually change the default port that you're using locally so that they don't conflict anymore, that's all that it's doing. So you're not going to have to change this at all throughout this course and in any of the courses that we're going to be working with because this port works perfectly fine. But I did want to show you exactly what that represents.

Now I switched it back to port 3000 and now if you run this again you'll see that we are now back to accessing the application at port 3000. If you switch back and run it at 7000 you can see that it no longer works, and now if you type 3000 we're back to working with where we were.

So that gives you both the ability to override values and also to control how your application is accessed. And in the next few guides, we're going to finish up going through the remaining configuration files in this React application.