Pantheon Community

Component-based Design in Drupal with Emulsify, Storybook & Gatsby

Hi all! I’m working on implementing a Drupal project with a component library and design system. I’m considering using Emulsify v5, which includes Storybook JS, Webpack and Gatsby for the style guide.

So, to start this off… has anyone had any experience using this stack on Pantheon? I believe I’ll need to deploy a static version of Storybook to include it in the Pantheon environments for my team, but has anyone had a need to run Webpack commands (or yarn or npm) in the Pantheon environment? Is that even possible?

Thanks, and I look forward to hearing what folks have learned!
~ Kevin


We are using Gesso which uses some different tech, but with a similar mindset. It uses Pattern Lab, Webpack, and gulp (among other things) so we can build our sites with components.

You can’t run those kinds of commands on Pantheon, but apparently there are ways to run build commands via CI workflows, but we aren’t doing that just yet. Instead, we are doing the builds locally using gulp and then pushing the artifacts up to Pantheon.

By default, Pattern Lab itself is ignored by the gitignore file, as are the CSS and JS files because they assume you would be using a CI process. Eventually we will move to CI, but for now, I’m choosing to build locally and push those files up. For each developer who wants to work on the project, they have to pull down the code from Pantheon to local and run npm install to get all of the local packages needed to run the local builds. I hope this helps!


Thanks @CodeChefMarc, that does help! I actually tested out the same thing in a Pantheon sandbox with Gesso. Building locally and pushing everything up there worked fine and I’m glad you’re having success with it! However, we’re looking at using Emulsify with Storybook.js since the community is pretty robust, the theme is being actively maintained and it has some pretty shiny features compared to Pattern Lab (here’s an article that explains all about the new version of Emulsify).

I’ve found that Storybook.js seems to have a more complex method for outputting a static version that can be accessed via the same web server as the Drupal site, but it looks like that will be the nut I have to crack to get it to deploy successfully to Pantheon (and have a sharable Component Library).

BTW, I am planning to use a CI process and I was thinking the same thing about running the npm/yarn build commands as part of the CI build. I just need to learn how to do that and determine if it will still provide the necessary artifacts to run on Pantheon.
Thanks again for your comment Marc! Anyone else out there playing with these toys?

1 Like

Thanks, @kbearcreation! I’ll check it out. Always looking to learn something new! And good luck with your plan to get this on Pantheon - definitely post back here again if you figure it out. :slight_smile:

1 Like

Hi, Kevin! I just happened to find this thread via Google. I have three Drupal sites that I’ve started recently that are using Emulsify v5 and Storybook (I’ve left the Gatsby part of it out at least for now, in part because I had trouble trying to get it installed), all hosted on Pantheon. Two of them are client sites, but I can share the third one, which is for a side project: (I haven’t started integrating it into Drupal just yet.)

I’m doing the same process you suggested as well: when I want to update the static version of Storybook on the Pantheon environment, I run yarn build-storybook locally to compile it into the /storybook directory, then push that up. The sites are built off of Pantheon Build Tools, so it goes into Bitbucket, then CircleCI carries it into Pantheon after some tests. I only run Yarn or NPM commands locally; nothing needs to happen directly on the Pantheon environment.

Eventually, I want to have a CI job that builds Storybook for me on every deploy, but I had too much trouble trying to figure it out and not enough time to troubleshoot. I have similar hopes/plans to have it deploy to Chromatic, a UI feedback and testing tool we’re using on one of the client projects for collaborative reviews among multiple developers.

Hope that helps! Happy to try to answer any more questions you might have.

1 Like