Graasp Builder

Installation

1. Run yarn to install the dependencies.

2. Run the API at localhost:3000

3. Set the following environnement variables in .env.development

   VITE_PORT=3111
   VITE_GRAASP_API_HOST=http://localhost:3000
   VITE_SHOW_NOTIFICATIONS=true
   VITE_GRAASP_AUTH_HOST=http://localhost:3001
   VITE_GRAASP_PLAYER_HOST=http://localhost:3112
   VITE_GRAASP_ANALYZER_HOST=http://localhost:3113
   VITE_GRAASP_LIBRARY_HOST=http://localhost:3115
   VITE_GRAASP_ACCOUNT_HOST=http://localhost:3114/account
   
   # in prod, it is https://go.graasp.org
   VITE_GRAASP_REDIRECTION_HOST=http://localhost:3000/items/short-links
   VITE_H5P_INTEGRATION_URL=
   VITE_VERSION=latest-dev

4. Run yarn start. The client should be accessible at localhost:3111

Authentication

The first requirement for fully accessing the client is to be authenticated. If not, the client will redirect to the authentication page. You have two possibilities to authenticate:

1. Set up and run the graasp-auth repository. You may need to adapt your configuration to match the hosts.
2. Use Postman or anything similar to authenticate. Send to the API either
   • POST <API_HOST>/register with name and email or
   • POST <API_HOST>/login with your registered email. Once authenticated, you should receive a link to receive your cookie. Refer to the API for more details.

You are successfully authenticated if you can access to the client without being redirected.

Testing

The tests are run using Cypress. Cypress only compiles the code for the tests, your app needs to run at the specified baseUrl in the cypress config.

Running tests in interactive mode

Set the following environnement variables in .env.test

VITE_PORT=3333
VITE_GRAASP_API_HOST=http://localhost:3000
VITE_GRAASP_AUTH_HOST=http://localhost:3001
VITE_GRAASP_PLAYER_HOST=http://localhost:3112
VITE_GRAASP_LIBRARY_HOST=http://localhost:3005
VITE_GRAASP_ANALYZER_HOST=http://localhost:3113
# in prod, it is https://go.graasp.org who will redirect to the backend
VITE_GRAASP_REDIRECTION_HOST=http://localhost:3000/items/short-links
VITE_H5P_INTEGRATION_URL=
VITE_VERSION=cypress-tests
VITE_SHOW_NOTIFICATIONS=true

Run yarn start:test and yarn cypress:open in 2 terminal windows.

:warning: It is possible that the websocket test become flacks (or just stop passing) if you use the dev server. In that case, you can resort to first building the app in test mode yarn build:test and then starting a preview of the app with yarn preview:test.

Running all tests in headless mode

You will need to have the .env.test file from the other section.

You can simply run: yarn test. This will:

1. Build your app in test mode (using the .env.test file to pull env variables)
2. Start your app in preview mode (simply serve the generated files with a static http server, but using the same .env.test file)
3. Start the cypress tests to run your full test suite (this can take a while depending on the number of tests you have)

Developing

While developing you can run yarn check to perform prettier formatting checks, type checks and eslint rule checking.

Translations

You can translate Graasp Builder through GitLocalize. Let us know if your language is not available.

Contributors

Kim Lan Phan Hoang 💻

Alexandre Chau 💻

Basile Spaenlehauer 💻