# 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.

<figure><img src="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-98f917c44d31fa1902c6b869c73c89b2576a3e31%2Fimage.png?alt=media" alt=""><figcaption><p>The app's default landing page, featuring an embedded streaming client</p></figcaption></figure>

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).

<figure><img src="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-9e6a2088a1bf589c34fbcd5ed73a640fdd85e06f%2Fimage.png?alt=media" alt=""><figcaption><p>The app's <code>/admin</code> page</p></figcaption></figure>

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: [uploading-content](https://docs.msquared.io/creation/unreal-development/getting-started/uploading-content "mention").
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](https://github.com/msquared-io/morpheus-platform-example-app/blob/main/README.md) file to set up your development environment.
   1. To set your setup, run `npm run dev` and visit [http:/localhost:3000](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](https://github.com/) and [Vercel](https://vercel.com/) 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](https://vercel.com/docs/git#deploying-a-git-repository) to deploy your repo.
   1. Note, you will need a [Vercel Pro Plan](https://vercel.com/docs/plans/pro) to do this.
4. Follow the steps in [Managing environment variables](https://vercel.com/docs/environment-variables/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](https://vercel.com/docs/deployments/managing-deployments#redeploy-a-project) 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](https://docs.msquared.io/apis-and-tooling/template-web-app/moderation "mention")