Deploying to Production
In this next several lessons, I will show you how to deploy your Threejs project to a production server on the internet.
The next lessons will cover,
- Create the Start Script in the package.json
- Provision a Cloud Server for Production
- Deploy Files to the Server
- Start the Games on the server
- Set up an Nginx Proxy
- Set up and Point a Domain Name
- Install an SSL certificate
At the end, our Threejs project, developed using TypeScript, will be officially on the internet for the public to see.
You can use any example from any section of the course as your project to deploy. Or even a project that you've written yourself along the way.
The ballgame branch is a good example to use since it is significantly more sophisticated that the default boilerplate master branch.
Some of the features of The ballgame branch are
- It uses the familiar Boilerplate Client and Server TypeScript structure with the Nodejs server
- It is a multiplayer game
- It demonstrates server side Cannonjs physics
- It uses SocketIO for the game multiplayer communications
- It demonstrates using several materials including the MeshMatcapMaterial, MeshBasicMaterial and MeshPhongMaterial with environment maps.
- It demonstrates the Reflector object used for the floor mirror effect
- It demonstrates the CubeCamera which can also be used for more realistic reflections
- It demonstrates loading a pre built 3d model
- It demonstrates a Custom Camera controller which is a cross between the Orbit and trackball controls.
- It demonstrates modifying the UI in case of Desktop or Mobile browser. (PointerLock API or XYControllers)
All these things together make a much more impressive Threejs project that demonstrates many of the considerations needed when building a Threejs project from the ground up.
To download the Three.js-TypeScript-Boilerplate and switch to the ballgame branch,
1 2 3 4 5 6 7 8 9 10 11
git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git cd Three.js-TypeScript-Boilerplate git checkout ballgame npm install npm install -g typescript npm run dev