Skip to main content

Single-Player

The Single Player template contains:

  • An Excel model that calculates profits over time based on the price the user sets.
  • The application UI files.

Follow this guide to deploy and run the application.

Create a project​

First, create an Epicenter project:

  1. Log in to Epicenter.
  2. To create a project, follow the steps in the Team Projects guide.

Update settings​

To configure your project:

  1. Open the project settings page.
  2. Under General Settings, 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.Advanced project settings
  6. At the bottom of the page, click Save Project Settings.

Deploy Project Files​

Now let's clone the template repository to a local folder and deploy the model and the application UI to Epicenter.

Note

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.
  4. npm run deploy to deploy the files to an Epicenter server. 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.
    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.

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 a user of type Participant.
Learn more

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

Configure the local instance​

Edit the variable values in the \my-project\.env file:

  1. VITE_PROJECT_NAME - this can be displayed in your application's UI as the app name.
  2. VITE_DEV_ACCOUNT_SHORT_NAME - this value must match your account short name.
  3. VITE_DEV_PROJECT_SHORT_NAME - this should match your project short name.
  4. VITE_DEV_API_HOST - the Epicenter API host for your server. Corresponds to SERVER above, 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.

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 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: Workshop page with the 'Impersonate user' action icons highlighted

Application structure​

Here is a brief overview of some of the components of the template application.

  • The /src/main.tsx file defines how requests are routed to the different parts of the application.
    • RequireFocusedAuth checks that the user is authenticated.
    • PlayerShell is loaded for a participant.
    • FacilitatorShell is loaded when a facilitator logs in to the application.
    • PlayerHome defines the elements on the participant's page in the sim. It gets variables from a RunQuery.
  • Files in /src/query directory contain wrappers around the JS library adapters.
    • In run.ts, queryOptions defines how to fetch the data for the sim and how to cache it locally. queryFn fetches the data.
    • In auth.ts, useLogin() calls the authAdapter.login() function.
  • The /src/routes directory contains components that handle various use cases. For example, /src/routes/login/ handles login and password reset.