Create the Project

In this tutorial, you will create an Epicenter application that uses a proxy to selectively enable privileged access to simulation variables.

The application is a trading-floor simulation. Each team runs a desk: it picks a market signal, publishes a one-line public pitch, and keeps a sealed private note. Once a team locks its desk, it can read the public signal and pitch of the other desks in the episode, but not their private notes. That narrow, read-only window onto other desks is served by a proxy server deployed between the Epicenter application and backend.

note

The tutorial is based on a ready‑to‑go application template from the proxy 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 the proxy works.
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.

Proxy prerequisite

This branch deploys a proxy server, which requires proxies to be enabled for your Epicenter account.

Lean more

For details, read Enabling proxy routing.

Update settings

To configure your project, open the project settings page.

Proxy settings

Note

This is a crucial setting that allows your proxy to handle requests from the application.

1. On the settings page, expand Advanced Settings.
2. Under Proxy Settings:
   1. Select Proxy Server.
   2. In Proxy Model Filename, you must enter the name of the entry point file for the proxy. For this application, enter "index.js".

Important

Don't forget to save the settings after you are done.

Additional settings

1. Under Push Channel, select Enabled.
2. Under Web Access, select Allow access to all URLs by default.
3. Under Allow Channel Workshop Default, select Enabled.
4. At the bottom of the page, click Save Project Settings.

Update multiplayer settings

The application uses worlds to group participants into desks.

Enable multiplayer and configure worlds:

1. At the top of the Settings page, click Multiplayer Settings.
2. Under Multiplayer, select Enabled. The multiplayer settings pane expands.
3. Add a role named "Player" with the following properties:
   1. Minimum: 1
   2. Maximum: No Max
   3. Auto-Assign Objective: 1
4. Under On the Multiplayer Assignments page, start with assignments belonging to the, select Most Recent Run Configuration.
5. Click Save Multiplayer 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

Because we want multiple desks on the trading floor, add at least two participants and assign them to different worlds after deploying.

Assign roles

In a multiplayer project, you must assign users to roles.

You will be prompted to create the first run configuration. Click + Create and Use.

note

For this project, you can use the auto-assign functionality.

Set up the development environment

Now, let's clone the application template from the proxy 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#proxy my-project: to clone the proxy branch to a local directory called my-project.
2. cd my-project: to change to the new project directory.
3. npm install: to install the frontend dependencies listed in \my-project\package.json.
4. npm install --prefix proxy: to install the proxy server's dependencies. Re-run this command whenever the proxy's dependencies change.

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.

npm run deploy builds the React application, uploads the frontend and model files, and deploys the proxy server (including its node_modules), then resets the proxy so it boots the freshly deployed code.

Partial deploys

After the initial full deploy, you can update individual pieces without redeploying everything:

• npm run deploy:model — model files only.
• npm run deploy:public — built frontend only.
• npm run deploy:proxy — proxy server only (also resets the proxy).
• npm run reset:proxy — reset the running proxy process without redeploying any files.

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: