Skip to main content

Graasp App Template

We provide a template to quickly start a new app for Graasp with the React framework and our query client.

You can find the rest of the instructions on how to use the template in the README of the template.

note

This documentation concerns the version 1.1.0 of the template.

Using this template​

The recommended way to use this template is with the Graasp CLI which provides a setup wizard and some convenience tools when creating your project.

Alternatively it is possible to create a new Github repo from this project using the Github Template function. In this case the local setup is left as an exercice to the reader.

With the Graasp CLI​

This template can be used with the graasp CLI to setup your project in a single line:

npx @graasp/cli@latest new -s graasp/graasp-app-starter-ts-vite

The CLI will ask you a few questions to help you setup your project. It suggests sane defaults:

  • Deploying using GitHubActions (recommended)
  • Provide an appId
  • Auto-install project dependencies
  • Initialize a local git repository

Directly from GitHub

Should you choose to bootstrap your graasp app manually, you will need to execute the following steps.

Cloning the template​

Get a copy of this repo.

Using the Template button​

Click on the Use this template button. For more instructions head over to the GitHub Docs on Using a template

Clone from the command line​

With git:

git clone

With the GitHub CLI:

gh repo clone graasp/graasp-app-starter-ts-vite

Adding Workflows​

To deploy your app using github actions.

Renaming​

You will have to look for the Graasp App Template string in yours project files and rename it to your project name

GitHub Repo setup​

If you choose to deploy your app with the provided GitHubActions workflows you will need to create the following secrets:

  • APP_ID: a UUID v4 that identifies your app for deployment
  • APP_KEY: a UUID v4 that authorizes your app with the Graasp API
  • SENTRY_DSN: your Sentry url to report issues and send telemetry

Installation​

Running the app​

Create a .env.development file with the following content:

VITE_PORT=3005
VITE_API_HOST=http://localhost:3000
VITE_ENABLE_MOCK_API=true
VITE_GRAASP_APP_KEY=45678-677889
VITE_VERSION=latest

Running the tests​

Create a .env.test file with the following content:

VITE_PORT=3333
VITE_API_HOST=http://localhost:3636
VITE_ENABLE_MOCK_API=true
VITE_GRAASP_APP_KEY=45678-677889
VITE_VERSION=latest

# dont open browser
BROWSER=none