Revised our public CesiumJS & webpack guide #28
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,5 +3,4 @@ node_js: | |
| - '10' | ||
| - '12' | ||
| script: | ||
| - npm run build | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,43 @@ | ||
| { | ||
| "name": "cesiumjs-webpack-example", | ||
| "version": "1.0.0", | ||
| "description": "The minimal recomended setup for an app using Cesium with Webpack.", | ||
| "homepage": "https://cesium.com/platform/cesiumjs/", | ||
| "license": "Apache-2.0", | ||
| "author": { | ||
| "name": "Cesium GS, Inc.", | ||
| "url": "https://cesium.com" | ||
| }, | ||
| "keywords": [ | ||
|
There was a problem hiding this comment. This is nitpick-y, but There was a problem hiding this comment. No not at all! I think this is a great idea - I just added it back. |
||
| "CesiumJS", | ||
| "webpack", | ||
| "example" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/CesiumGS/cesium-webpack-example.git" | ||
| }, | ||
| "main": "index.js", | ||
| "scripts": { | ||
| "build": "node_modules/.bin/webpack --config webpack.config.js", | ||
| "start": "node_modules/.bin/webpack serve --config webpack.config.js --open" | ||
| }, | ||
| "devDependencies": { | ||
| "cesium": "^1.84.0", | ||
| "copy-webpack-plugin": "^9.0.1", | ||
| "css-loader": "^6.2.0", | ||
| "html-webpack-plugin": "^5.3.2", | ||
| "sass-loader": "^7.1.0", | ||
| "strip-pragma-loader": "^1.0.0", | ||
| "style-loader": "^3.2.1", | ||
| "url-loader": "^4.1.1", | ||
| "webpack-cli": "^4.8.0", | ||
| "webpack-dev-server": "^3.11.2" | ||
| }, | ||
| "dependencies": { | ||
|
There was a problem hiding this comment. Should there not only be one dependency and all others are being |
||
| "cesiumjs": "^1.10.0", | ||
|
There was a problem hiding this comment.
There was a problem hiding this comment. Thanks for catching this. I was a little bit confused because we are using two different names to import CesiumJS - "cesium" and "cesiumjs" |
||
| "es6": "^0.0.7", | ||
| "release": "^6.3.0", | ||
| "webpack": "^5.51.1" | ||
|
There was a problem hiding this comment. I think all of these are There was a problem hiding this comment. I don't see where the other 3 dependencies (es6, querystring, release) are actually being used. Maybe I'm missing something? There was a problem hiding this comment. I read through this thread for some context and added a commit with the update. We now do not have any "dependencies" - is that correct? There was a problem hiding this comment. That's my thinking, yes. The packaged version of this app would not need any of these packages installed to run. And, yes, please double check if all of these packages are being used, and if not, remove them. There was a problem hiding this comment. @ggetz good point 😄 I just ran the command However, when running |
||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,9 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| </head> | ||
| <body> | ||
| <div id="cesiumContainer"></div> | ||
| </body> | ||
| </html> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,23 @@ | ||
| import { Ion, Viewer, createWorldTerrain, createOsmBuildings, Cartesian3, Math } from "../node_modules/cesium" | ||
| import "../node_modules/cesium/Build/Cesium/Widgets/widgets.css"; | ||
|
|
||
| // Your access token can be found at: https://cesium.com/ion/tokens. | ||
| // This is the default access token from your ion account | ||
| Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYWE1OWUxNy1mMWZiLTQzYjYtYTQ0OS1kMWFjYmFkNjc5YzciLCJpZCI6NTc3MzMsImlhdCI6MTYyNzg0NTE4Mn0.XcKpgANiY19MC4bdFUXMVEBToBmqS8kuYpUlxJHYZxk'; | ||
|
There was a problem hiding this comment. Where is this default token coming from? Are you adding the right documentation needed to cycle this? There was a problem hiding this comment. The default token is coming from the CesiumJS Quickstart Guide. I think this is appropriate here, given that I am using the code from that guide. Please let me know if you would like me to make any edits here. There was a problem hiding this comment. then the comment There was a problem hiding this comment. I just updated the wording for the Webpack tutorial. However, in that case, the wording for the CesiumJS quickstart guide is also incorrect and should be updated. |
||
|
|
||
| // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID. | ||
| const viewer = new Viewer('cesiumContainer', { | ||
| terrainProvider: createWorldTerrain() | ||
| }); | ||
|
|
||
| // Add Cesium OSM Buildings, a global 3D buildings layer. | ||
| viewer.scene.primitives.add(createOsmBuildings()); | ||
|
|
||
| // Fly the camera to San Francisco at the given longitude, latitude, and height. | ||
| viewer.camera.flyTo({ | ||
| destination : Cartesian3.fromDegrees(-122.4175, 37.655, 400), | ||
| orientation : { | ||
| heading : Math.toRadians(0.0), | ||
| pitch : Math.toRadians(-15.0), | ||
| } | ||
| }); | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,38 @@ | ||
| // The path to the CesiumJS source code | ||
| const cesiumSource = 'node_modules/cesium/Source'; | ||
| const cesiumWorkers = '../Build/Cesium/Workers'; | ||
| const CopyWebpackPlugin = require('copy-webpack-plugin'); | ||
| const path = require('path'); | ||
| const webpack = require('webpack'); | ||
| const HtmlWebpackPlugin = require('html-webpack-plugin'); | ||
|
|
||
| module.exports = { | ||
| context: __dirname, | ||
| entry: { | ||
| app: './src/index.js' | ||
| }, | ||
| output: { | ||
| filename: 'app.js', | ||
srothst1 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| path: path.resolve(__dirname, 'dist'), | ||
| sourcePrefix: '' | ||
| }, | ||
| amd: { | ||
| // Enable webpack-friendly use of require in Cesium | ||
| toUrlUndefined: true | ||
| }, | ||
| resolve: { | ||
| alias: { | ||
| // CesiumJS module name | ||
| cesium: path.resolve(__dirname, cesiumSource) | ||
|
There was a problem hiding this comment. You've defined the It's pretty atypical to define relative paths to dependencies in At first, I would have suggested omitting the However, there's an issue when importing After testing this out myself, I think we should keep the above alias, but configure the Cesium's main module file so that Cesium can be resolved without a relative path. So in and the first few lines of There was a problem hiding this comment. I was not aware of the issue in the CesiumJS repo that you shared. It looks like @thw0rted offered to submit a PR that resolves at least some of the bugs. In the meantime, I just added a commit that implements the suggestions that you gave. There was a problem hiding this comment. IMHO, instead of a There was a problem hiding this comment. Thanks for the suggestion! I believe that is captured in the issue I linked to above. While that change is out of the scope of this PR and repo, we can adjust this example if/when Cesium's |
||
| } | ||
| }, | ||
| module: { | ||
| rules: [{ | ||
| test: /\.css$/, | ||
| use: [ 'style-loader', 'css-loader' ] | ||
| }, { | ||
| test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/, | ||
| use: [ 'url-loader' ] | ||
| }] | ||
| }, | ||
| plugins: [ | ||
|
|
@@ -42,20 +42,16 @@ module.exports = [{ | |
| // Copy Cesium Assets, Widgets, and Workers to a static directory | ||
| new CopyWebpackPlugin({ | ||
| patterns: [ | ||
| { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }, | ||
| { from: path.join(cesiumSource, 'Assets'), to: 'Assets' }, | ||
| { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } | ||
srothst1 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| ] | ||
| }), | ||
| new webpack.DefinePlugin({ | ||
| // Define relative base path in cesium for loading assets | ||
| CESIUM_BASE_URL: JSON.stringify('') | ||
| }) | ||
| ], | ||
| mode: 'development', | ||
| devtool: 'eval', | ||
| }; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please change all URLs in this file from
AnalyticalGraphicsInc->CesiumGS, andcesiumjs.org->cesium.com, or use best judgement as needed.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice catch. You may have noticed that the
README.MDfile in the branch was simply a relic from the last webpack tutorial that we released. It is mostly relevant to people who view our GitHub page, not users accessing our tutorial. I just added a commit that addresses this issue.