Edit on Github

Local Dev Environment Setup

Install Suggested Apps

  1. Install the iTerm2 app: https://www.iterm2.com/
  2. Next, install oh-my-zsh: https://github.com/robbyrussell/oh-my-zsh#basic-installation
    # Paste this into iTerm
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
  3. Install the SourceTree app: https://www.sourcetreeapp.com/
  4. Install the VS Code app: https://code.visualstudio.com/

Install Dependencies

1. Install Homebrew: https://brew.sh/

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. Install Git

brew install git

3. Install NodeJS and NPM (via NVM)

brew install nvm

Once that finishes, create NVM's working directory (if it doesn't exist)

mkdir ~/.nvm

Now update your ~/.zshrc config by pasting in the following to iTerm:

echo 'export NVM_DIR="$HOME/.nvm"
  . "/usr/local/opt/nvm/nvm.sh"' >> ~/.zshrc
Pro Tip: Need a little help adding those 2 lines to your `.zshrc` config file?

Did that previous command not automatically update your config file for some reason?

  1. Make sure to highlight and copy the code snippet above ^ to your clipboard ( CMD + C )
  2. Edit your .zshrc file by typing in the following into iTERM and hitting enter: nano ~/.zshrc
  3. Next, go to the very bottom to your .zshrc config file by pressing CONTROL + V a few times to quickly jump to the bottom of the file.
  4. Then, hit enter to give yourself a little breathing room and go ahead and paste in the two lines copied from earlier ( CMD + V)
  5. Finally, save and exit by pressing CONTROL + X, Hitting Y, then pressing enter to comform overwriting your .zshrc file

Next, with your .zshrc config updated, restart your iTerm instance:

source ~/.zshrc

Finally, finish installing nvm:

nvm install 12.16
nvm alias default 12.16

Please note that Bolt currently does not support Node v12.18, we are currently working on a solution.

4. Install PHP and PHP Dependencies

brew install php72

After upgrading PHP, be sure to restart your iTerm instance. Otherwise, an old PHP version may still be linked, and composer will install mismatched packages.

brew install composer
composer global require hirak/prestissimo

Attention PHP 7.3 users

In you are using PHP 7.3 you will must update yours php.ini and disable PHP PCRE JIT compilation by replacing this line:

;pcre.jit=1

to

pcre.jit=0

Note: PHP 7.1 is technically fine if that's what you already have pre-installed.

5. Install GD and Imagick (used for generating responsive images in the build process)

brew install imagemagick
brew install graphicsmagick

6. Finally, install Yarn

brew install yarn

Pro Tip: Already have Yarn installed? Awesome! Make sure you're running the latest version by running brew update yarn

Pulling Down, Installing and Running Bolt Locally

  1. In iTerm, create a sites folder on your machine if you don't already have one created.

    cd ~/
mkdir sites
cd sites

  2. Now, clone down the Bolt repo locally (located in your ~/sites/bolt folder):

    git clone https://github.com/bolt-design-system/bolt.git

  3. Once the code has finished being cloned, in iTerm, change your working directory to be at the root of the Bolt codebase

    cd bolt

  4. Now, run the setup command.

yarn setup

This performs all the setup and install tasks needed to run the Bolt docs and Pattern Lab environments locally. Note: this'll probably take a couple minutes to run the very first time without having anything pre-installed or cached locally. It's much faster subsequently!

  1. Finally, assuming you didn't get any errors during Step 4, you can run the start command to get the code to compile, watch for changes, start up a local dev server, etc.
    yarn start

Note: seeing an error after running the yarn start command? Try clearing out your local dependencies by running yarn clean from the root of the repo and try running through the yarn setup and yarn start commands.

If you're still seeing issues, let us know!