Merge pull request #3 from gis-tools/develop

Develop
gis-tools · Aug 2, 2017 · c63a614 · c63a614
2 parents 3a73158 + d315fa5
commit c63a614
Show file tree

Hide file tree

Showing 9 changed files with 289 additions and 126 deletions.
diff --git a/README.md b/README.md
@@ -1,23 +1,55 @@
-# Create ESRI React App
+### Create ESRI React App
 
-Goal of Create ESRI React App is to connect ESRI and React application with minimal effort by using **create-react-app** to create react application and **esri-loader** to add the ArcGIS JS API to React app.
-Prerequisite for this application is Create React App already instaled in your developmant envirement. If that is not the case run 
+Goal of Create ESRI React App is to connect ESRI and React application with minimal effort by using **[create-react-app](https://github.com/facebookincubator/create-react-app)** to create react application and **[esri-loader](https://github.com/Esri/esri-loader)** to add the ArcGIS JS API to React app.
+A prerequisite for this application is Create React App already installed in your development environment. If Create React App is not installed on your system run: 
 
-```$xslt
+```
 npm install -g create-react-app
 ```  
 
 
 ### How to install Create ESRI React App 
-To install Create ESRI React App application run
-```$xslt
+To install Create ESRI React App application run:
+```
 $ npm install create-esri-react-app -g
 - or -
 $ yarn global add create-esri-react-app
 ```
 
 ### How to create new ESRI React App 
-To create ESRI React application run
-```$xslt
+To create ESRI React application run:
+```
 $ create-esri-react-app app_name
-```
+```
+
+It will create a directory called `app_name` inside the current folder.<br>
+Inside that directory, it will generate the initial project structure and install the transitive dependencies:
+
+```
+app_name
+├── README.md
+├── node_modules
+├── package.json
+├── .gitignore
+├── public
+│   └── favicon.ico
+│   └── index.html
+│   └── manifest.json
+└── src
+    └── App.css
+    └── App.js
+    └── App.test.js
+    └── index.css
+    └── index.js
+    └── logo.svg
+    └── registerServiceWorker.js
+```
+
+### Information's related to Create React App
+Create React apps with no build configuration.
+
+* [Getting Started](#getting-started) – How to create a new app.
+* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
+
+Create React App works on macOS, Windows, and Linux.<br>
+If something doesn’t work please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new).
diff --git a/build/index.js b/build/index.js
@@ -1,30 +1,47 @@
 #!/usr/bin/env node
+
 'use strict';
 
 var fs = require('fs');
 var path = require('path');
-var bootstrapAppJs = __dirname + '/resources/App.js';
-var bootstrapAppHtml = __dirname + '/resources/index-api-3.html';
+var program = require('commander');
+
+var bootstrapAppJs3 = __dirname + '/resources/App3.js';
+var bootstrapAppJs4 = __dirname + '/resources/App4.js';
+var bootstrapAppHtml3 = __dirname + '/resources/index-api-3.html';
+var bootstrapAppHtml4 = __dirname + '/resources/index-api-4.html';
 var bootstrapAppCss = __dirname + '/resources/App.css';
-var redColor = '\x1b[32m';
+var greenColor = '\x1b[32m';
 var resetColor = '\x1b[0m';
 var currentWorkingDirectory = path.resolve('./');
+var bootstrapAppJs;
+var bootstrapAppHtml;
 
-// Input from command line
-var appName = process.argv.slice(2);
+program.version('0.1.0').option('-a, --api [number]', 'Add API version', 4).parse(process.argv);
+
+// Input app name from command line
+var appName = program.args[0];
+
+if (program.api === '3') {
+  bootstrapAppJs = bootstrapAppJs3;
+  bootstrapAppHtml = bootstrapAppHtml3;
+} else {
+  bootstrapAppJs = bootstrapAppJs4;
+  bootstrapAppHtml = bootstrapAppHtml4;
+}
 
 if (process.argv.length <= 2) {
-  console.log('Run' + redColor + ' create-esri-react-app app_name' + resetColor);
+  console.log('Run' + greenColor + ' create-esri-react-app app_name' + resetColor);
 } else {
 
-  /*
-   * Move JS file
+  /**
+   *  Move to App.js
    */
   var moveAppJS = function moveAppJS(bootstrapFile, appName) {
     var source = fs.createReadStream(bootstrapFile);
-    var dest = fs.createWriteStream('./' + appName + '/src/App.js');
+    var destination = fs.createWriteStream('./' + appName + '/src/App.js');
 
-    source.pipe(dest);
+    source.pipe(destination);
     source.on('end', function () {
       /* copied */
     });
@@ -33,11 +50,9 @@ if (process.argv.length <= 2) {
     });
   };
 
-  /*
-   * Move CSS file
+  /**
+   *  Move to App.css
    */
-
-
   var moveAppCSS = function moveAppCSS(bootstrapFile, appName) {
     var source = fs.createReadStream(bootstrapFile);
     var dest = fs.createWriteStream('./' + appName + '/src/App.css');
@@ -51,11 +66,9 @@ if (process.argv.length <= 2) {
     });
   };
 
-  /*
-   * Move HTML file
+  /**
+   *  Move index.html file
    */
-
-
   var moveAppHTML = function moveAppHTML(bootstrapFile, appName) {
     var source = fs.createReadStream(bootstrapFile);
     var dest = fs.createWriteStream('./' + appName + '/public/index.html');
@@ -70,24 +83,25 @@ if (process.argv.length <= 2) {
   };
 
   /**
-   * Execute commands
+   * Execute CLI commands
    */
   var exec = require('child_process').exec;
 
   // Create react App
-  console.log('Creating a new ESRI React App in ' + redColor + currentWorkingDirectory + '/' + appName + resetColor + '.');
+  console.log('Creating a new ESRI React App in ' + greenColor + currentWorkingDirectory + '/' + appName + resetColor + '.');
+  console.log('    - ESRI api v%s', program.api);
   var createEsriApp = 'create-react-app ' + appName;
   exec(createEsriApp, function (error, stdout, stderr) {
     var addModule = 'cd ' + appName + ' && yarn add esri-loader';
     exec(addModule, function (error, stdout, stderr) {
       console.log('');
-      console.log('Success! ESRI React App ' + redColor + appName + resetColor + ' is created at ' + redColor + currentWorkingDirectory + resetColor + ' ');
+      console.log('Success! ESRI React App ' + greenColor + appName + resetColor + ' is created at ' + greenColor + currentWorkingDirectory + resetColor + ' ');
       console.log('Inside that directory, you can run several commands:');
       console.log('');
       console.log('We suggest that you begin by typing:');
       console.log('');
-      console.log('    ' + redColor + 'cd' + resetColor + ' ' + appName);
-      console.log('    ' + redColor + 'yarn start' + resetColor);
+      console.log('    ' + greenColor + 'cd' + resetColor + ' ' + appName);
+      console.log('    ' + greenColor + 'yarn start' + resetColor);
       moveAppJS(bootstrapAppJs, appName);
       moveAppHTML(bootstrapAppHtml, appName);
       moveAppCSS(bootstrapAppCss, appName);

diff --git a/build/resources/App.js → build/resources/App3.js b/build/resources/App.js → build/resources/App3.js
@@ -10,26 +10,23 @@ if (!esriLoader.isLoaded()) {
       createMap();
     }
   }, {
-    url: 'https://js.arcgis.com/3.21/'
+    url: 'https://js.arcgis.com/3.21/' // Here you can change API version
   });
 } else {
   createMap();
 }
 
 function createMap() {
-  esriLoader.dojoRequire(
-      [
-        'esri/map'
-      ],
-      (Map) => {
-        let map = new Map('mapNode', {
-          center: [-100, 30],
-          zoom: 3,
-          basemap: 'gray-vector'
-        });
-        window.map = map;
-
-      });
+  esriLoader.dojoRequire([
+    'esri/map'
+  ], (Map) => {
+    let map = new Map('mapNode', {
+      center: [-100, 30],
+      zoom: 3,
+      basemap: 'gray-vector'
+    });
+    window.map = map;
+  });
 }
 
 class App extends Component {
@@ -39,7 +36,7 @@ class App extends Component {
           <div className="App-header">
             <h1>Welcome to ESRI React App</h1>
           </div>
-          <div id="mapNode" />
+          <div id="mapNode"/>
         </div>
     );
   }

diff --git a/build/resources/App4.js b/build/resources/App4.js
@@ -0,0 +1,51 @@
+import React, {Component} from 'react';
+import './App.css';
+import * as esriLoader from 'esri-loader';
+
+if (!esriLoader.isLoaded()) {
+  esriLoader.bootstrap((err) => {
+    if (err) {
+      console.error(err);
+    } else {
+      createMap();
+    }
+  }, {
+    // url: 'https://js.arcgis.com/4.4/' // Here you can change API version
+  });
+} else {
+  createMap();
+}
+
+function createMap() {
+  esriLoader.dojoRequire([
+    "esri/Map",
+    "esri/views/MapView"
+  ], function(Map, MapView){
+    let map = new Map({
+      basemap: "gray-vector"
+    });
+    window.map = map;
+    let view = new MapView({
+      map: map,
+      container: "mapNode",
+      basemap: 'gray-vector',
+      center: [-100, 30],
+      zoom: 3
+    });
+  });
+}
+
+class App extends Component {
+  render() {
+    return (
+        <div className="App">
+          <div className="App-header">
+            <h1>Welcome to ESRI React App</h1>
+          </div>
+          <div id="mapNode" />
+        </div>
+    );
+  }
+}
+
+export default App;
diff --git a/build/resources/index-api-3.html b/build/resources/index-api-3.html
@@ -1,35 +1,41 @@
-<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
-    <meta name="author" content="Bojan Zivkovic">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
-    <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <meta name="author" content="Bojan Zivkovic">
+  <link rel="preload stylesheet" href="https://js.arcgis.com/3.21/esri/css/main.css">
+  <!--
+    manifest.json provides metadata used when your web app is added to the
+    homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+  -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <!--
+    Notice the use of %PUBLIC_URL% in the tags above.
+    It will be replaced with the URL of the `public` folder during the build.
+    Only files inside the `public` folder can be referenced from the HTML.
 
-    <!--
-      Notice the use of %PUBLIC_URL% in the tag above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
+    Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+    work correctly both with client-side routing and a non-root public URL.
+    Learn how to configure a non-root public URL by running `npm run build`.
+  -->
+  <title>Esri React App</title>
+</head>
+<body>
+<noscript>
+  You need to enable JavaScript to run this app.
+</noscript>
+<div id="root"></div>
+<!--
+  This HTML file is a template.
+  If you open it directly in the browser, you will see an empty page.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>Esri React App</title>
-  </head>
-  <body>
-  <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
+  You can add webfonts, meta tags, or analytics to this file.
+  The build step will place the bundled scripts into the <body> tag.
 
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start`.
-      To create a production bundle, use `npm run build`.
-    -->
-  </body>
+  To begin the development, run `npm start` or `yarn start`.
+  To create a production bundle, use `npm run build` or `yarn build`.
+-->
+</body>
 </html>
diff --git a/build/resources/index-api-4.html b/build/resources/index-api-4.html
@@ -0,0 +1,41 @@
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <meta name="author" content="Bojan Zivkovic">
+  <link rel="preload stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
+  <!--
+    manifest.json provides metadata used when your web app is added to the
+    homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+  -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <!--
+    Notice the use of %PUBLIC_URL% in the tags above.
+    It will be replaced with the URL of the `public` folder during the build.
+    Only files inside the `public` folder can be referenced from the HTML.
+
+    Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+    work correctly both with client-side routing and a non-root public URL.
+    Learn how to configure a non-root public URL by running `npm run build`.
+  -->
+  <title>Esri React App</title>
+</head>
+<body>
+<noscript>
+  You need to enable JavaScript to run this app.
+</noscript>
+<div id="root"></div>
+<!--
+  This HTML file is a template.
+  If you open it directly in the browser, you will see an empty page.
+
+  You can add webfonts, meta tags, or analytics to this file.
+  The build step will place the bundled scripts into the <body> tag.
+
+  To begin the development, run `npm start` or `yarn start`.
+  To create a production bundle, use `npm run build` or `yarn build`.
+-->
+</body>
+</html>