diff --git a/docs/demos/starting-with-map.md b/docs/demos/starting-with-map.md index f83b95a6..9ca7a5fa 100644 --- a/docs/demos/starting-with-map.md +++ b/docs/demos/starting-with-map.md @@ -11,8 +11,9 @@ Checkout the complete code for this step ## 1. Start with a bare React Component -Checkout the starting code here -[here](https://github.com/uber-common/vis-tutorial/tree/master/demos/starting-code). +**HOLD UP!!!** If you got here without reading the **Setup** step, it is +highly recommended that you do so, or your application might not work. +[GO HERE](/#/setup) and go through it now. The app component in the starting code above currently looks like this: ```js diff --git a/docs/setup.md b/docs/setup.md new file mode 100644 index 00000000..027c4c61 --- /dev/null +++ b/docs/setup.md @@ -0,0 +1,50 @@ +Before we go through the tutorial, let's make sure we have everything necessary +in order to make this as smooth as possible. + +## 1. Getting a Mapbox Token + +You need a free Mapbox token in order to get the map to load. +Head over to [Mapbox](https://www.mapbox.com/help/define-access-token/) and get +one now. + +Once you have it, set the token in your environment (whichever terminal you will +use to run the tutorial from). +``` +export MapboxAccessToken= +``` + +## 2. Cloning and Running Starting Code + +In order to do live coding, you can use the example starting code we provide. +Clone our tutorial repository and go through the usual setup steps. NOTE: you +need to be running node **>=v6** locally. +``` +git clone https://github.com/uber-common/vis-tutorial.git +... +cd vis-tutorial +npm install OR yarn +... +npm run start +``` + +A page should automatically be opened in your browser, which looks very similar +to the page you see now. + +**But with a caveat** + +There should now be a new link called **Live Code Playground** right after +**Welcome!**. This is rendering our starting code, which we will build into +a nice visualization app as the tutorial progresses. Every change you make will +be rendered on this page (assuming you keep the local node instance running). + +## 3. Open Starting Code in your Text Editor + +You can now point your text editor to the following file: + +``` +vis-tutorial/demos/starting-code/app.js +``` + +It's an empty component! `starting-code` will be the folder that holds all your +changes as you go through the tutorial. You can now head to the next step: +[Starting With A Map](/#/react-map/starting-with-map). diff --git a/src/constants/pages.js b/src/constants/pages.js index 1ccefccd..45fabfef 100644 --- a/src/constants/pages.js +++ b/src/constants/pages.js @@ -36,6 +36,10 @@ export const docPages = generatePath([ env: 'development', content: getDocUrl('demos/live-code.md') }, + { + name: 'Setup - READ ME FIRST', + content: getDocUrl('setup.md') + }, { name: 'React Map GL', children: [