Graasp Account

Translation status

Getting Started

You will need pnpm. Refer to the Getting started documentation for developers to install it using volta

1. Install the dependencies pnpm i
2. Start the development server with pnpm dev

Environment variables

For reference, here are all the environment variables that you can use to override the behavior of the app. In development none of them should be required. But some checks might require them.

# .env.development
VITE_VERSION=local
VITE_PORT=3114
VITE_GRAASP_API_HOST=http://localhost:3000
VITE_SHOW_NOTIFICATIONS=true

VITE_UMAMI_WEBSITE_ID=<the id of your umami project>
VITE_UMAMI_HOST=http://localhost:8000

VITE_SENTRY_ENV= # some value
VITE_SENTRY_DSN= # some value

VITE_RECAPTCHA= # some value

VITE_GRAASP_H5P_INTEGRATION_URL= # the origin for the h5p integration

VITE_GRAASP_REDIRECTION_HOST=http://localhost:3114/redirect

Running the project in preview mode

If you do not need to actively develop the project you can run it in preview mode. This mode runs the app from the static build and uses a lot less RAM compared to running in development mode.

1. You need to have a .env.production file with the following content:

   VITE_GRAASP_H5P_INTEGRATION_URL=http://localhost:3000/items/h5p-assets/
   VITE_GRAASP_REDIRECTION_HOST=http://localhost:3114/redirect

2. Build the project pnpm build

3. Preview the project pnpm preview

4. Open the app running on: http://localhost:3114

Running with Docker

In this section we give instructions on how to host the static files of this project with docker.

Using the following command, you should be able to build an image that contains the statically built assets for this project and a static web server to host them.

docker build -t client-local \
 --build-arg VITE_GRAASP_H5P_INTEGRATION_URL=http://localhost:3000/items/h5p-integration \
 --build-arg VITE_RECAPTCHA=<recaptcha_site_key> \
 --build-arg VITE_GRAASP_REDIRECTION_HOST=http://localhost:3000/short-links \
 .

Change client-local to the image and tag name you prefer. For example client:latest to name the image client and tag it as latest. Also update the <recaptcha_site_key> value with your own.

To use this image, run it with:

docker run --rm -p 3114:80 client-local

Now the client should be served at http://localhost:3114 change 3114 in the command above to the port you prefer.

Test setup

# .env.test
VITE_VERSION=local
VITE_PORT=3333
VITE_GRAASP_API_HOST=http://localhost:3636
VITE_SHOW_NOTIFICATIONS=true
VITE_GRAASP_ANALYZER_HOST=http://localhost:3005

Contributors

Kim Lan Phan Hoang 💻	Alexandre Chau 💻	Basile Spaenlehauer 💻	Thibault Reidy ⚠️ 💻	Martina Vincoli 🎨 🌍	Jérémy La Scala 💻 🐛 ⚠️ 🔬
Morgan Ridel 🚇 💻 ⚠️ 📖	Juan Carlos Farah 💻 👀 ⚠️ 🔬 🤔 🐛	claudiaalarconlpz 🌍 🔬	Ziting Li 💻 ⚠️ 🎨 📓	MalinSvenberg 💻 ⚠️ ️️️️♿️	Po-Jui Chang 💻 ⚠️ 🎨
mariembencheikh 💻 ⚠️ 🎨 🌍	Lina Ebeid 💻 ⚠️ 🎨 ️️️️♿️ 🌍	Víctor González 🚇 ⚠️ 🔧	Alvaro Bautista 💻 ⚠️ 🎨	Louise Wang 💻	abdallah75 💻
Julien Torrent 💻 ⚠️	Su 💻 ⚠️	HusamJubran 🌍