Change The Keystatic Storage Mode Based on NODE_ENV

[00:00] The GitHub or cloud mode in KeyStatic are pretty powerful, but sometimes it's not what you want when you work locally. This whole dance of creating a new branch, opening a pull request, merging it, and then pulling the changes back into your local project can be sort of irritating when you wanna move fast. And you also lose the ability, which is something I do all the [00:20] time, to edit content directly by editing MarkDoc, YAML or JSON file. I want quick changes. When you're deving and prototyping, chances are you actually want to use local mode because it's much faster. But you also don't want to alienate other people who want to contribute to your project in production. And a really [00:40] nice compromise here is to change the storage mode based on whether you're in development or production. Let's do this. Const is prod equals process dot env dot not env is equal to production. So if we are in production, we want to use storage kind local, but if we're in prod, we want to use GitHub or actually let's go back [00:59] to KeyStatic Cloud. We could do it directly in line here, but let's set up a local mode here, which is an object. And to help us, we're going to type this as a local config, which is a type from key static core, which is the type for the entire config in local mode. And here we can reach [01:19] for the storage. So this is going to make sure that our local mode has the correct shape. We're going to set the kind to local, and that's all we want, actually. We don't want the path prefix for local. And so let's create our other mode, const remote mode. Feel free to name it like you want. We're going to type this one [01:39] as cloud config or use GitHub config if you wanna use GitHub mode. And, again, we'll reach for the storage. So it should tell us what is missing. And here, we want the kind to be cloud and we do want the path prefix to be prod. And I think that's all we need. So now I'm going [01:59] to re enable the cloud settings since we use cloud mode. And instead of this here, I will check, is it prod? If prod use remote mode, which is the cloud mode, and if not, use local mode. The best way to test that it works is to run the project locally, and we are fully expecting to be running in local [02:19] mode. So npm run dev. And the SureFire way to know that you're in local mode is exactly that. We don't have any UI information about the GitHub repository like branches, etcetera. So we are in local mode, which means that that little change that I did locally at the start of this video should be [02:39] available in my first post. And there it is, super quick dev loop. So if I save this, my local file is saved. And if I go super duper quick dev loop and save, this is updated here as well. So this is much more empowering when you do developments or even [02:58] demos or you teach key static to your team. So now let's go and commit our changes. And, actually, I don't want to commit this little demo, so I'll remove that one. And so the only changes we have is what we've created this logic to use local mode or cloud mode based on the node and variable. So we're going to let that [03:18] build. And the hope is when we visit the production key static admin UI, we are in cloud mode. Alright. Deployment completed. So let's go and visit the site and visit key static. And I am hoping to see the cloud mode and that makes me super happy. So in summary, we are allowing remote [03:38] contributors to edit the site through KeyStatic Cloud and interface with the GitHub repository, but we also allow devs to pull the site locally and allow them to have a really quick dev loop and also enable them to edit codes directly to make content changes if they want.