Template Web App

Introduction

Our template web application is a solid and extendable foundation to build your own web application on-top of. Out of the box features include:

You can embed streaming clients in it by passing their WORLD_ID as an Environment Variable. This makes it a great landing page for your end-users.

The app's default landing page, featuring an embedded streaming client

If you append /admin to the end of the URL, you can access an admin page where you can manage permissions and perform moderation (muting/banning players).

The app's /admin page

Follow the steps below to setup and deploy your own version of our template app.

1. Deploy your World

1. In order to embed a streaming client in your web app, you'll need a world for that client to connect to. Steps to deploy a world can be found here: Upload Content.

2. Note down your world's project ID and world ID. You'll need these later.

2. Set up your Template App

1. Download the contents of https://github.com/msquared-io/morpheus-platform-example-app. It's easiest just to download a zip as you'll re-upload this as a new repository later.

   1. Speak to your MSquared support engineer/representative to get access to this repo.

2. Follow the repo's README.md file to set up your development environment.

   1. To set your setup, run npm run dev and visit http:/localhost:3000 to view the app running locally.
   2. You might also want to test http://localhost:3000/admin.

3. Deploy your Template App

We recommend using GitHub and Vercel to deploy your application. They're what we use, so we can best support you if you do the same.

1. Create a new GitHub repo.

2. Upload your lightly modified version of the morpheus-platform-example-app repo to it.

3. Follow the steps in Deploying Git Repositories with Vercel to deploy your repo.

   1. Note, you will need a Vercel Pro Plan to do this.
4. Follow the steps in Managing environment variables to declare the following environment variables.

   1. ORGANIZATION_ID - Ask your MSquared support engineer/representative to give you this.

   2. PROJECT_ID - This information is available in your metaverse dashboard. You noted it down in step 1.2.

   3. WORLD_ID - This information is available in your metaverse dashboard. You noted it down in step 1.2.

   4. MSQUARED_API_KEY- Ask your MSquared support engineer/representative to give you this.

5. Deploy your app in Vercel and you should now be able to use it.

   1. If you deployed your app before you declared your environment variable you'll need to redeploy it for the variable to take effect.

4. Setup moderation

If you want to be able to use moderation from the app's /admin page, follow this guide: Moderation