Skip to content

Commit

Permalink
adding instructions to setup a new coding environment (uber-archive#16)
Browse files Browse the repository at this point in the history
  • Loading branch information
jckr authored Sep 28, 2017
1 parent aecda1e commit 04b5063
Show file tree
Hide file tree
Showing 6 changed files with 249 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
# Installing a coding environment - Windows

Before you get started with the lessons, you need to have number of tools installed on your machine. Here are detailed steps to get everything you need on Windows. If you are using MacOS, checkout [our MacOS guide instead](#/installing-a-coding-environment/installing-tools-mac).

## Get a text editor

First things first is to make sure you have a robust text editor. I am partial to [Sublime Text](https://www.sublimetext.com/3) but there are lots of other good options like [Visual Studio](https://code.visualstudio.com/), [Atom](https://atom.io) and many others.

## Get Node.js

The next step is to get [node.js](https://nodejs.org/en/download/). Simply follow the link to the Windows installer and follow instructions with default options.

When you are done, find the node.js command prompt in your start menu and type:

```
node -v
```

to make sure that it's installed. This command should return the version of the node.js you have installed.

## Get Git

Now, download [git for windows](https://git-scm.com/) and again, go through the installation with default settings.

Likewise, when you are done, from your node.js command prompt window, type:

```
git --version
```

and veryify that it's installed.

## Get a Mapbox token

If you are going to follow a tutorial that uses React-Map-GL, you will probably need a Mapbox token. Go to [Mapbox.com](http://mapbox.com) and sign up or sign in, then go to your account, and finally, click on API access tokens.

Either create a new token or copy the one you want to use.

Then, using our text editor from the first step, we're going to edit the file nodevars.bat found in the same folder where node.js was installed (probably C:\Program Files\nodejs).

After line 4, which should be something like
```
set "PATH=%APPDATA%\npm;%~dp0;%PATH%"
```

you're going to type

```
set "MapboxAccessToken=[your mapbox access token goes here]"
```

(you'll replace [your mapbox access token goes here] by the mapbox access token you just created or copied, and there's no brackets.)

Save this file.
It may be protected, in which case find it in the file explorer, remove security options and save again.

In your node.js command prompt window, type nodevars.

Then type:

```
set
```

And you should see your MapboxAccessToken.
Each time you will reopen your node.js command prompt, MapboxAccessToken will be already set.

Next, we're going to download the code files you need to follow the lesson. [Continue the setup here](#/installing-a-coding-environment/downloading-code-examples). (Note - this last step is the same for Mac and Windows)

105 changes: 105 additions & 0 deletions src/docs/installing-a-coding-environment/2-install-tools-mac.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
# Installing a coding environment - MacOS

Before you get started with the lessons, you need to have number of tools installed on your machine. Here are detailed steps to get everything you need on MacOS. If you are using Windows, checkout [our Windows guide instead](#/installing-a-coding-environment/installing-tools-windows).

The following instructions are written for a completely new machine, assuming that nothing you'll need is installed yet.

## Get a text editor

First things first is to make sure you have a robust text editor. I am partial to [Sublime Text](https://www.sublimetext.com/3) but there are lots of other good options like [Visual Studio](https://code.visualstudio.com/), [Atom](https://atom.io) and many others.

## Open terminal

Go to Finder, then in the top menu, select Go, then Utilities. You will find your terminal. Once open, right click on its icon in the dock bar and in the Options, select Keep in dock bar.

## Install Xcode command line tools

In your terminal prompt, type:

```
xcode-select --install
```

to install the Xcode command line tools.

Then, agree to the license:

```
sudo xcodebuild -license
```

Type in your password, page through the document then finally at the end, type agree.

## Install homebrew

Homebrew is what will enable us to install node and git in a minute.

In your terminal prompt, type (or, let's be real, copy/paste):
```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

## Get Node.js

Still in your terminal prompt, type:

```
brew install node
```

Then, at the prompt:

```
node -v
```

to make sure that it's installed. This command should return the version of the node.js you have installed.

## Get Git

Now, type:

```
brew install git
```

Likewise, when you are done, from your node.js command prompt window, type:

```
git --version
```

and veryify that it's installed.

## Get a Mapbox token

If you are going to follow a tutorial that uses React-Map-GL, you will probably need a Mapbox token. Go to [Mapbox.com](http://mapbox.com) and sign up or sign in, then go to your account, and finally, click on API access tokens.

Either create a new token or copy the one you want to use.

Next, we're going to put that token in your .bash_profile file so that you can access it when needed.

.bash_profile doesn't necessarily exist, on a new machine, it has to be created. So either find it (in your home folder) or create a new file.

There, add the line:

```
export MAPBOX_TOKEN="[your mapbox access token]"
```

(you'll replace [your mapbox access token goes here] by the mapbox access token you just created or copied, and there's no brackets.)

Save this file - if you are creating a new .bash_profile file, it should go in your home folder.
Close your terminal window and reopen it.

Now type:

```
echo $MAPBOX_TOKEN
```

And you should see your Mapbox access token.
Each time you will reopen your terminal, your access token will be present in your environment.

Next, we're going to download the code files you need to follow the lesson. [Continue the setup here](#/installing-a-coding-environment/3-cloning). (Note - this last step is the same for Mac and Windows)

51 changes: 51 additions & 0 deletions src/docs/installing-a-coding-environment/3-cloning.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
In the previous steps, we've installed:
- a code editor,
- node.js and npm,
- git,

we've obtained a mapbox token and we made sure it will be accessible each time you need it.

If you haven't accomplished this yet, that's how you do it:
- [on Windows](#/installing-a-coding-environment/1-install-tools-windows)
- [on MacOS](#/installing-a-coding-environment/2-install-tools-mac)

Next, we are going to get the code files that we need.

# Cloning the repository

All the code examples are stored on a github repository. To be able to follow the lessons, you will need to modify these examples on your local machine, which is why you need to get your own, local copy.

In your node.js command prompt window, type:

```
git clone https://github.com/uber-common/vis-academy.git
```

which will download your own copy from github.

After this is done, a copy of the vis-academy repo should be in the vis-academy folder.

# Verifying that everything works

We are going to build the app from the first lesson, "Building a Geospatial App", to make sure that everything works:

Type:

```
cd vis-academy/src/demos/building-a-geospatial-app/starting-code
npm install
```

This step can take a minute or two as all the dependencies are downloaded. When you have access to the prompt again, type:

```
npm run start
```

And open your browser at this address: http://localhost:3030/ - though a new browser should already be open.

If you see:
![empty app - Edit me!](images/setup/emtpy-app.png)

Congratulations! You are ready to enroll to the academy.
If the app cannot find your Mapbox token, it would let you know. Go back to the previous step and make sure it's set in your environment variables.
24 changes: 24 additions & 0 deletions src/mdRoutes.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
// Setup

import SetupWindows from
'docs/installing-a-coding-environment/1-install-tools-windows.md';
import SetupMac from
'docs/installing-a-coding-environment/2-install-tools-mac.md';
import SetupCloning from
'docs/installing-a-coding-environment/3-cloning.md';

// Building a geospatial app
import GeospatialAppSetup from
'docs/building-a-geospatial-app/0-setup.md';
Expand Down Expand Up @@ -42,6 +51,21 @@ import layoutEngine from 'docs/graph/3-layout-engine.md';
import interactionHover from 'docs/graph/4-interaction.md';

export default [{
name: 'Installing a coding environment',
desc: 'Prepare your machine for the Academy',
image: 'images/setup/setup.png',
path: '/installing-a-coding-environment',
data: [{
name: 'Installing tools - Windows',
markdown: SetupWindows
}, {
name: 'Installing tools - Mac',
markdown: SetupMac
}, {
name: 'Downloading code examples',
markdown: SetupCloning
}]
}, {
name: 'Building a Geospatial App',
desc: 'Learn how to create maps, layer data on top of them and draw charts with the Uber vis libraries.',
image: 'images/geospatial-app/geospatial-app.png',
Expand Down
Binary file added static/images/setup/empty-app.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/setup/setup.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 04b5063

Please sign in to comment.