Right-Click → View Page Source

How to Configure Yarn on Netlify

Netlify Build is a great platform for running static site builds in conjunction with your Git workflow and Headless CMS content updates (via Webhooks). It makes running cloud-based builds of JavaScript Static Site Generators very slick, but it's not without its pitfalls.

Many of the popular generators use Yarn as a package manager which can be configured via Netlify's netlify.toml configuration file, like so:-

# netlify.toml

[build.environment]
  YARN_VERSION = "1.17.3"
  NODE_ENV = "production"

Note: the "Yarn approved" method of specifying the required version is via the yarn policies set-version command.

Running the build step in an environment other than local development had me wondering whether to install packages as dependencies or devDependencies. With the environment variable NODE_ENV set to "production" Yarn will only install dependencies specified in the dependencies section of the package.json file, and not those within devDependencies.

Perhaps NODE_ENV could be set to "production" within the scope of the build command? For example:-

{
  "scripts": {
    "build": "NODE_ENV=production ..."
  }
}

The cleanest solution (in my humble opinion) is to set the --production flag to false, like so:-

# netlify.toml

[build.environment]
  YARN_VERSION = "1.17.3"
  YARN_FLAGS = "--production=false"
  NODE_ENV = "production"

You can find out more about configuring build environment variables within the Netlify documentation.

Join the converstation on the DEV Community or send a Webmention

About the author

A profile photo of Saul Hardman

Saul Hardman is a contract front-end web developer based in Copenhagen, Denmark. During his career he's worked with the likes of The Guardian, UNIT9, and AllofUs. As of now he's helping Realla with front-end architecture, performance, and technical SEO.

To stay up to date, follow Saul on Twitter and GitHub or subscribe to the RSS feed.

Webmentions

  1. This a response via Twitter that _might_ become a Webmention.