ALTERNATE UNIVERSE DEV

CodePen Radio

#310: Front-End Monorepo

We talked about our transition to a monorepo back in episode 305. This move has all sorts of advantages for us, like the simplicity of having a single repo to pull and be up to date with and linting/formatting code in a consistent way across the entire code base of CodePen.

This time we’ll get into more of the repercussions of the monorepo from a front-end perspective. For example, since a bit part of the point of the monorepo is sharing code across areas of the site, it made sense to yoink out things that are intentionally sharable into top-level folders. For example, we pulled out our component library that way, then had to figure out how best to consume those components across different areas (e.g. how Next.js consumes those components is different than how our Rails app does. We also pulled out things like common utilities, icons, and shared styles, each of them having their own little journey on getting to work just how we wanted them to.

Timestamps

  • 00:30 More Monorepo
  • 01:46 Benefits of monorepo
  • 04:48 Choices we made about the CodePen code
  • 07:06 Problems with combining packages
  • 09:45 What about Next?
  • 15:48 Sponsor: Jetpack
  • 18:04 CP Library of components
  • 23:00 Sharing global styles
  • 27:52 Icon library

Sponsor: Jetpack

Jetpack is celebrating it’s 10th year! Jetpack does a lot, from major search improvements, full site backup, social media integration, speed boosts, and security measures. Take a look at some of those statistics on their landing page. They are really helping WordPress site owners make their sites better and the web writ large.

Episode source