├── .babelrc
├── .gitignore
├── README.md
├── package.json
├── src
├── components
│ ├── header.js
│ └── webmapview.js
├── config.js
├── css
│ ├── index.scss
│ └── main.scss
└── index.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-env", "@babel/preset-react"],
3 | "plugins": ["@babel/plugin-transform-modules-amd"]
4 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/*
2 | release/*
3 | dist/*
4 | build/*
5 | .cache-loader/*
6 |
7 | package-lock.json
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Sample app using @arcgis/webpack-plugin
2 |
3 | This sample application uses the [`@arcgis/webpack-plugin`](https://github.com/esri/arcgis-webpack-plugin) using the [babel-loader](https://github.com/babel/babel-loader).
4 |
5 | [Video](https://youtu.be/gTFZgLYegDY)
6 |
7 | ## install dependencies
8 | ```
9 | npm install
10 | ```
11 |
12 | ## start dev server
13 | ```
14 | npm start
15 | ```
16 |
17 |
18 | ## generate a build
19 | ```
20 | npm run build
21 | ```
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jsapi-webpack",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "postinstall": "del-cli .cache-loader/**",
8 | "build": "webpack --mode=production",
9 | "start": "webpack-dev-server --mode=development --open"
10 | },
11 | "keywords": [],
12 | "author": "",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "@arcgis/webpack-plugin": "^4.14.1",
16 | "@babel/core": "^7.8.4",
17 | "@babel/plugin-transform-modules-amd": "^7.8.3",
18 | "@babel/preset-env": "^7.8.4",
19 | "@babel/preset-react": "^7.8.3",
20 | "@dojo/shim": "2.0.0",
21 | "@types/arcgis-js-api": "^4.14.0",
22 | "@types/react": "^16.9.19",
23 | "@types/react-dom": "^16.9.5",
24 | "babel-loader": "^8.0.6",
25 | "babel-plugin-transform-es2015-modules-amd": "^6.24.1",
26 | "cache-loader": "^4.1.0",
27 | "calcite-web": "github:Esri/calcite-web#v1.0.0-rc.8",
28 | "css-loader": "^3.4.2",
29 | "del-cli": "^3.0.0",
30 | "file-loader": "^5.0.2",
31 | "html-webpack-plugin": "^3.2.0",
32 | "mini-css-extract-plugin": "^0.9.0",
33 | "node-sass": "^4.13.1",
34 | "sass-loader": "^8.0.2",
35 | "sass-resources-loader": "^2.0.1",
36 | "url-loader": "^3.0.0",
37 | "webpack": "^4.41.6",
38 | "webpack-cli": "^3.3.11",
39 | "webpack-dev-server": "^3.10.3"
40 | },
41 | "dependencies": {
42 | "react": "^16.12.0",
43 | "react-dom": "^16.12.0"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/components/header.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const CSS = {
4 | base: "top-nav fade-in",
5 | title: "top-nav-title margin-left-1",
6 | titlePhoneHide: "phone-hide"
7 | };
8 |
9 | export const Header = (props) =>
10 |
11 | ArcGIS {props.appName}
12 |
13 |
--------------------------------------------------------------------------------
/src/components/webmapview.js:
--------------------------------------------------------------------------------
1 | import SceneView from "esri/views/SceneView";
2 | import React from "react";
3 |
4 |
5 | export class WebMapComponent extends React.Component {
6 | componentDidMount() {
7 | const view = new SceneView({
8 | map: this.props.webmap,
9 | container: this.mapDiv
10 | });
11 | this.props.onload(view);
12 | }
13 |
14 | render() {
15 | return (
16 | this.mapDiv = element
19 | }>
20 |
21 | );
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/config.js:
--------------------------------------------------------------------------------
1 | import esriConfig from "esri/config";
2 |
3 | const DEFAULT_WORKER_URL = "https://js.arcgis.com/4.14/";
4 | const DEFAULT_LOADER_URL = `${DEFAULT_WORKER_URL}dojo/dojo-lite.js`;
5 |
6 | esriConfig.workers.loaderUrl = DEFAULT_LOADER_URL;
7 | esriConfig.workers.loaderConfig = {
8 | baseUrl: `${DEFAULT_WORKER_URL}dojo`,
9 | packages: [
10 | { name: "esri", location: DEFAULT_WORKER_URL + "esri" },
11 | { name: "dojo", location: DEFAULT_WORKER_URL + "dojo" },
12 | { name: "dojox", location: DEFAULT_WORKER_URL + "dojox" },
13 | { name: "dijit", location: DEFAULT_WORKER_URL + "dijit" },
14 | { name: "dstore", location: DEFAULT_WORKER_URL + "dstore" },
15 | { name: "moment", location: DEFAULT_WORKER_URL + "moment" },
16 | { name: "@dojo", location: DEFAULT_WORKER_URL + "@dojo" },
17 | {
18 | name: "cldrjs",
19 | location: DEFAULT_WORKER_URL + "cldrjs",
20 | main: "dist/cldr"
21 | },
22 | {
23 | name: "globalize",
24 | location: DEFAULT_WORKER_URL + "globalize",
25 | main: "dist/globalize"
26 | },
27 | {
28 | name: "maquette",
29 | location: DEFAULT_WORKER_URL + "maquette",
30 | main: "dist/maquette.umd"
31 | },
32 | {
33 | name: "maquette-css-transitions",
34 | location: DEFAULT_WORKER_URL + "maquette-css-transitions",
35 | main: "dist/maquette-css-transitions.umd"
36 | },
37 | {
38 | name: "maquette-jsx",
39 | location: DEFAULT_WORKER_URL + "maquette-jsx",
40 | main: "dist/maquette-jsx.umd"
41 | },
42 | { name: "tslib", location: DEFAULT_WORKER_URL + "tslib", main: "tslib" }
43 | ]
44 | };
45 |
--------------------------------------------------------------------------------
/src/css/index.scss:
--------------------------------------------------------------------------------
1 | html,
2 | body,
3 | #app {
4 | padding: 0;
5 | margin: 0;
6 | width: 100%;
7 | height: 100%;
8 | display: flex;
9 | flex-direction: column;
10 | letter-spacing: 0em;
11 | font-family: "Avenir Next", "Helvetica Neue", sans-serif;
12 | line-height: 1.55rem;
13 | font-feature-settings: "liga" 1, "calt" 0;
14 | }
15 |
16 | /* header */
17 | header.top-nav {
18 | z-index: 1;
19 | background-color: $blue;
20 | width: 100%;
21 | }
22 |
23 | @media (max-width: 600px) {
24 | .toolbar-title {
25 | display: none;
26 | }
27 | }
28 |
29 | .top-nav-title,
30 | .top-nav-link {
31 | color: $white;
32 | letter-spacing: 2px;
33 | text-transform: uppercase;
34 | }
35 |
36 | /* map view */
37 | .main,
38 | .webmap {
39 | padding: 0;
40 | margin: 0;
41 | width: 100%;
42 | height: 100%;
43 | display: flex;
44 | align-items: center;
45 | justify-content: center;
46 | }
47 |
48 | .main {
49 | flex-direction: column;
50 | }
51 |
52 | .esri-view-root {
53 | width: 100%;
54 | height: 100%;
55 | }
56 |
57 | /* Fix for some calcite styles */
58 | .esri-widget {
59 | h3 {
60 | font-size: 1rem;
61 | }
62 | li {
63 | margin: 0;
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/css/main.scss:
--------------------------------------------------------------------------------
1 | $image-path: "~calcite-web/dist/img" !default;
2 | $font-path: "~calcite-web/dist/fonts" !default;
3 |
4 | @import "~calcite-web/dist/sass/calcite-web-no-fonts";
5 | @import "~arcgis-js-api/themes/light/main.css";
6 | @import "index";
7 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import "./config";
2 |
3 | import FeatureLayer from "esri/layers/FeatureLayer";
4 | import WebMap from "esri/WebMap";
5 |
6 | import React from "react";
7 | import ReactDOM from "react-dom";
8 |
9 | import { Header } from "./components/header";
10 | import { WebMapComponent } from "./components/webmapview";
11 |
12 | import "./css/main.scss";
13 |
14 | const addDOMNode = () => {
15 | const appNode = document.createElement("div");
16 | appNode.id = "app";
17 | document.body.appendChild(appNode);
18 | return appNode;
19 | }
20 |
21 | const onComponentLoad = (view) => {
22 | featureLayer.when(() => {
23 | view.goTo({ target: featureLayer.fullExtent });
24 | });
25 | };
26 |
27 | const featureLayer = new FeatureLayer({
28 | id: "states",
29 | portalItem: {
30 | id: "b234a118ab6b4c91908a1cf677941702"
31 | },
32 | outFields: ["NAME", "STATE_NAME", "VACANT", "HSE_UNITS"],
33 | title: "U.S. counties"
34 | });
35 |
36 | const webmap = new WebMap({
37 | portalItem: {
38 | id: "3ff64504498c4e9581a7a754412b6a9e"
39 | },
40 | layers: [featureLayer]
41 | });
42 |
43 | /**
44 | * React portion of application
45 | */
46 | ReactDOM.render(
47 |
48 |
49 |
52 |
,
53 | addDOMNode()
54 | );
55 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const ArcGISPlugin = require("@arcgis/webpack-plugin");
2 | const HtmlWebPackPlugin = require("html-webpack-plugin");
3 | const MiniCssExtractPlugin = require("mini-css-extract-plugin");
4 |
5 | const path = require("path");
6 | const webpack = require("webpack");
7 |
8 | module.exports = {
9 | entry: {
10 | index: "./src/index.js"
11 | },
12 | output: {
13 | filename: "[name].bundle.js",
14 | publicPath: ""
15 | },
16 |
17 | module: {
18 | rules: [
19 | {
20 | test: /\.js$/,
21 | exclude: /node_modules/,
22 | include: path.resolve(__dirname, "src"),
23 | use: [
24 | "cache-loader",
25 | {
26 | loader: "babel-loader",
27 | options: {
28 | cacheDirectory: true
29 | }
30 | }
31 | ]
32 | },
33 | {
34 | test: /\.(jpe?g|png|gif|webp)$/,
35 | use: [
36 | "cache-loader",
37 | {
38 | loader: "url-loader",
39 | options: {
40 | // Inline files smaller than 10 kB (10240 bytes)
41 | limit: 10 * 1024,
42 | }
43 | }
44 | ]
45 | },
46 | {
47 | test: /\.(wsv|ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
48 | use: [
49 | {
50 | loader: "file-loader",
51 | options: {
52 | name: "build/[name].[ext]"
53 | }
54 | }
55 | ]
56 | },
57 | {
58 | test: /\.scss$/,
59 | use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
60 | }
61 | ]
62 | },
63 |
64 | plugins: [
65 | new ArcGISPlugin({
66 | useDefaultAssetLoaders: false
67 | }),
68 | new HtmlWebPackPlugin({
69 | title: "My ArcGIS Webpack App",
70 | chunksSortMode: "none",
71 | meta: {
72 | viewport: "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
73 | }
74 | }),
75 | new MiniCssExtractPlugin({
76 | filename: "[name].css",
77 | chunkFilename: "[id].css"
78 | })
79 | ],
80 |
81 | resolve: {
82 | modules: [path.resolve(__dirname, "/src"), "node_modules/"],
83 | extensions: [".js", ".scss"]
84 | },
85 |
86 | externals: [
87 | (context, request, callback) => {
88 | if (/pe-wasm$/.test(request)) {
89 | return callback(null, "amd " + request);
90 | }
91 | callback();
92 | }
93 | ],
94 |
95 | node: {
96 | process: false,
97 | global: false,
98 | fs: "empty",
99 | }
100 | };
--------------------------------------------------------------------------------