Merge pull request #1 from CesiumGS/create-example

Create Vite example

.eslintignore

@@ -0,0 +1 @@
+dist/**

.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["cesium/node"]
+}

.github/workflows/lint.yml

@@ -0,0 +1,18 @@
+name: lint
+on: push
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Lint/Format check
+    steps:
+      - uses: actions/checkout@v3
+      - name: install node 20
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - name: install
+        run: npm install
+      - name: lint *.js
+        run: npm run eslint
+      - name: format code
+        run: npm run prettier-check

.github/workflows/main.yml

@@ -0,0 +1,19 @@
+name: main
+on: push
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [18, 20]
+    name: Node ${{ matrix.node }}
+    steps:
+      - uses: actions/checkout@v3
+      - name: install node ${{ matrix.node }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+      - name: install
+        run: npm install
+      - name: build
+        run: npm run build

.gitignore

@@ -0,0 +1,5 @@
+dist/
+node_modules/
+package-lock.json
+.DS_Store
+.eslintcache

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.npmignore

@@ -0,0 +1 @@
+vite.config.js

.prettierignore

@@ -0,0 +1,14 @@
+
+# Ignore everything
+*
+
+# Unignore directories (to all depths) and unignore code and style files in these directories
+!.github/**/
+!.vscode/**/
+!src/**/
+
+!**/*.js
+!**/*.css
+!**/*.html
+!**/*.md
+!**/*.json

.prettierrc

@@ -0,0 +1 @@
+{}

LICENSE

@@ -1,3 +1,5 @@
+Copyright 2024 Cesium GS, Inc.
+
                                  Apache License
                            Version 2.0, January 2004
                         http://www.apache.org/licenses/

README.md

@@ -0,0 +1,98 @@
+# cesium-vite-example
+
+A minimal recommended setup for an applications using [Cesium](https://cesium.com) with [Vite](https://vitejs.dev/).
+
+If you are using Webpack instead of Vite, check out our [`cesium-webpack-example`](https://github.com/CesiumGS/cesium-webpack-example) repo.
+
+## UI framework support
+
+This example was created to be the lowest common denominator in the Vite ecosystem and targets Vanilla JS. The same configuration has been tested with other UI frameworks in Vite (like Vue) by adding the relevant plugin. If you run into framework specific problems please [open an issue](https://github.com/CesiumGS/cesium-vite-example/issues/new).
+
+If you create a new Vite project with [`create-vite`](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) you can combine the `plugins` that it adds in `vite.config.js` with the ones in this example configuration.
+
+## Running this application
+
+```sh
+npm install
+npm run dev
+```
+
+For the built, production version
+
+```sh
+npm run build
+npm run preview
+```
+
+Navigate to `localhost:5173`. For the built version navigate to `localhost:4173`
+
+## Available scripts
+
+- `npm run eslint` - Lint this project
+- `npm run prettier` - Format all the code to a consistant style
+- `npm run prettier-check` - Check the format of code but do not change it
+- `npm run dev` - Starts the Vite development server server at `localhost:5173`
+- `npm run build` - Runs the Vite production build
+- `npm run preview` - Starts a local preview of the production build using [`vite preview`](https://vitejs.dev/guide/cli.html#vite-preview)
+
+## Requiring Cesium in your application
+
+We recommend [importing named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) from the Cesium ES module, via the `import` keyword.
+
+### Import named modules from Cesium
+
+```js
+import { Color } from "cesium";
+var c = Color.fromRandom();
+```
+
+### Import Cesium static asset files
+
+```js
+import "cesium/Build/Cesium/Widgets/widgets.css";
+```
+
+## Cesium sub-packages
+
+CesiumJS requires a few static files to be hosted on your server, like web workers and SVG icons. This example is already set up to copy these directories if you install the whole `cesium` package.
+
+```js
+viteStaticCopy({
+  targets: [
+    { src: `${cesiumSource}/ThirdParty`, dest: cesiumBaseUrl },
+    { src: `${cesiumSource}/Workers`, dest: cesiumBaseUrl },
+    { src: `${cesiumSource}/Assets`, dest: cesiumBaseUrl },
+    { src: `${cesiumSource}/Widgets`, dest: cesiumBaseUrl },
+  ],
+}),
+```
+
+However if you only install `@cesium/engine` then you should change the paths in [`vite.config.js`](./vite.config.js) to the ones below:
+
+```js
+viteStaticCopy({
+  targets: [
+    { src: 'node_modules/@cesium/engine/Build/Workers', dest: cesiumBaseUrl },
+    { src: 'node_modules/@cesium/engine/Build/ThirdParty', dest: cesiumBaseUrl },
+    { src: 'node_modules/@cesium/engine/Source/Assets', dest: cesiumBaseUrl },
+  ],
+}),
+```
+
+Additionally you will have to import a different widgets css file in `src/main.js`.
+
+```js
+// Change this import
+import "cesium/Build/Cesium/Widgets/widgets.css";
+
+// To this one from the cesium/engine package
+import "@cesium/engine/Source/Widget/CesiumWidget.css";
+```
+
+## Contributions
+
+Pull requests are appreciated. Please use the same [Contributor License Agreement (CLA)](https://github.com/CesiumGS/cesium/blob/master/CONTRIBUTING.md) used for [Cesium](https://cesium.com/).
+
+---
+
+Developed by the Cesium team.

index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div id="cesiumContainer"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "cesiumjs-vite-example",
+  "version": "1.0.0",
+  "description": "The minimal recommended setup for an app using Cesium with Vite.",
+  "homepage": "https://cesium.com/platform/cesiumjs/",
+  "license": "Apache-2.0",
+  "author": {
+    "name": "Cesium GS, Inc.",
+    "url": "https://cesium.com"
+  },
+  "keywords": [
+    "cesium",
+    "CesiumJS",
+    "vite",
+    "example"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/CesiumGS/cesium-vite-example.git"
+  },
+  "type": "module",
+  "scripts": {
+    "prepare": "husky install",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "eslint": "eslint \"./**/*.js\" \"./**/*.html\" --cache --quiet",
+    "prettier": "prettier --write --no-config \"**/*\"",
+    "prettier-check": "prettier --check --no-config \"**/*\""
+  },
+  "devDependencies": {
+    "eslint": "^8.56.0",
+    "eslint-config-cesium": "^10.0.2",
+    "eslint-plugin-es": "^4.1.0",
+    "eslint-plugin-html": "^7.1.0",
+    "husky": "^8.0.3",
+    "prettier": "^3.2.4",
+    "vite": "^5.0.8",
+    "vite-plugin-static-copy": "^1.0.0"
+  },
+  "dependencies": {
+    "cesium": "^1.113.0"
+  },
+  "lint-staged": {
+    "*.{js,html}": [
+      "eslint --cache --quiet",
+      "prettier --write --no-config"
+    ]
+  }
+}

src/.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "root": true,
+  "extends": ["cesium/browser"],
+  "plugins": ["html", "es"],
+  "parserOptions": {
+    "ecmaVersion": 2023
+  },
+  "rules": {
+    "no-unused-vars": ["error", { "vars": "all", "args": "none" }]
+  }
+}

src/main.js

@@ -0,0 +1,28 @@
+import {
+  Cartesian3,
+  Math as CesiumMath,
+  Terrain,
+  Viewer,
+  createOsmBuildingsAsync,
+} from "cesium";
+import "cesium/Build/Cesium/Widgets/widgets.css";
+import "./style.css";
+
+// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
+const viewer = new Viewer("cesiumContainer", {
+  terrain: Terrain.fromWorldTerrain(),
+});
+
+// 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: CesiumMath.toRadians(0.0),
+    pitch: CesiumMath.toRadians(-15.0),
+  },
+});
+
+// Add Cesium OSM Buildings, a global 3D buildings layer.
+createOsmBuildingsAsync().then((buildingTileset) => {
+  viewer.scene.primitives.add(buildingTileset);
+});

src/style.css

@@ -0,0 +1,9 @@
+body {
+  margin: 0;
+}
+
+#cesiumContainer {
+  background: gray;
+  height: 100vh;
+  width: 100%;
+}

vite.config.js

@@ -0,0 +1,34 @@
+import { defineConfig } from "vite";
+import { viteStaticCopy } from "vite-plugin-static-copy";
+
+const cesiumSource = "node_modules/cesium/Build/Cesium";
+// This is the base url for static files that CesiumJS needs to load.
+// Set to an empty string to place the files at the site's root path
+const cesiumBaseUrl = "cesiumStatic";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  define: {
+    // Define relative base path in cesium for loading assets
+    // https://vitejs.dev/config/shared-options.html#define
+    CESIUM_BASE_URL: JSON.stringify(cesiumBaseUrl),
+  },
+  plugins: [
+    // Copy Cesium Assets, Widgets, and Workers to a static directory.
+    // If you need to add your own static files to your project, use the `public` directory
+    // and other options listed here: https://vitejs.dev/guide/assets.html#the-public-directory
+    viteStaticCopy({
+      targets: [
+        { src: `${cesiumSource}/ThirdParty`, dest: cesiumBaseUrl },
+        { src: `${cesiumSource}/Workers`, dest: cesiumBaseUrl },
+        { src: `${cesiumSource}/Assets`, dest: cesiumBaseUrl },
+        { src: `${cesiumSource}/Widgets`, dest: cesiumBaseUrl },
+      ],
+    }),
+  ],
+  build: {
+    rollupOptions: {
+      external: ["http", "https", "url", "zlib"],
+    },
+  },
+});