Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Convert Gatsby Site to Yarn Workspace Project

    Chris BiscardiChris Biscardi
    gatsbyGatsby
    >=2.16.5

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.