forked from uber-archive/vis-academy
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
adding instructions to setup a new coding environment (uber-archive#16)
- Loading branch information
Showing
6 changed files
with
249 additions
and
0 deletions.
There are no files selected for viewing
69 changes: 69 additions & 0 deletions
69
src/docs/installing-a-coding-environment/1-install-tools-windows.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
105
src/docs/installing-a-coding-environment/2-install-tools-mac.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.