diff --git a/examples/README.md b/examples/README.md
index 6348b479b16..c78ec2ba852 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -10,14 +10,12 @@ start modifying and experimenting with.
### [Get-Started Examples](./get-started)
These are intended to be absolutely minimal (in terms of application code,
-package.json, webpack config etc) examples of how to get deck.gl and a base
+package.json, bundler config etc) examples of how to get deck.gl and a base
map working together.
-* **[Pure JS](./get-started/pure-js)** Applications without depending any additional framework. Bundled with
- webpack and served with webpack-dev-server.
-* **[React](./get-started/react)** React exmples using `@deck.gl/react` and `react-map-gl`. Bundled with
- webpack and served with webpack-dev-server. Transpiled with Babel.
-* **[Scripting](./get-started/scripting)** HTML single-file examples that can be opened directly in a browser.
+* **[Pure JS](./get-started/pure-js)** Applications without depending any additional framework. Bundled and served with [Vite](https://vitejs.dev).
+* **[React](./get-started/react)** React exmples using `@deck.gl/react` and `react-map-gl`. Bundled and served with [Vite](https://vitejs.dev).
+* **[Scripting](./get-started/scripting)** HTML single-file examples that can be opened directly in a browser.
### [Website Examples](./website)
@@ -64,5 +62,3 @@ with hot reloading) or against an installed version of deck.gl
Examples that support this mode have a `start-local` script in their
`package.json`.
-
-Look at the `webpack.config.local.js` in this directory for details.
diff --git a/examples/experimental/bezier/index.html b/examples/experimental/bezier/index.html
new file mode 100644
index 00000000000..e8b0809f355
--- /dev/null
+++ b/examples/experimental/bezier/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+ deck.gl Example
+
+
+
+
+
+
+
+
diff --git a/examples/experimental/bezier/package.json b/examples/experimental/bezier/package.json
index 94d69654d09..4efcbf63e4d 100644
--- a/examples/experimental/bezier/package.json
+++ b/examples/experimental/bezier/package.json
@@ -1,10 +1,12 @@
{
- "name": "bezier",
+ "name": "deckgl-examples-bezier",
"version": "0.0.0",
+ "private": true,
"license": "MIT",
"scripts": {
- "start-local": "webpack-dev-server --env.local --progress --hot --open",
- "start": "webpack-dev-server --progress --hot --open"
+ "start": "vite --open",
+ "start-local": "vite --config ../../vite.config.local.mjs",
+ "build": "tsc && vite build"
},
"dependencies": {
"deck.gl": "^8.8.0",
@@ -12,12 +14,7 @@
"react-dom": "^16.3.0"
},
"devDependencies": {
- "@babel/core": "^7.4.0",
- "@babel/preset-react": "^7.0.0",
- "babel-loader": "^8.0.5",
- "html-webpack-plugin": "^3.0.7",
- "webpack": "^4.20.2",
- "webpack-cli": "^3.1.2",
- "webpack-dev-server": "^3.1.1"
+ "typescript": "^4.6.0",
+ "vite": "^4.0.0"
}
}
diff --git a/examples/experimental/bezier/src/app.js b/examples/experimental/bezier/src/app.jsx
similarity index 100%
rename from examples/experimental/bezier/src/app.js
rename to examples/experimental/bezier/src/app.jsx
diff --git a/examples/experimental/bezier/webpack.config.js b/examples/experimental/bezier/webpack.config.js
deleted file mode 100644
index 44c3109c953..00000000000
--- a/examples/experimental/bezier/webpack.config.js
+++ /dev/null
@@ -1,41 +0,0 @@
-// 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 HtmlWebpackPlugin = require('html-webpack-plugin');
-
-const CONFIG = {
- mode: 'development',
-
- entry: {
- app: resolve('./src/app.js')
- },
-
- module: {
- rules: [
- {
- // Transpile ES6 to ES5 with babel
- // Remove if your app does not use JSX or you don't need to support old browsers
- test: /\.js$/,
- loader: 'babel-loader',
- exclude: [/node_modules/],
- options: {
- presets: ['@babel/preset-react']
- }
- }
- ]
- },
-
- 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')
- }
- },
-
- plugins: [new HtmlWebpackPlugin({title: 'deck.gl example'})]
-};
-
-// This line enables bundling against src in this repo rather than installed deck.gl module
-module.exports = env => (env ? require('../../webpack.config.local')(CONFIG)(env) : CONFIG);
diff --git a/examples/experimental/h3-grid/index.html b/examples/experimental/h3-grid/index.html
new file mode 100644
index 00000000000..e8b0809f355
--- /dev/null
+++ b/examples/experimental/h3-grid/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+ deck.gl Example
+
+
+
+
+
+
+
+
diff --git a/examples/experimental/h3-grid/package.json b/examples/experimental/h3-grid/package.json
index 2c66f7c4d75..86f8dbc1220 100644
--- a/examples/experimental/h3-grid/package.json
+++ b/examples/experimental/h3-grid/package.json
@@ -1,11 +1,12 @@
{
- "name": "h3-grid",
+ "name": "deckgl-examples-h3-grid",
"version": "0.0.0",
+ "private": true,
"license": "MIT",
"scripts": {
- "start-local": "webpack-dev-server --env.local --progress --hot --open",
- "start": "webpack-dev-server --progress --hot --open",
- "build": "webpack -p --output-path dist"
+ "start": "vite --open",
+ "start-local": "vite --config ../../vite.config.local.mjs",
+ "build": "tsc && vite build"
},
"dependencies": {
"deck.gl": "^8.8.0",
@@ -14,12 +15,7 @@
"react-map-gl": "^5.1.0"
},
"devDependencies": {
- "@babel/core": "^7.4.0",
- "@babel/preset-react": "^7.0.0",
- "babel-loader": "^8.0.5",
- "html-webpack-plugin": "^3.0.7",
- "webpack": "^4.20.2",
- "webpack-cli": "^3.1.2",
- "webpack-dev-server": "^3.1.1"
+ "typescript": "^4.6.0",
+ "vite": "^4.0.0"
}
}
diff --git a/examples/experimental/h3-grid/src/app.js b/examples/experimental/h3-grid/src/app.jsx
similarity index 100%
rename from examples/experimental/h3-grid/src/app.js
rename to examples/experimental/h3-grid/src/app.jsx
diff --git a/examples/experimental/h3-grid/webpack.config.js b/examples/experimental/h3-grid/webpack.config.js
deleted file mode 100644
index 44c3109c953..00000000000
--- a/examples/experimental/h3-grid/webpack.config.js
+++ /dev/null
@@ -1,41 +0,0 @@
-// 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 HtmlWebpackPlugin = require('html-webpack-plugin');
-
-const CONFIG = {
- mode: 'development',
-
- entry: {
- app: resolve('./src/app.js')
- },
-
- module: {
- rules: [
- {
- // Transpile ES6 to ES5 with babel
- // Remove if your app does not use JSX or you don't need to support old browsers
- test: /\.js$/,
- loader: 'babel-loader',
- exclude: [/node_modules/],
- options: {
- presets: ['@babel/preset-react']
- }
- }
- ]
- },
-
- 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')
- }
- },
-
- plugins: [new HtmlWebpackPlugin({title: 'deck.gl example'})]
-};
-
-// This line enables bundling against src in this repo rather than installed deck.gl module
-module.exports = env => (env ? require('../../webpack.config.local')(CONFIG)(env) : CONFIG);
diff --git a/examples/experimental/interleaved-buffer/README.md b/examples/experimental/interleaved-buffer/README.md
index 98af693c06d..c567bf634c4 100644
--- a/examples/experimental/interleaved-buffer/README.md
+++ b/examples/experimental/interleaved-buffer/README.md
@@ -1,7 +1,3 @@
-
-
-
-
## Example: Use deck.gl with Interleaved Binary Data
## Usage
diff --git a/examples/experimental/interleaved-buffer/index.html b/examples/experimental/interleaved-buffer/index.html
new file mode 100644
index 00000000000..e2be19bdcb2
--- /dev/null
+++ b/examples/experimental/interleaved-buffer/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+ deck.gl Example
+
+
+
+
+
+
+
+
diff --git a/examples/experimental/interleaved-buffer/package.json b/examples/experimental/interleaved-buffer/package.json
index 552a476dad3..1cb14bba399 100644
--- a/examples/experimental/interleaved-buffer/package.json
+++ b/examples/experimental/interleaved-buffer/package.json
@@ -1,20 +1,19 @@
{
- "name": "pure-js-basic",
+ "name": "deckgl-examples-interleaved-buffer",
"version": "0.0.0",
+ "private": true,
"license": "MIT",
"scripts": {
- "start": "webpack-dev-server --progress --hot --open",
- "start-local": "webpack-dev-server --env.local --progress --hot --open",
- "build": "webpack -p"
+ "start": "vite --open",
+ "start-local": "vite --config ../../vite.config.local.mjs",
+ "build": "tsc && vite build"
},
"dependencies": {
"@deck.gl/core": "^8.8.0",
"@deck.gl/layers": "^8.8.0"
},
"devDependencies": {
- "html-webpack-plugin": "^3.0.7",
- "webpack": "^4.20.2",
- "webpack-cli": "^3.1.2",
- "webpack-dev-server": "^3.1.1"
+ "typescript": "^4.6.0",
+ "vite": "^4.0.0"
}
}
diff --git a/examples/experimental/interleaved-buffer/webpack.config.js b/examples/experimental/interleaved-buffer/webpack.config.js
deleted file mode 100644
index 67cdb830365..00000000000
--- a/examples/experimental/interleaved-buffer/webpack.config.js
+++ /dev/null
@@ -1,17 +0,0 @@
-// NOTE: To use this example standalone (e.g. outside of deck.gl repo)
-// delete the local development overrides at the bottom of this file
-
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-const CONFIG = {
- mode: 'development',
-
- entry: {
- app: './app.js'
- },
-
- plugins: [new HtmlWebpackPlugin({title: 'deck.gl example'})]
-};
-
-// This line enables bundling against src in this repo rather than installed module
-module.exports = env => (env ? require('../../webpack.config.local')(CONFIG)(env) : CONFIG);
diff --git a/examples/get-started/pure-js/arcgis/README.md b/examples/get-started/pure-js/arcgis/README.md
index 990fb9d141f..862aa323a2c 100644
--- a/examples/get-started/pure-js/arcgis/README.md
+++ b/examples/get-started/pure-js/arcgis/README.md
@@ -1,12 +1,8 @@
-
-
-
-
## Example: Use deck.gl with Esri ArcGIS API for JavaScript
This sample shows how to use the `@deck.gl/arcgis` module to add a deck.gl layer to an [ArcGIS JavaScript](https://developers.arcgis.com/javascript/) app.
-Uses [Webpack](https://github.com/webpack/webpack) and the [ArcGIS Webpack plugin](https://github.com/Esri/arcgis-webpack-plugin)
-to bundle files and serves it with [webpack-dev-server](https://webpack.js.org/guides/development/#webpack-dev-server).
+
+Uses [Vite](https://vitejs.dev/) to bundle and serve files.
## Usage
diff --git a/examples/get-started/pure-js/arcgis/index.html b/examples/get-started/pure-js/arcgis/index.html
index 9a1dc6259e9..68fa1691b6b 100644
--- a/examples/get-started/pure-js/arcgis/index.html
+++ b/examples/get-started/pure-js/arcgis/index.html
@@ -17,6 +17,6 @@
-
+