sitemap.xml llms.txt
Skip to main content

Create the Project

In this tutorial, you will create an Epicenter application for a number-guessing game that keeps track of the players' scores using a leaderboard.

note

The tutorial is based on a ready‑to‑go application template from the leaderboard 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 Leaderboard 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. To create a project, follow 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. 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.

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 to compare user scores in this game, add at least three participants to your project.

Set up the development environment​

Now let's clone the application template repository from the leaderboard 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#leaderboard my-project: to clone the leaderboard 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.
    3. 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.

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