---
title: "Progressing through Environments with Uniform"
description: "When deploying anything other than a simple POC or personal website, a reliable application will need Environments. What is the right pattern for implementing environments for local developers as well as shared ones like staging and production?"
date: "2023-07-20T07:59:33.000Z"
url: "https://timbenniks.dev/videos/uniform/026-9q_1wzx_kju"
youtube_url: "https://www.youtube.com/watch?v=9q_1wZX_KjU"
playlist: "uniform"
image: "https://i.ytimg.com/vi/9q_1wZX_KjU/maxresdefault.jpg"
tags: ["composable-architecture", "cms", "cloud-infra", "frontend", "developer-experience"]
---

# Progressing through Environments with Uniform

When deploying anything other than a simple POC or personal website, a reliable application will need Environments. What is the right pattern for implementing environments for local developers as well as shared ones like staging and production?

Watch on YouTube: https://www.youtube.com/watch?v=9q_1wZX_KjU

## Transcript

in this video dave and i explore how you can use different environments for your development setup when you're using uniform canvas and uniform platform because generally you will have a development environment you have a staging one and a production maybe a qa one and in uniform of course you create compositions and component definitions and it would actually be super handy if you automatically can push these things up to staging from development and things like that and with uniform you can go many different directions because we don't tell you how to do stuff it's just super flexible so in this video dave and i will show you one way how to do it and this is the way that we probably like most so sit back and relax and just have a look at us kind of talking about it and showing you the demo cheers so usually when you're setting up a proper a project and you're going to want to have multiple environments so that we can have like gated releases we can progress code from um something which is very much on the edge dev dev kind of messing around to um a staging environment say and then um when the tests are done releasing it into prod things like that so this is one of the things that um i've just been playing around with with uniform canvas and this is how i have approached it let's just share your screen and have a look yeah there we go so you've got basically this is a little bit sort of scaled down but basically we've got a project per environment which means that that project is very encapsulated i can so this one in the middle is my dev project basically and i can mess about and here i can you can see i'm like just testing the cycle integration here i've got different stuff i can add components and things like that and actually when i'm working on this project if i want to add a new component say i would actually add it inside the ui in this project here um i'd literally just go in and let's just create like a banner say banner component and i'll just create a single parameter to keep it easy okay so while you're doing this you're basically just adding a component into canvas of your development environment and then once that's done we let's have a look at that workflow how that then works with your staging and production right that's that's the approach here yeah okay awesome that's right so you've selected your contentful space content for entry already then awesome yeah so here is this banner we've got it here and obviously if i start putting it into a composition now it's not going to show up um i have got the website running my local host here and i'm thinking you know maybe we'll just put a banner in the middle yeah sure it's just going to be really basic i'm even just using um an existing bit of content so something like this basically sure um but the first thing i need to do is use the canvas cli and what i can do is i can um pull down um that component into yaml files um and do uh sort of um store it locally and these yaml files is what is going to be really important as we progress through environments because then we can then push up those component definitions to the new environment um when when you progress so um i can do a yarn uniform pole so for the people who don't really know this just yet these compositions and components can be serialized into yaml files so we you can host them locally and put them on github and maintain them and so if you want to pull or push to other projects you can use our cli to do so and this of course is the key of what dave is doing here yeah so you can see here like that's pulled down this new banner component oh yeah quickly and it's got the entry that i added basically here now i have got like um a very simple gen bit scripts running as well locally so when i run my code gen it's gonna do the content for code gen as well which just basically creates typescript types for my components this is like a lovely extra i don't think we actually need that if you wanted to do this but it's super cool to do half though you know for half these types is great it's great because it means that i know when things are moving about um yes things getting renamed or like parameters and stuff like that so yeah you can see here this is added uh these new banner component um and here's that entry that i i added so yeah as well so we now have the banner locally we want to create an actual component for it um and i'm i'll model it off the experience one just to sure copy paste demo experience [Music] here we go um so i'll call it banner and the typescript type that i generated is going to be called banner component oh yeah of course and so it's not going to get an item because your typescript will probably tell you it needs an entry or something else absolutely yeah let's just check the beauty of the typescript there we go entry very nice you can see here that because of the way i've typed it with the codegen for contentful i get an eye experience which is the type of the contentful entry as well and all i want to do with this um link sorry this banner is i'm just going to put the title out just to keep it simple yeah let's keep it simple for now sure so i'll delete all this stuff i'll do everything and we're just going to say section and entry fields name oh good really simple get rid of these extra stuff so this is a very basic component now and then um i need to add it so that it so that uniform actually knows kind of um finally it's like the component resolver so it knows it exists when it has to render it dynamically exactly um and the way that i resolve these i basically just expo export them from from the same folder basically yeah sure in fact i can have a look for the resolver okay you can see it's just pulling all the components from that index file so i just need to export it yeah awesome here we go cool so now what i can what i then do is i go back into this canvas and again like this is just my dev um sort of project yep and i can go to my compositions homepage and then we can add the banner here save great okay so if i refresh this now we have there it is that new banner component just rendering out the name just like that so i've got it locally and um then it's just a case of getting it into ci pushing it up through the environment so i'll commit that change so you can see see this is the other thing like now that i've got it locally we can actually encode see what components are going to be and you also want to add it or not sorry because right now it's it's it's not for it's not added to the stage yet right okay cool oh i'm on a feature branch at the moment marketing item all good and we'll show you like what it does during the push the way that i've organized this is that in my preview environments so that's like staging say might have a qa environment is that or even just prs i not only push the components but i synchronize the actual compositions as well so that um we can basically create like a fake version of the site that we can run end-to-end tests on and then environment um there is this extra flag for the compositions um this this mode which basically says create new things that don't update anything else ah okay cool definitely so we can find this in our cli documentation right yeah okay cool and also you can also find it by just with the cli you can just do dash dash help right and show different commands and it will okay so i've pushed that up we can look this project is running in the cell oh it's already run oh that's nice and fast i like that rust for the win absolutely yeah so let's have a look so you can see here that runs push components so uniform canvas component push so because i added that in we can now check so let's go and check this should mean that it that new component also exists in my staging environment there is there we go you've got a component that's the magic that's the magic exactly so now that can be used inside any of those compositions that we've so you push the component you push the composition and you push the code right so on staging you would now have all the stuff you just did on development exactly yeah and was that connected to a specific git branch or did you do that manually or how is it connected right now do you mean the um well the fact that we're interested for example inside this project i've got environment variables and if we look at like the preview environment variables this project id is the staging project and then in production the project is uh it's a different one is the production basically and so that controls where we are pushing up and pushing down okay awesome the other thing that i've used to be able to know what to do is i don't know if i'm actually logging this out let's have a look there's oh here we go this here yeah um during a versailles um build it has this environment variable which is set to like preview or production and so depending on what environment i'm actually building for it will actually do oh you know which which ones to run exactly it makes sense to push all the compositions or just do the create all right um i think that was a really nice overview of all this stuff together so thank you very much for this let's make another video soon cheers sounds great [Music]