Monorepo & Deployment Setup

[00:00:00]
>> Let's get our mono repo set up, so the first thing I'm gonna do is out in the main repo. And so this is something that's a little bit different from a non mono repo. If you're building in a standard way, you would put all of this the source folder, the Gatsby config, the package JSON, right on the root.

[00:00:20]
But because we're gonna be working on multiple packages one's gonna be the site, one's gonna be our theme, we need a way to differentiate those in our repo. So I created a folder for the site, and now we need to tell yarn that it exists, right? So we're gonna put another package JSON in the root and inside of it, we're gonna tell it, just the bare minimum that it needs to know.

[00:00:47]
So we wanna make sure that this doesn't get published to NPM, that is not what this is for. Then we're going to say that we're gonna use workspaces, and the way that workspaces work is we give them an array of folder names that are the workspaces we wanna use.

[00:01:05]
So I'm going to set site, which matches this here site, and that will tell yarn that we wanna use that particular site. Then, because I want some shortcuts, I'm gonna add some scripts. So my develop is going to run the site development command, and the reason I'm adding a shortcut, is it's a little verbose.

[00:01:26]
So if I run yarn workspace site develop, that's what will cause this site to run what you would run with NPM run develop or yarn develop. Because I don't wanna have to type that every time now I can do yarn develop, and it will run yarn workspace site develop.

[00:01:48]
Same thing with the build command, I just want to alias that, so yarn workspace site build. And that gives us our ability to shorthand NPM, run, develop NPM run build. And that's it for this so what we can do now is we can go over to our terminal, and I can install my dependencies.

[00:02:12]
So we start out by installing all of our dependencies, and what's interesting here is I ran this in the root. But because it saw this workspace, it went into this site, and found its dependencies as well. And so we can see here that all the stuff we need for Gatsby, is actually up here at the top level, instead of being in the site folder.

[00:02:35]
And that's really convenient because that also means when you're working with workspaces, if your packages share the same version of something, you don't have to install it twice. You'll just have one node modules folder, and then it kinda does this alias here so that we've got access to the Gatsby command inside of the site.

[00:02:55]
And then, now that we've got this set up, we can, We're gonna tell Netlify how to find our mono repo. So we're gonna create a new file called netlify..toml, and in this, we're just gonna tell this is for the CLI to know where the site is. So we're gonna set base site, and that's just to say when you build this, the site is what we're gonna publish.

[00:03:23]
The theme is a supporting file that will actually be installed by the site, so when we publish this mono repo the only thing that we want to build, is the site so we can move netlify into that folder. And finally, now that we've installed our dependencies, we can run netlify dev, and netlify dev is a CLI command that gives us a lot of power.

[00:03:46]
It auto detects what you're using, so it can see what framework we're using, we're using Gatsby. It runs the develop command for us, and you can see here that it's kinda doing some environment variable stuff, that'll become more useful later. So then it runs our Gatsby develop command, And once this is done here, it's actually gonna pop open a browser for us.

[00:04:13]
>> It has mauled out so, when we were setting up our yarn file write so what it was was it detects the package.JSON inside the site for our folder, right? So when we set up a couple of more folders like you said a theme, and maybe we are having a couple of themes.

[00:04:35]
So will the yarn file detect each and every package JSON or recursively, through those file structure and install all of the dependencies?
>> No so, what it will do is it will detect the ones that we've told it to so, we told it to look at site. And so it's gonna look in here and actually this is a good point, it uses the name in here, which can be kind of confusing.

[00:05:01]
So, when we did yarn workspace site develop, it's looking for this package name, and not the name of the folder. So that can be a little bit confusing, so if this folder was called websites but the package in here was called site, you would put website as the workspace.

[00:05:19]
But you would still run yarn workspace site develop, so that's why I always named the folders the same thing, cuz otherwise I get really confused and it has a hard time. If you want it to auto detect a whole group of things, you can do I think it's either a star or double star, we're not gonna use that today, but I have used it in the past.

[00:05:40]
It's documented well on the yarn workspaces docs if you wanna do that, but that will auto detect the packages inside of that folder. So that can be really nice if you're working on a mono repo that's got all of your your open source node packages or something like that, where you don't wanna have to explicitly declare each one.

[00:06:02]
Okay, so we're up and running, we've got the site is functioning now a slight difference Gatsby goes to 8,000 netlify dev goes to 8888. That's because it is running Gatsby at Port 1000 and then proxying it along with the serverless functions. So that way we were able to go in, and otherwise everything is exactly the same.

[00:06:22]
If we come in here and make a change, then it's auto updated everything happens very, very quickly. So great, we have a development environment, were up and running now.