Template for threejs projects

Template project for building Three.js applications.

Developing

# Develop locally
$ docker compose watch

Served on http://localhost:3000

Production

# Build and run for your prod environment
$ docker build -t myThreejsApp .
$ docker run -p 3000:80 myThreejsApp

Served on http://localhost:3000/myapp

Endpoint to serve on

Here i've chosen to serve the application on /myapp to be able to run this alongside my portfolio on a specific endpoint.

In order to modify which endpoint to serve on, do the following.

Update base in vite.config.ts. Here I've set the endpoint to be myapp, but you can of course set it to whatever you want. Set it to / to serve it from the root.

// vite.config.ts

export default defineConfig({
    base: "/myapp",
    server: {
        port: 3000
    },
})

Update Dockerfile to store the static content generated by webpack in a folder with the same name as the value set in base in vite.config.ts. By doing this Apache will serve the static files in that folder when visiting /myapp. Remove myapp/ if you want to serve it from the root path.

# Dockerfile

FROM httpd:2.4

COPY --from=builder /app/dist/ /usr/local/apache2/htdocs/myapp/

EXPOSE 80