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

    Use the Gatsby Theme Workspace Starter to Begin Building a New Theme

    Amberley RomoAmberley Romo
    gatsbyGatsby
    yarnYarn

    Yarn workspaces are a great way to set up a project for theme development because they support housing multiple packages in a single parent directory and link them together.

    This video will teach you:

    • How to use the Gatsby theme workspace starter to quickly set up a workspace to build a new Gatsby theme.

    Further reading

    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
    Transcript

    Transcript

    Instructor: 0:00 Set up a Yarn Workspace to build a new Gatsby theme using the Gatsby theme workspace starter. We'll copy the link to the starter and over in our terminal, run "Gatsby new, my theme workspace," and then the link to the starter.

    0:18 Then, CD into "my theme workspace," and open it up in your code editor. We have two directories, "Gatsby theme minimal" and "example." It's packaged at JSON here in the route. The route packaged at JSON sets up the Yarn Workspace.

    0:34 Here, we have "Gatsby theme minimal" and "example." These names correspond to the names defined in each project packaged at JSON, not the name of the directory. Back over in our terminal, if we run "Yarn Workspace's info," we'll see these workspaces that we've set up.

    0:56 Back over in our code, Gatsby-theme-minimal is the most minimal possible Gatsby theme. It defines a Gatsby config and also marks Gatsby as a peer dependency.

    1:07 Example is the minimal Gatsby site that does nothing but install and use gatsby-theme-minimal. Here, we're installing gatsby-theme-minimal and using it in our Gatsby config.

    1:20 Taking a look back at yarn workspaces info, we can see that gatsby-theme-minimal is a workspace dependency of example. Run the example site by using yarn workspace example develop.

    1:35 This command says run yarn. Target the workspace of example, and run the develop script.

    1:44 The example site is running. We're ready to start developing a new theme.

    Discuss

    Discuss