running-eui-locally.md

Setting up and running EUI locally

The below instructions run EUI's documentation site locally, with any changes made in src/ reflected. On local, EUI's favicon will be gray instead of colored.

Important

This repository is a monorepo, meaning that it contains sources of multiple packages within a single git repository. You can find all packages in the packages directory. When dealing with EUI (@elastic/eui package), most of the work will be done from within the packages/eui directory.

Set up

Node

We depend upon the version of node defined in .nvmrc.

You will probably want to install a node version manager. nvm is recommended.

To install and use the correct node version with nvm:

nvm install

Dependencies

EUI uses Yarn v4 for dependency management. We use npm for release purposes only.

Unlike Yarn Classic and other package managers, Yarn v4 isn't supposed to be installed globally. Instead, it utilizes corepack - a modern way to manage package managers built straight into Node.js.

First, enable corepack:

corepack enable

yarn is now configured on your machine, and you can use it just like any other CLI command. Corepack will always use the right Yarn version, even when switching branches.

With yarn set up and ready to go, use it to install EUI dependencies:

yarn

Remember to run yarn whenever you're switching branches to ensure all dependencies are installed and have correct versions.

Puppeteer issues

If you're on an Apple arm64 machine and receive an error on yarn about Puppeteer/the chromium binary not being available, you have two options:

1. If you don't need to run Puppeteer tests locally:
   • Paste PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true into your terminal as an environment variable
2. If you do need need to run Puppeteer locally:
   • Follow these steps to install the Chromium binary globally and update your ~/.zshrc.

Running

Go to packages/eui directory:

cd packages/eui

You can run the documentation locally at http://localhost:8030/ with the following command:

yarn start

If another process is already listening on port 8030, the next free port will be used. Alternatively, you can specify a port:

yarn start --port 9000

VSCode setup

Eslint

If you're developing in VSCode and you are using the ESLint extension for VSCode you will notice that ESLint is showing errors about not finding config files since the monorepo setup changes. To fix this add eslint.workingDirectories to your VSCode settings and pass all working directories as relative paths.

{
  "eslint.workingDirectories": ["./packages/eui"]
}