# Transition from CDN to Webpack 5

**URL:** <https://community.cesium.com/t/transition-from-cdn-to-webpack-5/29360>\
**Category:** CesiumJS\
**Created:** [January 17, 2024, 9:54am UTC](https://community.cesium.com/t/transition-from-cdn-to-webpack-5/29360 "2024-01-17T09:54:53Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Albnas](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/albnas/32/3476_2.png) [@Albnas](https://community.cesium.com/u/Albnas)\
**Post date:** [January 17, 2024, 9:54am UTC](https://community.cesium.com/t/transition-from-cdn-to-webpack-5/29360/1 "2024-01-17T09:54:53Z")

</div>

Hey!

I’m trying to transition my project I built from the ground to build it with webpack 5 instead of using CDN.  
I have followed this: [cesium-webpack-example/webpack-5 at main · CesiumGS/cesium-webpack-example · GitHub](https://github.com/CesiumGS/cesium-webpack-example/tree/main/webpack-5) and this [CesiumJS Quickstart – Cesium](https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/) .

I have managed to get a basic example working:

```auto
import {
  Viewer,
  Cartesian3,
  Math,
  Ion,
  Terrain,
  createOsmBuildingsAsync,
} from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
import "./css/main.css";

// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Viewer('cesiumContainer', {
    terrain: Terrain.fromWorldTerrain(),
  });    
  
  
// Add Cesium OSM Buildings, a global 3D buildings layer.
const osmBuildingsTileset = await createOsmBuildingsAsync();
viewer.scene.primitives.add(osmBuildingsTileset);

// 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),
  },
});

```

But I can’t seem to switch to use my own ion terrain, the way I used it in my CDN project was like this:

```auto
viewer.scene.setTerrain(
    new Cesium.Terrain(Cesium.CesiumTerrainProvider.fromIonAssetId(2255008))
  );

```

I have a feeling it’s something basic… Can someone help me or put me in a direction how to convert my whole project (I feel it will run better with webpack and get easier to manage in the end). The app I’ve built has drawing toolbox, coordinate lookup and tracker, ability to genereate terrainprofiles, etc. I’ve built each functionallty in its own js file, and imported viewer to each file like this (where viewer.js is the main js file so to speak):

```auto
import { viewer } from "./viewer.js";

document.getElementById("terrainProfileModeBtn").addEventListener("click", function () {
  toggleTerrainProfileMode();
});

etc...

```

I apprichiate all help!

---

<div class="post-metadata">

**Author:** ![Albnas](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/albnas/32/3476_2.png) [@Albnas](https://community.cesium.com/u/Albnas)\
**Post date:** [January 17, 2024, 10:41am UTC](https://community.cesium.com/t/transition-from-cdn-to-webpack-5/29360/2 "2024-01-17T10:41:04Z")

</div>

Apperentaly I missed this: `import * as Cesium from 'cesium';`  
Now it works “:)”