Declaratively Rendering Earth in 3D, Part 1: Building a Cesium + React App with Webpack

[markerikson]

Original author: foobarbecue @foobarbecue
Original date: 2017-03-09T07:59:09Z

Thanks for writing this -- it gives me hope of building my Cesium app! However, you skip some steps when explaining and are imprecise about some things. Right now I'm at the step where you talk about copying some cesium stuff to the public directory. Presumably you mean to copy from node_modules/cesium/Source, but you say to copy from "Cesium." I'll let you know if I make it through the post :-)

[markerikson]

Original author: foobarbecue @foobarbecue
Original date: 2017-03-09T08:14:41Z

Ok, I got to where the globe is supposed to show up and instead I have an error when it tries to load createVerticesFromHeightmap: https://uploads.disquscdn.c...

[markerikson]

Original author: foobarbecue @foobarbecue
Original date: 2017-03-09T15:21:52Z

Ok I got to the stage where the globe appears! Sorry about posting grouchy comments last night. They were inaccurate so I deleted them. The biggest problem I ran into following this guide was that create-react-app does not work with the latest version of node. I posted an issue and the response was that it's only supposed to work with the latest LTS, so node 6, not 7. However, 7.5.0 works, just not 7.7.2 . https://github.com/facebook...

[markerikson]

Original date: 2017-03-09T17:03:08Z

Hiya. Yeah, I had actually just seen your comments via email, and was looking at the post to see where I wasn't clear. I _thought_ had I given correct paths for copying stuff. Glad you got it working.

Interesting point on CRA/Node 7 compat. I'm on 6 on my own box right now, so I wasn't aware of that issue. Thanks for the info!

[markerikson]

Original author: Reza Shahriari @rezashahriari
Original date: 2017-06-02T17:30:19Z

Hi I have followed the tutorial and I still have the white bar at the end of my page only on safari tho. It works fine on chrome however. Is there anyway to fix this?

[markerikson]

Original author: Siddharth Chinoy @siddharthchinoy
Original date: 2017-07-14T12:46:34Z

Hi Mark, thanks for the detailed walk-through. It was invaluable to me while integrating Cesium with my Electron+Reactjs setup.

I was trying to integrate Cesium by changing my webpack setup as per your instructions. However, I couldn't get it to work for the longest time with Cesium throwing [Cannot find module "."] errors at runtime while trying to load the build modules. After a few nights of debugging and poring through Cesium's module loading in buildModuleUrl, I noticed that the error was being thrown at null/undefined check for "(require.toUrl)". Webpack's transformed code showed that it was being replaced by webpackMissingModule() { var e = new Error("Cannot find module \".\""). I added another change in my webpack config which finally got it working. Posting it here for the benefit of other readers who might be stumped by the same error even after following your instructions.

Here is the modification in the config:
Along with adding module.unknownContextCritical: false, I needed to add module.unknownContextRegExp: /^.\/.*$/ to my webpack config. Refer to issue https://github.com/webpack/... for the fix.

It works like a charm, although I still don't completely understand why the fix works.

[markerikson]

Original date: 2017-07-14T14:17:38Z

Great, glad the walkthrough helped, and glad you were able to figure out that additional issue! Thanks for posting that.

[markerikson]

Original author: Brendan Jurd @brendanjurd
Original date: 2017-09-04T05:20:52Z

Thanks so much Mark and Siddharth! You have collectively spared some portion of my remaining sanity.

BTW, the ".*$" portion at the end of your regexp would be redundant for single-line strings. The regexp compiler will optimise this away, but there's no reason to include it. /^.\// does the trick just fine.

[markerikson]

Original author: Thw0rted @Thw0rted
Original date: 2017-11-16T11:45:06Z

Thanks for the writeup, it finally pushed me to get my DLL build working. I made a number of changes, including (in no particular order):

* I followed Siddharth's suggestion about `unknownContextRegExp`, which I was already using in my non-DLL-based project. (I went back and added a comment to that line in my webpack config so I'd remember why it's there next time!)
* In my version of Webpack (3.4.1) the Uglify plugin won't make sourcemaps unless you set `sourceMap:true` in the plugin config, so I turned that on.
* I changed the Image loader to `url-loader?limit=10000` which makes Webpack inline required images, since they're also not going to change between Cesium releases.
* I use `copy-webpack-plugin` to include the compiled DLL in my production build, which makes one-touch deploys easy:
plugins.push(new CopyPlugin([{
from: "build/distdll",
to: "CesiumStatic",
ignore: ["*manifest*"]
}]));

* First, figure out the Cesium version you're using (`const cesiumVersion = require("./node_modules/cesium/package.json").version;`), then include it in the name of the DLL you build (`filename : "[name]-" + cesiumVersion + ".js"` in the DLL config), and update your reference (` <script src="./CesiumStatic/cesiumDll-&lt;%= htmlWebpackPlugin.options.cesiumVersion %&gt;.js"></script>` in your index.html). This makes sure you won't accidentally use an old pre-built Cesium DLL with the `Assets` / `Widgets` from a newer release.

ETA: It looks like this comment system doesn't have any formatting support, if I have some time I might make a simple repo example to host the updated config files. Sorry!

[markerikson]

Original author: Adam Quintana @adamquintana
Original date: 2017-11-16T20:10:31Z

Thanks for your post. Do you mind posting your webpack config? Also, what version of Cesium are you running?