craco-cesium

Let's use 🌍Cesium with create-react-app today!

This is a plugin for @craco/craco.

Very very easy usage

1. Create a React project

npm install -g create-react-app # or yarn global add create-react-app
create-react-app example
cd example

2. Install modules

In your create-react-app project, install modules:

npm install --save @craco/craco craco-cesium cesium
# or
yarn add @craco/craco craco-cesium cesium

3. Rewrite npm scripts

Rewrite npm scripts in package.json as following:

{
  // ...
  "scripts": {
    "start": "craco start", // react-scripts -> craco
    "build": "craco build", // react-scripts -> craco
    "test": "craco test",   // react-scripts -> craco
    "eject": "react-scripts eject"
  },
  // ...
}

4. Create craco config file

Create craco.config.js in the proejct root:

const CracoCesiumPlugin = require("craco-cesium");

module.exports = {
  plugins: [
    {
      plugin: CracoCesiumPlugin()
    }
  ]
};

5. Congratulations! 🎉

Set up is complete! Enjoy your Cesium life.

Resium is also recommended.

You can import Cesium as following:

import { Viewer, Entity, Color } from "cesium";

If you are using Resium, you can import Cesium and Resium as following.

import { Color } from "cesium";
import { Viewer, Entity } from "resium";

Options

If the option is omiited, the default options is used:

CracoCesiumPlugin({
  loadPartially: false,
  loadCSSinHTML: true
});

loadPartially

If false, whole Cesium will be loaded in HTML and window.Cesium is used in import { ... } from "cesium";. This is the easiest way.

Otherwise, Cesium will be load partially and bundled in the JS. You have to install strip-pragma-loader to build Cesium for production: npm i -S strip-pragma-loader.

For more details, refer to Cesium official tutorial.

loadCSSinHTML

If true, Widgets/widgets.css in Cesium is loaded in HTML.

Otherwise, you have to load the CSS once manually as following.

If loadPartially is true:

import "cesium/Widgets/widgets.css";

Otherwise:

import "cesium/Build/CesiumUnminified/Widgets/widgets.css";