How to publish three.js web app

Questions
#1

Hello all and sorry for my beginner questions but I am not sure how to proceed with publishing my app.

I created an app using three.js, HTML, CSS, and I also used UIKit for the interface. Now I am happy with the result and would like to publish a beta version, but it is unclear to me how to do it. I installed three.js using npm as guided in the instructions and so far the app is running completely on the client-side, so there is no signup/login, databases, or anything like that. I just have few .gltf files, textures, one HTML, one CSS, and a few .js files. Now I guess that I will be good with only the classic website hosting at the beginning but I am not sure how to compile the project and upload it to the hosting site? I heard of the bundlers and I was looking at the Webpack but I am not sure how to apply it to an existing project? Also, is this kind of project considered a static web app? I tried googling but with so much information available it just confused me even further on some things.

I would be very grateful if someone could lighten this up for me and point me in the right direction on how to continue. Let me know if I forgot to mention something.

Thank you very much in advance. :slight_smile:

#2

If you got to a stage where your app is (to some degree) complete without a bundler - you probably don’t really need a bundler.

It’s hard to help you precisely without seeing at least the project structure, but in general all you have to do is upload the files to a hosting server and ensure all paths are correct (ie. files are imported from places they should be imported from.) The rest should work same as it did locally.

#3

If your app is all contained in a html page, you could just host it with Github Pages, this is a very simple way to publish a static website.

If you plan on serving your page from a server and using a database, have a look at Heroku, it’s a bit more complex than using GitHub Pages but very well documented.

2 Likes
#4

Hello. Thank you very much for your reply.

I will make sure to take a look at Github Pages and Heroku.

So my project structure is quite like a classic website (HTML file, the src folder with js files, style folder with css), but what I am not sure about is that since I installed three.js using npm there is a node_modules folder that I think I cannot just copy over to the remote host. Should I use something to build all this into one file and what would you recommend or the easier route would be to just install three.js from CDN or static hosting and use it that way?

structure

Thank you.

#5

Yes, it’s explained in this page of the doc :

Install from CDN or static hosting

The three.js library can be used without any build system, either by uploading files to your own web server or by using an existing CDN. Because the library relies on ES modules, any script that references it must use type=“module” as shown below:

<script type="module">

  // Find the latest version by visiting https://unpkg.com/three. The URL will
  // redirect to the newest stable release.
  import * as THREE from 'https://unpkg.com/three/build/three.module.js';

  const scene = new THREE.Scene();

</script>

Not all features are accessed through the build/three.module.js module. Other popular parts of the library — such as controls, loaders, and post-processing effects — must be imported from the examples/jsm subfolder. To learn more, see Examples below.

If you also need modules from the examples directory, such as OrbitControls for instance, you can import them like this :

   import { ObritControls } from 'https://unpkg.com/three/examples/jsm/controls/OrbitControls.js';

Note that this will grab the last version of three.js published on NPM, if you want a specific version you just have to change a bit the url :

   import * as THREE from 'https://unpkg.com/three@0.124.0/build/three.module.js';
2 Likes
#6

I have created a section on deploying to production.
Deploying to Production - Three.js Tutorials (sbcode.net)
Instead of using my NodeJS project, use yours.
In summary

1 Like
#7

Suggesting setting a $50/mo. dedicated Linux server to run node to serve static apps (or even a dynamic one) sounds like a bit of an overkill in times of $0/mo. GH Pages / AWS S3 / Serverless / Netlify / Heroku. :’)

1 Like
#8

This is a nodejs crud boilerplate I created many years ago to demontrate Continuous Integration and Deployment (CI/CD) plus many other things.

It has a Heroku example where the node app is automatically pushed to heroku. See the heroku section abouit half way down the readme.

It’s not threejs, but it is a minimal nodejs/npm app that you can cherry pick from or use for reference…

In my Heroku projects setting → Deploy tab → “App connected to Github”, it points to my GitHub repository. It is also setup for auto deploy when I push changes to the master branch on my GitHub repo.

In my code repository, the file that matters to Heroku is the app.json

Your package.json should also have a start script in the scripts section that starts your node server.
eg,

  "scripts": {
    "start": "node ./dist/server.js",
    "test": "echo tests"
  }

If you are interested in dockerising your app or using docker-compose with GitLab CI, then you can also find info in there since that was the original purpose of this tutorial.

1 Like