Client Side Dependency Imports

Video Lecture

Client Side Dependency Imports Client Side Dependency Imports Client Side Dependency Imports

Description

We now solve the client.ts import dependencies and add routes and paths to allow our client.ts, and compiled client.js to use identical ES6 import syntax simultaneously.

See Video for all npm commands and the order of execution.

src/client/client.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import * as THREE from '/build/three.module.js'

const scene: THREE.Scene = new THREE.Scene()

const camera: THREE.PerspectiveCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

const renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const geometry: THREE.BoxGeometry = new THREE.BoxGeometry()
const material: THREE.MeshBasicMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true })

const cube: THREE.Mesh = new THREE.Mesh(geometry, material)
scene.add(cube)

camera.position.z = 2

var animate = function () {

    requestAnimationFrame(animate)

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera)

}; 

animate(); 

src/client/tsconfig.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{
    "compilerOptions": {
        "target": "ES6",
        "module": "ES6",
        "outDir": "../../dist/client",
        "baseUrl": ".",
        "paths": {
            "/build/three.module.js": ["../../node_modules/three/src/Three"]
        },
        "moduleResolution": "node"
    },
    "include": [
        "**/*.ts"
    ]
}

src/server/server.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import express from "express"
import path from "path"
import http from "http"

const port: number = 3000

class App {

    private server: http.Server
    private port: number

    constructor(port: number) {
        this.port = port
        const app = express()
        app.use(express.static(path.join(__dirname, '../client')))
        app.use('/build/three.module.js', express.static(path.join(__dirname, '../../node_modules/three/build/three.module.js')))

        this.server = new http.Server(app);
    }

    public Start() {
        this.server.listen(this.port, () => {
            console.log( `Server listening on port ${this.port}.` )
        })
    }

}

new App(port). Start()

At the end of this section, all imports and types for both the server.ts and client.ts will be properly linked, and we can then compile and view the project and see a rotating 3D wireframe cube.

1
2
3
tsc -p ./src/server
tsc -p ./src/client
node dist/server/server.js

Open a browser and visit http://127.0.0.1:3000/

Project Zip

There are a lot of small details discussed so far, and you may have missed something. If your project does not work so far, you can compare it with the files in this zip. This zip contains all the files as they should be at the end of this section.

client-side-dependency-imports.zip

Save the files from the zip into a new folder, open a console into it, and run

1
2
3
4
npm install
tsc -p ./src/server
tsc -p ./src/client
node dist/server/server.js

Visit http://127.0.0.1:3000 in your browser and you should see a spinning green wire frame cube.

You can also see these files as they should be at this stage in the course, on CodeSandbox.io

CodeSandbox.io : Threejs TypeScript Course : Client Side Dependency Imports