• /
  • EnglishEspañol日本語한국어Português
  • Log inStart now

Set up your local build environment

Running the site locally makes testing and previewing large changes much easier. There are several things you need to do get this working. Fortunately, you only need to do this once.

Using the terminal and command line

On macOS, you can use the Terminal app to access your system's command line. (You can also access the terminal via VS Code.) The command line is an alternative to the graphical user interface.

Here are some basic terminal commands that might be useful:

  • pwd (print working directory): Use this to see your directory path.
  • ls (list): Shows the files in your current directory.
  • cd YOUR_DIRECTORY_PATH (change directory): Moves to another directory.
  • cd ..: Move one directory up in your path.

Enable VS Code in your terminal

It's handy to be able to open files from your terminal directly in VS Code. You may only use this a couple of times, but it's much nicer than trying to edit files in the terminal itself.

  1. Open Visual Studio Code.
  2. Press Command + Shift + P to open the command palette, then type install code, and then click Shell command: Install 'code' command in PATH.
  3. In your terminal, type code YOUR_FILENAME` to open that file in VS Code.

1. Use GitHub Desktop to set up your local repository

GitHub Desktop is a graphical tool for managing your branches, commits, and PRs. It's probably the most straightforward way to work with Git and GitHub.

  1. Install GitHub Desktop.
  2. Sign in to GitHub Desktop via your GitHub account. On Macs, click GitHub Desktop in the top left corner of your screen and select Preferences. Select the blue Sign In button, and follow the prompts in the browser window.
  3. Navigate to the Docs Site repository.
  4. Click the green Code button and select Open with GitHub Desktop.
  5. Choose the location where you want the repo. The default location for this folder is ~/Documents/github.
  6. Clone the entire repository to your local machine.

2. Enable full disk access

By default, it seems that macOS prevents the terminal from access to certain system folders, like Documents. Change this setting to make it easier to navigate in your file system via the terminal.

  1. Open System Preferences.
  2. Click Security & Privacy.
  3. In the left pane, scroll down until you find Full Disk Access and then select it.
  4. Click the lock in the bottom left corner and then enter the password you use to log in to your computer.
  5. In the list of apps, check the box next to Terminal (or whatever your default terminal application is).
  6. Click the lock to lock it.

3. Install Homebrew

Homebrew is a command line tool for installing other applications. It's also an easy way to keep command line software updated.

  1. Open your terminal.

  2. Copy and paste this command to your terminal:

    bash
    $
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

4. Install npm (Node.js package manager)

You need to install npm so that you can also install nvm (Node.js version manager). In your terminal, type brew install npm.

5. Install nvm (Node version manager)

Node version manager (nvm) is what you use to manage the version of Node.js installed on your computer. In your terminal, type npm i -g nvm.

6. Add nvm to your shell profile

In order to run the commands you need for your local build, you need to add the path to nvm to your shell profile.

On macOS, your shell is what interprets what you enter on the command line. The default macOS shell is Zsh. You need to tell your shell the directory where nvm is on your machine so you can run these commands from anywhere.

You do this by adding the following text to your .zshrc file, which is a config file for your shell.

  1. In your terminal, type code ~/.zshrc to open this file in VS Code.

  2. In the .zshrc file, copy and paste this text:

    bash
    $
    export NVM_DIR="$HOME/.nvm"
    $
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
    $
    [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
  3. Save the file.

7. Install Node.js

Once you've installed nvm, you can install the correct version of Node. Node, or Node.js, is the JavaScript engine that powers our Gatsby site and its dependencies. Type nvm use 18 to install Node.js version 16.

8. Install Yarn

Yarn is another package manager used to compile all of the files in the docs-website repo to build the site locally. Use npm to install Yarn. In your terminal, type npm i -g yarn.

Build the local site

Once you've installed all of these things in your terminal, you can run the site locally on your machine.

  1. In your terminal, type pwd to make sure you're in the docs-website repository directory.
  2. Type yarn to make sure all your Gatsby dependencies are up to date.
  3. Type yarn start to build the site locally.
  4. When the process finishes, in your web browser, go to http://localhost:8000.

When you run yarn start, your terminal outputs many lines of text. If your local build fails, the terminal output often provides a clue to what's gone wrong.

By default the site will build without any translated (jp, kr) pages. If you would like to build those pages as well, you can run yarn start:full.

Build part of the local site (faster)

If you would like to build the site even more quickly, you can opt to build a single folder (or as many as you'd like) instead of every doc on the site. This can be nice if you know you're working on an account doc for instance, you can build only the account folder. However, this means that if you try to visit a doc in a folder outside of what you specified, you'll see a 404.

To build one or more specific folders, add this variable to your yarn start command:

BUILD_FOLDERS=mlops yarn start or BUILD_FOLDERS=apm,logs,errors-inbox yarn start

Tips:

  • The folder(s) you specify must be at the root level of the /src/content/docs/ directory. This doesn't include any subdirectories. For example, browser is a valid folder, but browser-monitoring is not because it's a subdirectory of browser.
  • Make sure there are no spaces after the commas in your folder list. For example, type BUILD_FOLDERS=apis,infrastructure not BUILD_FOLDERS=apis, infrastructure.
Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.