HOW_TO_MODIFY.md

Introduction

After installing Mozilla hubs on local and Hosting Mozilla Hubs on VPS I started to modify it.

Where is the database schema?

See this first

How to make hubs scene with blender

Make scene

Reduce logs info for webpack server based

Many logs message on hubs, hubs admin, spoke terminal sometimes makes us more confused. We can reduce it by adding this on devServer object on webpack.config.js

Show Code

devServer: {
  // This is for reducing logs output on terminal
  quiet: false,
  noInfo: false,
  stats: {
    assets: false,
    children: false,
    chunks: false,
    chunkModules: false,
    colors: true,
    entrypoints: false,
    hash: false,
    modules: false,
    timings: false,
    version: false
  }
}

How to login & create admin account?

See official tutorial

How to modify UI (web2D)?

1. Take a look on the overview or make your own

Overview System With Figma

2. Reverse engineering from the Output

Output -> ComponentChild -> ComponentParent -> etc ... -> Main.js -> Main.html

if you see some teks on the hubs output ( on browser) for example is "Avatar Settings" then copy that string and goto your vscode and find using search tool. then you can find the ComponentChild and search again what component which calling it until you found the thing that you need.

3. Becareful when editing the code

React js will rerender the page if there is state updated. as my experience if the web are complex. If the component structure is bad sometimes it over rendering. and cause FPS drop, Memory leak.

4. Testing

4.1 Memory & FPS

Open memory menu on chrome. (inspect element>memory) and fps monitor on chrome

First, See the memory usage

Try to press all your layout button. and do some frequent actions.

If the memory is growing up maybe there's a problem with your code.

How to modify UI (Web 3D / Aframe Component)?


Like the position etc. its on the hub.html file

hubs using native html and controlled with native javascript.

you can reverse engineering it with search for the class name or id.

for example in vscode you can find the video-volume-label. its a class name

You can see the aframe element (the output) and the javascript file which controlling that.

Add Content Security Policy (CSP) rule in reticulum

check on file add_csp.ex

Bypass Email Verification for Login

Find lib/ret_web/channels/auth_channel.ex

Find this function and replace it with this function below:

def handle_in("auth_request", %{"email" => email, "origin" => origin}, socket) do
    if !Map.get(socket.assigns, :used) do
      socket = socket |> assign(:used, true)

      account = email |> Account.account_for_email()
      account_disabled = account && account.state == :disabled

      if !account_disabled && (can?(nil, create_account(nil)) || !!account) do
        # Create token + send email
        %LoginToken{identifier_hash: identifier_hash, token: token, payload_key: payload_key} = LoginToken.new_login_token_for_email(email)

        encrypted_payload = %{"email" => email} |> Poison.encode!() |> Crypto.encrypt(payload_key) |> :base64.encode()

        # Just by pass login
        decrypted_payload = encrypted_payload |> :base64.decode() |> Ret.Crypto.decrypt(payload_key) |> Poison.decode!()
        broadcast_credentials_and_payload(identifier_hash, decrypted_payload, socket)
        LoginToken.expire(token)
      end

      {:noreply, socket}
    else
      {:reply, {:error, "Already sent"}, socket}
    end
  end

Trick to Create First User as an Admin on Production Server

When you run hubs on vps. you using this command

PORT=4000 MIX_ENV=prod elixir --erl "-detached" -S mix phx.server

With that command bellow you can't access the log and the iex (interactive elixir)

But for the first time we need verification token right? like in this section and creating admin account with that first logged in account

We can see and open iex with this command

MIX_ENV=prod iex -S mix phx.server

with that command you can see the verif token and creating admin account

What you want to know ?

Write it on the issue. maybe i can help you.

Also read:

How to Maintenance Server (Backup, etc)

Hosting Mozilla Hubs on VPS

The Problem I Still Faced

The Problem I Faced and I Already Solved

Tips for Modification

Overview System With Figma

Experience Sharing About Hosting on Other Server