Composable Gatsby Themes
Convert Gatsby Site to Yarn Workspace Project
Since we'll be building a number of themes we'll also take advantage of Yarn Workspaces to coordinate linking all of those packages where they need to go. This is especially useful if you plan on building a suite of themes.
Instructor: [00:00] To facilitate building themes, especially multiple themes that interact with each other, we're going to convert our project from it's typical Gatsby site as you see here, through Yarn works basis project. We'll make a directory called www and move all of the files into it.
[00:21] If you use move, note that we can't rename www to a folder called www/www because it's a reference to the same folder. Note that all of the other files have moved. We can now remove the yarn.lock in the www folder, as well be using one of the root of our project.
[00:42] We can also take the read me and put it the root of our project, but it doesn't matter a whole lot. This leaves us with a directory that is readMe.md and www, which includes our entire project. One thing to note that the .m.development file needs to be moved into the www folder.
[01:01] We use ls, a period, and then hit tab, we can see that the .env.development file is still in the root. We'll also initialize a new package.json in the root of our project. We need to add two fields to our package.json in the root of our project.
[01:21] The first field we've added is private. The root package.json in a yarn workspace's project will never be published, though it needs to have private true, which will prevent it from being published accidentally.
[01:33] We've also named a couple of workspaces. In this case, any folder inside of the packages directory or the package.json, is a valid package for our yarn workspaces. www itself is also a valid package. This is because our Gatsby site is a valid npm package.
[01:50] We'll also go into www and rename the package.json. This isn't strictly necessary, but it makes it easier for us when we're trying to run commands in the www workspace, to have it named as the same thing as the folder that contains it. To make sure that we're set up correctly, we can run Yarn in the root of our project.
[02:12] Now that we've installed our dependencies again, we can see a yarn.lock in the root of our project. We run develop like we did before. We use yarn workspace, the name of the workspace -- in this case, www -- develop, which is the name of the script in the www package.
[02:38] After reloading the site, we can check the blog to see our posts and check the swag store to see our Corgis. To recap, what we did is took our original Gatsby site and moved it into the WWW folder. We also set up WWW to work with Yarn workspaces so that we can run Yarn workspace WWW and then the name of a script in package.json.
[03:01] The final thing we'll do before moving on to the next less in create a packages directory. The packages directory is where we'll put all of our new themes.