Skip to content

Commit c63a614

Browse files
ziveoziveo
authored
Merge pull request #3 from gis-tools/develop
Develop
2 parents 3a73158 + d315fa5 commit c63a614

File tree

9 files changed

+289
-126
lines changed

9 files changed

+289
-126
lines changed

‎README.md‎

Lines changed: 41 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,55 @@
1-
# Create ESRI React App
1+
### Create ESRI React App
22

3-
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.
4-
Prerequisite for this application is Create React App already instaled in your developmant envirement. If that is not the case run
3+
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.
4+
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:
55

6-
```$xslt
6+
```
77
npm install -g create-react-app
88
```
99

1010

1111
### How to install Create ESRI React App
12-
To install Create ESRI React App application run
13-
```$xslt
12+
To install Create ESRI React App application run:
13+
```
1414
$ npm install create-esri-react-app -g
1515
- or -
1616
$ yarn global add create-esri-react-app
1717
```
1818

1919
### How to create new ESRI React App
20-
To create ESRI React application run
21-
```$xslt
20+
To create ESRI React application run:
21+
```
2222
$ create-esri-react-app app_name
23-
```
23+
```
24+
25+
It will create a directory called `app_name` inside the current folder.<br>
26+
Inside that directory, it will generate the initial project structure and install the transitive dependencies:
27+
28+
```
29+
app_name
30+
├── README.md
31+
├── node_modules
32+
├── package.json
33+
├── .gitignore
34+
├── public
35+
│ └── favicon.ico
36+
│ └── index.html
37+
│ └── manifest.json
38+
└── src
39+
└── App.css
40+
└── App.js
41+
└── App.test.js
42+
└── index.css
43+
└── index.js
44+
└── logo.svg
45+
└── registerServiceWorker.js
46+
```
47+
48+
### Information's related to Create React App
49+
Create React apps with no build configuration.
50+
51+
* [Getting Started](#getting-started) – How to create a new app.
52+
* [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.
53+
54+
Create React App works on macOS, Windows, and Linux.<br>
55+
If something doesn’t work please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new).

‎build/index.js‎

Lines changed: 37 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,47 @@
11
#!/usr/bin/env node
2+
23
'use strict';
34

45
var fs = require('fs');
56
var path = require('path');
6-
var bootstrapAppJs = __dirname + '/resources/App.js';
7-
var bootstrapAppHtml = __dirname + '/resources/index-api-3.html';
7+
var program = require('commander');
8+
9+
var bootstrapAppJs3 = __dirname + '/resources/App3.js';
10+
var bootstrapAppJs4 = __dirname + '/resources/App4.js';
11+
var bootstrapAppHtml3 = __dirname + '/resources/index-api-3.html';
12+
var bootstrapAppHtml4 = __dirname + '/resources/index-api-4.html';
813
var bootstrapAppCss = __dirname + '/resources/App.css';
9-
var redColor = '\x1b[32m';
14+
var greenColor = '\x1b[32m';
1015
var resetColor = '\x1b[0m';
1116
var currentWorkingDirectory = path.resolve('./');
17+
var bootstrapAppJs;
18+
var bootstrapAppHtml;
1219

13-
// Input from command line
14-
var appName = process.argv.slice(2);
20+
program.version('0.1.0').option('-a, --api [number]', 'Add API version', 4).parse(process.argv);
21+
22+
// Input app name from command line
23+
var appName = program.args[0];
24+
25+
if (program.api === '3') {
26+
bootstrapAppJs = bootstrapAppJs3;
27+
bootstrapAppHtml = bootstrapAppHtml3;
28+
} else {
29+
bootstrapAppJs = bootstrapAppJs4;
30+
bootstrapAppHtml = bootstrapAppHtml4;
31+
}
1532

1633
if (process.argv.length <= 2) {
17-
console.log('Run' + redColor + ' create-esri-react-app app_name' + resetColor);
34+
console.log('Run' + greenColor + ' create-esri-react-app app_name' + resetColor);
1835
} else {
1936

20-
/*
21-
* Move JS file
37+
/**
38+
* Move to App.js
2239
*/
2340
var moveAppJS = function moveAppJS(bootstrapFile, appName) {
2441
var source = fs.createReadStream(bootstrapFile);
25-
var dest = fs.createWriteStream('./' + appName + '/src/App.js');
42+
var destination = fs.createWriteStream('./' + appName + '/src/App.js');
2643

27-
source.pipe(dest);
44+
source.pipe(destination);
2845
source.on('end', function () {
2946
/* copied */
3047
});
@@ -33,11 +50,9 @@ if (process.argv.length <= 2) {
3350
});
3451
};
3552

36-
/*
37-
* Move CSS file
53+
/**
54+
* Move to App.css
3855
*/
39-
40-
4156
var moveAppCSS = function moveAppCSS(bootstrapFile, appName) {
4257
var source = fs.createReadStream(bootstrapFile);
4358
var dest = fs.createWriteStream('./' + appName + '/src/App.css');
@@ -51,11 +66,9 @@ if (process.argv.length <= 2) {
5166
});
5267
};
5368

54-
/*
55-
* Move HTML file
69+
/**
70+
* Move index.html file
5671
*/
57-
58-
5972
var moveAppHTML = function moveAppHTML(bootstrapFile, appName) {
6073
var source = fs.createReadStream(bootstrapFile);
6174
var dest = fs.createWriteStream('./' + appName + '/public/index.html');
@@ -70,24 +83,25 @@ if (process.argv.length <= 2) {
7083
};
7184

7285
/**
73-
* Execute commands
86+
* Execute CLI commands
7487
*/
7588
var exec = require('child_process').exec;
7689

7790
// Create react App
78-
console.log('Creating a new ESRI React App in ' + redColor + currentWorkingDirectory + '/' + appName + resetColor + '.');
91+
console.log('Creating a new ESRI React App in ' + greenColor + currentWorkingDirectory + '/' + appName + resetColor + '.');
92+
console.log(' - ESRI api v%s', program.api);
7993
var createEsriApp = 'create-react-app ' + appName;
8094
exec(createEsriApp, function (error, stdout, stderr) {
8195
var addModule = 'cd ' + appName + ' && yarn add esri-loader';
8296
exec(addModule, function (error, stdout, stderr) {
8397
console.log('');
84-
console.log('Success! ESRI React App ' + redColor + appName + resetColor + ' is created at ' + redColor + currentWorkingDirectory + resetColor + ' ');
98+
console.log('Success! ESRI React App ' + greenColor + appName + resetColor + ' is created at ' + greenColor + currentWorkingDirectory + resetColor + ' ');
8599
console.log('Inside that directory, you can run several commands:');
86100
console.log('');
87101
console.log('We suggest that you begin by typing:');
88102
console.log('');
89-
console.log(' ' + redColor + 'cd' + resetColor + ' ' + appName);
90-
console.log(' ' + redColor + 'yarn start' + resetColor);
103+
console.log(' ' + greenColor + 'cd' + resetColor + ' ' + appName);
104+
console.log(' ' + greenColor + 'yarn start' + resetColor);
91105
moveAppJS(bootstrapAppJs, appName);
92106
moveAppHTML(bootstrapAppHtml, appName);
93107
moveAppCSS(bootstrapAppCss, appName);

‎build/resources/App.js‎ renamed to ‎build/resources/App3.js‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,23 @@ if (!esriLoader.isLoaded()) {
1010
createMap();
1111
}
1212
}, {
13-
url: 'https://js.arcgis.com/3.21/'
13+
url: 'https://js.arcgis.com/3.21/' // Here you can change API version
1414
});
1515
} else {
1616
createMap();
1717
}
1818

1919
function createMap() {
20-
esriLoader.dojoRequire(
21-
[
22-
'esri/map'
23-
],
24-
(Map) => {
25-
let map = new Map('mapNode', {
26-
center: [-100, 30],
27-
zoom: 3,
28-
basemap: 'gray-vector'
29-
});
30-
window.map = map;
31-
32-
});
20+
esriLoader.dojoRequire([
21+
'esri/map'
22+
], (Map) => {
23+
let map = new Map('mapNode', {
24+
center: [-100, 30],
25+
zoom: 3,
26+
basemap: 'gray-vector'
27+
});
28+
window.map = map;
29+
});
3330
}
3431

3532
class App extends Component {
@@ -39,7 +36,7 @@ class App extends Component {
3936
<div className="App-header">
4037
<h1>Welcome to ESRI React App</h1>
4138
</div>
42-
<div id="mapNode" />
39+
<div id="mapNode"/>
4340
</div>
4441
);
4542
}

‎build/resources/App4.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React, {Component} from 'react';
2+
import './App.css';
3+
import * as esriLoader from 'esri-loader';
4+
5+
if (!esriLoader.isLoaded()) {
6+
esriLoader.bootstrap((err) => {
7+
if (err) {
8+
console.error(err);
9+
} else {
10+
createMap();
11+
}
12+
}, {
13+
// url: 'https://js.arcgis.com/4.4/' // Here you can change API version
14+
});
15+
} else {
16+
createMap();
17+
}
18+
19+
function createMap() {
20+
esriLoader.dojoRequire([
21+
"esri/Map",
22+
"esri/views/MapView"
23+
], function(Map, MapView){
24+
let map = new Map({
25+
basemap: "gray-vector"
26+
});
27+
window.map = map;
28+
let view = new MapView({
29+
map: map,
30+
container: "mapNode",
31+
basemap: 'gray-vector',
32+
center: [-100, 30],
33+
zoom: 3
34+
});
35+
});
36+
}
37+
38+
class App extends Component {
39+
render() {
40+
return (
41+
<div className="App">
42+
<div className="App-header">
43+
<h1>Welcome to ESRI React App</h1>
44+
</div>
45+
<div id="mapNode" />
46+
</div>
47+
);
48+
}
49+
}
50+
51+
export default App;

‎build/resources/index-api-3.html‎

Lines changed: 36 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,41 @@
1-
<!doctype html>
21
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
6-
<meta name="author" content="Bojan Zivkovic">
7-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
8-
<link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
9-
<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
2+
<head>
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5+
<meta name="theme-color" content="#000000">
6+
<meta name="author" content="Bojan Zivkovic">
7+
<link rel="preload stylesheet" href="https://js.arcgis.com/3.21/esri/css/main.css">
8+
<!--
9+
manifest.json provides metadata used when your web app is added to the
10+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11+
-->
12+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14+
<!--
15+
Notice the use of %PUBLIC_URL% in the tags above.
16+
It will be replaced with the URL of the `public` folder during the build.
17+
Only files inside the `public` folder can be referenced from the HTML.
1018
11-
<!--
12-
Notice the use of %PUBLIC_URL% in the tag above.
13-
It will be replaced with the URL of the `public` folder during the build.
14-
Only files inside the `public` folder can be referenced from the HTML.
19+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20+
work correctly both with client-side routing and a non-root public URL.
21+
Learn how to configure a non-root public URL by running `npm run build`.
22+
-->
23+
<title>Esri React App</title>
24+
</head>
25+
<body>
26+
<noscript>
27+
You need to enable JavaScript to run this app.
28+
</noscript>
29+
<div id="root"></div>
30+
<!--
31+
This HTML file is a template.
32+
If you open it directly in the browser, you will see an empty page.
1533
16-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
17-
work correctly both with client-side routing and a non-root public URL.
18-
Learn how to configure a non-root public URL by running `npm run build`.
19-
-->
20-
<title>Esri React App</title>
21-
</head>
22-
<body>
23-
<div id="root"></div>
24-
<!--
25-
This HTML file is a template.
26-
If you open it directly in the browser, you will see an empty page.
34+
You can add webfonts, meta tags, or analytics to this file.
35+
The build step will place the bundled scripts into the <body> tag.
2736
28-
You can add webfonts, meta tags, or analytics to this file.
29-
The build step will place the bundled scripts into the <body> tag.
30-
31-
To begin the development, run `npm start`.
32-
To create a production bundle, use `npm run build`.
33-
-->
34-
</body>
37+
To begin the development, run `npm start` or `yarn start`.
38+
To create a production bundle, use `npm run build` or `yarn build`.
39+
-->
40+
</body>
3541
</html>

‎build/resources/index-api-4.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5+
<meta name="theme-color" content="#000000">
6+
<meta name="author" content="Bojan Zivkovic">
7+
<link rel="preload stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
8+
<!--
9+
manifest.json provides metadata used when your web app is added to the
10+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11+
-->
12+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14+
<!--
15+
Notice the use of %PUBLIC_URL% in the tags above.
16+
It will be replaced with the URL of the `public` folder during the build.
17+
Only files inside the `public` folder can be referenced from the HTML.
18+
19+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20+
work correctly both with client-side routing and a non-root public URL.
21+
Learn how to configure a non-root public URL by running `npm run build`.
22+
-->
23+
<title>Esri React App</title>
24+
</head>
25+
<body>
26+
<noscript>
27+
You need to enable JavaScript to run this app.
28+
</noscript>
29+
<div id="root"></div>
30+
<!--
31+
This HTML file is a template.
32+
If you open it directly in the browser, you will see an empty page.
33+
34+
You can add webfonts, meta tags, or analytics to this file.
35+
The build step will place the bundled scripts into the <body> tag.
36+
37+
To begin the development, run `npm start` or `yarn start`.
38+
To create a production bundle, use `npm run build` or `yarn build`.
39+
-->
40+
</body>
41+
</html>

0 commit comments

Comments
 (0)