Create the Project

In this tutorial, you will create an Epicenter application that organizes play into episodes.

• Participants set the price for a bike shop each year and see how it affects profit.
• A facilitator can compare every participant's progress within an episode, and start a new episode at any time to begin a fresh round without losing the results of earlier ones.

note

The tutorial is based on a ready‑to‑go application template from the example branch of the dev-base-build repo.

Learning path:

1. Follow this guide to deploy and run the application.
2. In the next guide, learn how to use the Episode adapter.
3. Log in as a user to play the game.

Create a project

First, create an Epicenter project:

1. Log in to Epicenter.
2. Create a password-protected project by following the steps in the Team Projects guide.

Important

When creating the project, note the Project ID, also known as the project short name. You will need it in the deployment step.

Update settings

To configure your project:

1. Open the project settings page.
2. On the settings page, expand Advanced Settings.
3. Under Push Channel, select Enabled.
4. Under Web Access, select Allow access to all URLs by default.
5. Under Allow Channel Workshop Default, select Enabled.
6. At the bottom of the page, click Save Project Settings.

Add users to your project

To allow people to use your Epicenter application, you create a workshop and add users to it.

1. Create a workshop. For this project, you don't need to edit the optional workshop parameters.
2. On the workshop page, follow these steps to add a user of type Facilitator.
3. Repeat the steps to add as many users of type Participant as you need.

Learn more

To learn about the Participant and Facilitator user types, read the admin guide on Users.

Important

To see how a facilitator compares participants and switches between episodes, add at least one facilitator and two participants to your project.

Set up the development environment

Now, let's clone the application template repository from the example branch of the dev-base-build repo to a local folder.

Important

In the steps below, replace my-project with a directory name of your choice.

In a local directory, run the following shell commands:

1. npx degit forio/dev-base-build#example my-project: to clone the example branch to a local directory called my-project.
2. cd my-project: to change to the new project directory.
3. npm install: to install dependencies listed in \my-project\package.json.

Configure the environment

Now let's edit the variable values in the \my-project\.env file:

1. To customize the application name displayed in the user interface, set the value of the VITE_PROJECT_NAME variable.
2. To be able to run the application on your machine for development and local testing, set these variables:
   1. VITE_DEV_ACCOUNT_SHORT_NAME - this value must match your account short name.
   2. VITE_DEV_PROJECT_SHORT_NAME - this should match your project short name, also known as the project ID which you noted when creating the project.
   3. VITE_DEV_API_HOST - the Epicenter API host for your server. Corresponds to the SERVER value in Deploy project files, but without the https:// prefix.

note

The VITE_DEV_* variables in the .env file are required only for your app's local instance. When the application runs on Epicenter, the values are inferred from the project's URL.

Deploy Project Files

Deploy the model and the application UI to Epicenter.

1. In the new project directory, run npm run deploy to deploy the files to an Epicenter server.
2. During the deployment, you must enter:
   1. SERVER: The Epicenter server URL (defaults to https://forio.com).
   2. ACCOUNT_SHORT_NAME: Your organization's account short name. It is displayed on the organization settings page under Organization ID.
   3. PROJECT_SHORT_NAME: The project short name. This is the project ID from the project creation step.
   4. ADMIN_HANDLE: The email you used to log in when you created the project in the Epicenter UI.
   5. ADMIN_PASSWORD: Your Epicenter UI password.

These values are saved to \my-project\cli\config.json, which you can edit later.

Run the application

Now you can run the application locally or on the Epicenter server.

Local instance

To start the app in development mode:

1. In the command line, go to your local \my-project folder.
2. Run npm run dev.

The application runs on http://localhost:8888/.

Run on Epicenter

To run your application on Epicenter:

1. Open your project in Epicenter.
2. Use one of these options to run the app:
   • On the left, click Run Project.
   • Click the project URL under the project name.
   • Open a workshop and click the mask icon in the Actions column to log in as one of the users.

For example, here is a workshop in the single-player application with a Facilitator and a Participant: