Transcripted Summary
In our cypress-config.ts file we have another parameter and that's called config. This parameter is responsible for managing our configuration. Let me show you what I mean.
In our config file we have our base URL but also we can jump into this function and set it up inside here. If I do config.baseURL and set that to HTTP localhost 8000 instead of 3000 that we have over here and then return our config I'll save my file and when I look into the settings and take a look at project settings I'll see that the base URL is 8000.
So the setupNodeEvent function is actually preferred to our default setting. Now since we are inside a function we can make this dynamic which is especially useful when we want to switch between multiple configurations. So instead of just assigning this base URL which doesn't really make sense in this setup since we already have it we can put an if statement and add this conditionally. The way we can use that is to pass a flag when we are opening cypress.
So for example when I open my terminal close cypress and run npx cypress open I can add additional flag dot dot env and for example say version equals to prod. When I do this and open cypress and look inside my settings I scroll down and what I'll see is that inside this env object I have now my own key version which is equal to prod. I can add anything in here but I can also access it inside setupNodeEvents function and to do that I can go into config dot env. So since this version is an attribute inside env function we can access it by referencing config dot env dot version.
So this will resolve to prod in this case but if we do npx cypress open dash dash env version equals to staging this would then refer to staging. Basically whatever we pass through the env flag we can add to this object and therefore reference in our setupNodeEvents and this allows us to write a simple condition. Let's say that if config dot env dot version equals to prod or production then we'll set up the base URL to https://trello.com and if it's not production or it's something else we will actually just skip this and this will resolve to default which will be HTTP localhost 3000. So let's save this now and since we last opened our cypress with the argument of dash dash env equals to prod we'll see that the base URL is set to trello.com but if I close cypress and instead of prod I'm just going to end up with nothing we'll see that the project settings will take up the default which is localhost 3000.
Thanks to the config and setupNodeEvents function we can create our custom logic that will enable us to switch between different environments. The way I like to handle this is to create multiple configuration files. So in my project inside cypress folder I create another one called config and I'll create multiple different files so for example local.json prod.json and staging.json. Every one of these is going to have an object which will have base URL setup. So let's do base URL and create HTTPS staging.trello.com then inside production I'm just going to change this to trello.com and in local I'll be using HTTP localhost 3000.
In every one of these files I now have my base URL which I can now reference inside my cypress config. The way I'm going to do that is that I'm first going to read what's inside env.version attribute and put it into a constant so let's call this constant version and this will resolve to whatever the config.env.version is and then I'm going to feed my config.env with whatever is in the file that I have loaded. So I'll do require to reference a file and that file will be cypress slash config slash whatever the version is so let's do version dot json. So if we pass dash dash env.version equals prod we're going to be looking at prod.json. If we do staging that is staging.json and if we do local it's going to refer to local.json.
So the env object is now going to be filled with data from a certain file. Now in order to actually use the base URL attribute that we have added here we need to not have it in the env object but we actually need to set up the base URL so that's going to be config.baseURL and that's going to be equal to whatever the config.env.baseURL is.
So to recap we are going to take the version then we're going to read the file and put contents of that file to the env object and then from the env object we're going to take the base URL key and add it to the base URL key in the config. So when I now save my file I'm actually going to get an error and the reason for this is that if we simply do npx cypress open and don't provide the env flag with the version key it's actually going to resolve to undefined dot json which is no good. So we'll add a fallback in here that's going to say if not defined then just go ahead and take the local. So this way we will always resolve our version key to something.
It's either going to be local or whatever we decide to define. So let's now try it out and open npx cypress open version prod and take a look into our settings and see what's being opened. We'll see it's trello.com. Let's now try this with staging which also seems to be working. So we got the staging trello.com and let's now try it with local and that one also seems to be working well.
This is a very simple setup and of course we could make things much more complicated. So if you need to add multiple keys you can add those into your json files or if you need to add stuff from your environment variables you can all do that inside the setup node events function. The only thing you mustn't forget is to add this return statement at the end so that all of the changes that you will do to the config object will actually get returned and the proper configuration is going to get resolved.
