Development Setup

#​Installing Tools

This guide currently assumes you are running MacOS. Guides for other operating systems are coming soon.

#​Terminal

There is a pre-installed terminal that you can use right away under Applications/Utilities/Terminal. This terminal is more than good enough for most of the things you will need to do in this guide.

If you would like to have a customizable terminal, you can install iTerm from Cloudfalre Self Service app. Or if you would like to have a minimalistic terminal, you can install Hyper.

#​Visual Studio Code

You can install it from Cloudflare Self Service app.

#​git

git is pre-installed already and we will use it later.

#​node.js

cloudflare.style follows the requirements of our core dash. This means that we will need a specific version of node.js. In order to achieve this in a controlled manner, we will be using Node Version Manager (nvm).

You can follow the official installation process here. Note on macOS, these tips might be helpful.

After installation, please verify your installation.

Then, run the following 2 command:

nvm install 14.15.3
nvm alias default 14.15.3

Lastly, run below command to verify that correct node version has been isntalled.

node --version
>> v14.15.3

#​yarn

You can follow the official installation process here.

#​cloudflared

This should have been installed during your orientation. You can verify whether it has been installed or not by running cloudflared --version in your terminal. If there is output of its version, that means you are good to go. Otherwise, please follow this guide to install cloudflared.

#​Authentication

#​Bitbucket

This step applies only if you haven't already authenticated with Bitbucket.

1. Generate your SSH key

ssh-keygen -t rsa -C "MY-NAME@cloudflare.com"

Press Enter to accept the default location and file name, followed by a passphrase that you can remember.

2. Copy your new SSH key to clipboard using cat ~/.ssh/id_rsa.pub | pbcopy — you’ll be pasting this into Bitbucket later.
3. Navigate to your Bitbucket SSH Keys section https://bitbucket.cfdata.org/plugins/servlet/ssh/account/keys.
4. Click “Add key”, paste in your key, click “Add key”.
5. Reference Bitbucket's SSH connection

# Create SSH configuration file if it doesn't exist yet
touch ~/.ssh/config

# Open the SSH configuration file
open ~/.ssh/config

Add below lines to the bottom of the file:

Host bitbucket.cfdata.org stash.cfops.it
  HostName git.cfdata.org
  ProxyCommand /usr/local/bin/cloudflared access ssh --hostname %h

#​Private Registry

Some of the components linked from the project are not public. In order to be able to run the project locally, you need to have access to our private registry.

First, get an Access token for the registry via cloudflared:

cloudflared access login https://registry.cloudflare-ui.com

This will give you a long access token that begins with ey. Take this token and export it as the shell variable NPM_TOKEN:

export NPM_TOKEN=eyTHE_BIG_TOKEN_FROM_LAST_STEP

Last, you'll update your ~/.npmrc file to point at the private registry. Make a backup of your .npmrc and then add the new lines as suggested from this Wiki article.

A more detailed how-to guide is available here. Note, each authenticated session expires after 1 week, and is only valid for the particular terminal instance it was exported for, otherwise you'll need to run through these steps again.

#​Using Yarn/npm with Cloudflare WARP

1. Download the Cloudflare CA file to a known location on your computer. For example, a directory named "pems" in your home directory.

2. Using Terminal, run the following commands.

yarn config set cafile "/path/to/Cloudflare_CA.pem"
npm config set cafile "/path/to/Cloudflare_CA.pem"

#​Clone and run the repository

Finally we are ready to clone the repository! In any folder of your choice, run the following command:

git clone ssh://git@bitbucket.cfdata.org:7999/design/cloudflare-style.git ./cloudflare-style

You will be prompted to be authenticated in the browser. After this, you should see something similar to the following of last 2 lines:

Receiving objects: 100% (2999/2999), 2.5 MiB | 10 MiB/s, done.
Resolving deltas: 100% (1999/1999), done.

Now let's navigate into the repository's folder by running cd cloudflare-style. Making sure that you are on the main branch by running git checkout main.

Finally in the same folder, run yarn && yarn develop. It will take a short while to compile the project. When you read You can now view cloudflare-style in the browser., now you can open a new tab in the browser and type in http://localhost:8000.

#​See also

• Hackathon presentation
• Getting started with the private registry