App Quick Start Guide
App uses NodeJS, with vite.js on the backend, serving up index.js and index.html and other types of imports to the end-client. We also have Totum which accepts requests to decode or load various types of files and represent it as a javascript file, and wsrtc handling the multiplayer over websockets. Users can join rooms and share CRDT z.js state data to one another across the network. Also utilised by wsrtc are web codecs used to perform voice encoding and decoding. Once the app is installed all you need to do is go to localhost:3000 to launch the client. ThreeJS is used as a Renderer, physx-wasm for physics calculations as well as VRM models for avatars.
To Use!
To run App you'll need Node.js v.17 installed. To manage your Node version use NVM.
# Clone this repository
git clone --recurse-submodules https://github.com/webaverse/app.git
# Go into the repository
cd app/
# Install dependencies
npm install
# Run the app
npm run start
# Navigate to the URL mentioned in the terminal
Submodules
When cloning App from git, you must include the option "--recurse-submodules". The App repo relies upon and imports other Webaverse repos that are vital to the functioning application.
Development Environment Setup
IDEs
We prefer using VSCode for development, so the below notes reflect that toolset; however you should be able to adapt this guide to apply to any other IDEs.
Technologies
The App primarily uses the following technologies
Directory Structure
**Root**
│
├───src <--- React Application Resides Here
├───Main.jsx <-- Rgisters the routes of the React App and Load Dom
├───App.jsx <-- Loads Webaverse.js from Root directory
│
├─ index.js <-- This starts the vite server that serves the React App
│
├─ webaverse.js <-- This is the entry point of the Webaverse
│
├─ io-manager.js <-- Controls the input events within the application.
...
Setup ESLint
To setup ESLint, refer to: Quick Start Basics
Development Mode
The application uses Vite to hot reload itself automatically if there are any changes to any files. To start the App in dev mode, run:
npm run start
Any changes inside the packages folder won't recompile automatically and so will require restarting the entire development server by just running again: npm run dev