Skip to content

Latest commit

 

History

History
113 lines (69 loc) · 4.28 KB

QuickStart.md

File metadata and controls

113 lines (69 loc) · 4.28 KB
Raw

Croquet Microverse Quick Start Guide

https://croquet.io

TL;DR

  • npm create croquet-microverse@latest
  • npm start

Introduction

This guide will enable you to quickly set up your own Croquet Microverse project. Refer to tutorials in the docs directory for its key concepts and features that let you build shared worlds.

Prerequisites

  1. Node.js
  2. Web browser (we recommend Chrome at this time)

Our tools are written in JavaScript and need Node.js to run. In particular the npm command provided by Node is used to install JS packages.

The users of your worlds do not need these tools. Microverse worlds are deployed as static web pages so only a web browser is needed to visit them.

Installation Steps

  1. Create an empty directory for your project.

  2. In that directory, run the following command:

    npm create croquet-microverse@latest

    This will create a ready-to-use folder structure for your project.

Video Walkthrough

Here's a video walkthrough of the steps: vimeo.com/739770287

Walkthrough

Try your project locally

In the directory you just created, run

npm start

This will start the development web server. In its output there will be lines like:

Running at:
    http://127.0.0.1:9684
    http://192.168.0.105:9684
    http://[::1]:9684

Copy the Network URL (e.g. http://192.168.0.105:9684/) and paste it into your web browser. We recommend using this URL over the localhost one to be able to join the session from other devices, e.g. your phone.

Congratulations!

Deploy your world to a web server

A Croquet app like Microverse is deployed as a static web app. You do not need any special server-side features.

  1. Create a production key at croquet.io/keys and add a restriction to your target URL. Then create a file called apiKey.js (from apiKey.js-example) and paste your key into the value of apiKey.

You can pick your own appId. We recommend to make a unique appId.

        /* Copy this into a file named apiKey.js */
        const apiKey = '123abcd_Get_your_own_key';
        const appId = 'com.mycompany.myorg.myapp';
        export default {apiKey, appId};

  1. Upload the whole project directory to any web server.

    One simple way is GitHub pages. Check your directory into git, publish to GitHub, and enable pages.

    Here's an example

    Note: you see I checked in my apiKey.js. Unlike server-side API keys, client-side API keys are not a secret. Anyone looking at the code on your website can see it. Instead, it is protected by the URL restriction, it will only work on your own website, not on anyone else's (if they were to copy it).

Updating

If you have started with create-croquet-microverse, you can update microverse-library to the latest version by running:

npm i @croquet/microverse-library@latest

This will update your package.json and the files under the lib directory where microverse-library code is copied. The files under behaviors/croquet are also updated, but files in other directories under behavior are kept unchanged.

You don't have to add files under node_modules; and a deployed installation works without it. We recocommend to add node_modules to .gitignore.

Resources

Documentation

Help

The best resource for help in developing Croquet Microverse worlds is our Discord community. The Croquet Discord server is where you can chat with fellow developers, ask questions, and show off your own creations. Join the Croquet Discord server.

Copyright (c) 2022 Croquet Corporation