Local Dev Environment Setup
Install Suggested Apps
- Install the iTerm2 app: https://www.iterm2.com/
- 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)"
- Install the SourceTree app: https://www.sourcetreeapp.com/
- Install the VS Code app: https://code.visualstudio.com/
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)
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?
- Make sure to highlight and copy the code snippet above ^ to your clipboard ( CMD + C )
- Edit your
.zshrcfile by typing in the following into iTERM and hitting enter:
- 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.
- Then, hit enter to give yourself a little breathing room and go ahead and paste in the two lines copied from earlier ( CMD + V)
- 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:
Finally, finish installing nvm:
nvm install lts/carbon # v8.9 + nvm alias default lts/carbon
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.
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:
Note: PHP 7.1 is technically fine if that's what you already have pre-installed.
brew install composer composer global require hirak/prestissimo
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
In iTerm, create a
sitesfolder on your machine if you don't already have one created.
cd ~/ mkdir sites cd sites
Now, clone down the Bolt repo locally (located in your
git clone https://github.com/bolt-design-system/bolt.git
Once the code has finished being cloned, in iTerm, change your working directory to be at the root of the Bolt codebase
Now, run the
setupnpm script command.
npm run 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!
- Finally, assuming you didn't get any errors during Step 4, you should be able to
apps/pattern-labfolder to get the code to compile, watch for changes, start up a local dev server, etc.
cd docs-site npm start
Note: seeing an error after running the
npm startcommand? Try clearing out your local dependencies by running
npm run cleanfrom the root of the repo and try running through the
npm run setupand
If you're still seeing issues, let us know!