LogoLogo
What's new?StatusMSquared
  • Morpheus Platform Documentation
  • What is Morpheus Platform?
    • Glossary
    • Interoperability
    • Support
    • EULA
  • Firewall Problems
  • CREATION
    • Unreal Development
      • Get Started
        • Download the Editor
        • Upload Content
        • Creating your Own Map
        • Morpheus Base Project
        • Differences from Unreal
          • Character Configuration
        • Morpheus Networking
          • Introduction to Morpheus Networking
          • Network Levels
          • Replicated Properties
          • RPCs
          • Morpheus Render Targets
          • Morpheus Array
          • Networking FAQ
          • Replicating Sublevels
      • Editor Versions
      • Performance Guarantees
      • Features & Guides
        • Example Plugin
          • Nameplates
          • In-Game Roles
          • Resizing
        • Actor Pooling
        • Audio
        • Avatars
          • Creating an Avatar
          • Attachments
            • MML Attachments
          • Custom Animation Variables
          • Importing an NFT Collection
          • Capsules and Mesh Transforms
        • Bots
        • Chat
          • Unreal Text Chat
        • Control Panels
          • Control Panel Configuration
          • DJ Booth Mission Control
          • Observer Controls
        • Crowd Audio
        • Crowd Rendering
          • Legacy Animated Crowd
            • Animated Crowd Console Commands
            • Attaching static meshes to crowd members
          • Crowd Materials
          • Performance Parameters
          • Live Config Settings
          • Crowd Animation
            • Crowd Anim Blueprint
              • User Guide - Crowd Anim Blueprint
              • Reference Guide - ABP Nodes
                • Animation Playback
                • States and State Machines
                • Variables
                • Transitions
                • Special
                • Blends
                • Additional Notes
        • Helpers & Extras
          • "Instanced Objects" in Blueprints
          • Objects with "world context"
          • Making DataAsset classes
          • Duplicate Objects
          • The Bootflow Subsystem
          • The "Wait For Condition" System
          • Advanced Graphics Settings
          • Listening to Inputs on UObjects
          • Morpheus UserID
          • World Services
          • M2Extras: Skins System
        • Loading Screen
        • Live Config
          • Editing for a World
          • Editing Locally
          • Default Settings
          • Accessing via Blueprint
          • Adding New Settings
          • Overriding Defaults
          • Using Arrays
        • MML
        • Motion Capture
        • Networking
        • Notifications
        • Raycastable Crowd
        • Singletons
        • Streaming & Multiplatform
          • GFN on Mobile
        • UI
          • "UI Mode"
        • User Collections
          • Creating a New Object Definition
          • Accessing from Unreal
            • Creating Objects Definitions
            • Transfer Objects
            • User Collection Views
            • Receiving Updates
        • Video Players
          • Embedded Video Player
          • Millicast video streaming
            • How to Setup an In-Game Video Stream
            • Picture-in-Picture mode
          • Streaming Video Player
            • How to Setup a URL Video Player
            • Picture-in-Picture mode
        • Visual Debugging
          • Inspector
        • Web UI
        • Online Services
          • KV Store Service
        • Web Requests
          • Http Requests
            • Legacy HTTP Nodes
          • JSON Handling
          • WebSockets
          • Identity Validation
          • Allowed External URLs
          • Walkthrough Example
            • Example Counter Service
        • World Travel
          • World Travel in the Editor
        • Avatar Physics Assets
        • Action Gameplay Helper Components
      • Workflows
        • Upgrade the Editor
        • Editing Project Settings
        • Profiling
        • Marketplace Importing
        • Extra Workflows
          • Setup Play-in-Editor
          • Setup Local Asset Validation
          • Adding Gameplay Tags
          • Validating Game Assets
          • Custom Connection Modes
          • Connect Editor to a World
          • Common Issues
      • Best Practices
    • Worlds
      • Invite Players
        • Setting Role Groups
      • Persistent Worlds
      • Always on Worlds
    • Running Events
      • Large Scale Events - Checklist
      • Anti-Cheat (EAC)
      • Player Entry
        • React Native
        • Steam
        • Hardware Requirements
      • Broadcast
        • OBS Integration
      • Failover
      • Capacity and Queue Management
  • ADMINS
    • Access Control
      • Add Metaverse Contributors
      • Create a New Project
    • Pricing
      • Development Support
      • Included Usage & Overages
      • Cloud Streaming
      • Access Modes
      • War Room Support
      • Platform SLA
    • Settings
      • Projects
  • APIs and Tooling
    • API Reference
      • Accounts
      • Events
      • Key/Value Store
      • Organizations
      • Realtime
      • User Profile
      • World Builder
      • Worlds
    • Template Web App
      • Moderation
    • Pixel Streaming
    • Launcher
  • Integrations
    • Analytics
      • Send Events from Web
      • Send Events from Unreal
    • Chat
      • Integrate Pubnub with your Unreal Project
      • Add Moderation to Chat
Powered by GitBook
On this page
  • Introduction
  • 1. Deploy your World
  • 2. Set up your Template App
  • 3. Deploy your Template App
  • 4. Setup moderation

Was this helpful?

  1. APIs and Tooling

Template Web App

PreviousWorldsNextModeration

Last updated 2 days ago

Was this helpful?

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.

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

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. Speak to your MSquared support engineer/representative to get access to this repo.

3. Deploy your Template App

  1. Create a new GitHub repo.

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

    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.

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

4. Setup moderation

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

Download the contents of . It's easiest just to download a zip as you'll re-upload this as a new repository later.

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

To set your setup, run npm run dev and visit to view the app running locally.

You might also want to test .

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

Follow the steps in to deploy your repo.

Note, you will need a to do this.

Follow the steps in to declare the following environment variables.

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

https://github.com/msquared-io/morpheus-platform-example-app
README.md
http:/localhost:3000
http://localhost:3000/admin
GitHub
Vercel
Deploying Git Repositories with Vercel
Vercel Pro Plan
Managing environment variables
redeploy
The app's default landing page, featuring an embedded streaming client
The app's /admin page