Update setup

qiaoxin136 · Sep 1, 2017 · e4e493d · e4e493d
1 parent 8c9f6ad
commit e4e493d
Show file tree

Hide file tree

Showing 8 changed files with 4,660 additions and 1,080 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
 node_modules/
 
-npm-debug.log*
+*.log*
 .DS_Store
diff --git a/src/demos/starting-code/app.js b/src/demos/starting-code/app.js
@@ -1,10 +1,12 @@
-/* global window */
 import React, {Component} from 'react';
 
-const MAPBOX_STYLE = 'mapbox://styles/uberdata/cive485h000192imn6c6cc8fc';
-// Set your mapbox token here
+const MAPBOX_STYLE = 'mapbox://styles/mapbox/dark-v9';
 const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
 
+if (!MAPBOX_TOKEN) {
+  alert('The mapbox token is not defined. Please export it in the terminal where you typed "npm start"')
+}
+
 export default class App extends Component {
 
   constructor(props) {
@@ -13,7 +15,11 @@ export default class App extends Component {
 
   render() {
     return (
-      <div className='p2'>Empty App, Edit Me!</div>
+      <div>
+        <div className='intro'>
+          Empty App, Edit Me!
+        </div>
+      </div>
     );
   }
 }
diff --git a/src/demos/starting-code/deckgl-overlay.js b/src/demos/starting-code/deckgl-overlay.js
diff --git a/src/demos/starting-code/index.html b/src/demos/starting-code/index.html
@@ -6,6 +6,8 @@
     <title>Visualization Tutorial - Starting Code</title>
     <style>
       body {margin: 0; padding: 0; overflow: hidden;}
+      #app-container { height: 100vh; }
+      .intro { position: absolute; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; }
     </style>
   </head>
   <body>

diff --git a/src/demos/starting-code/webpack.config.js b/src/demos/starting-code/webpack.config.js
@@ -1,7 +1,3 @@
-// NOTE: To use this example standalone (e.g. outside of deck.gl repo)
-// delete the local development overrides at the bottom of this file
-
-// avoid destructuring for older Node version support
 const resolve = require('path').resolve;
 const webpack = require('webpack');
 
@@ -25,13 +21,20 @@ module.exports = {
 
   resolve: {
     alias: {
-      // From mapbox-gl-js README. Required for non-browserify bundlers (e.g. webpack):
       'mapbox-gl$': resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
     }
   },
 
-  // Optional: Enables reading mapbox token from environment variable
   plugins: [
-    new webpack.EnvironmentPlugin(['MAPBOX_ACCESS_TOKEN', 'MapboxAccessToken'])
-  ]
+
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
+        MapboxAccessToken: JSON.stringify(
+          process.env.MapboxAccessToken || process.env.MAPBOX_TOKEN
+        ),
+      },
+    }),
+
+  ],
 };