Cake

Experimental new frontend for OAE

Project status

Project standards

Get started

Install the dependencies...

npm install

...then start Rollup:

npm run dev

Development

Use http://guest.oae.com for testing.

Use http://guest.oae.com?url=%2F%3FinvitationToken%3DhA7EFd5wYudH%26invitationEmail%3Dmiguel.laginha%2540apereo.org for testing invitations and other url parameters.

If you're using Visual Studio Code we recommend installing the official extension Svelte for VS Code along with several others:

(The official Prettier extension is included in Svelte for VS Code)

Here are some settings you might need (paste them onto settings.json):

  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.validate": ["javascript", "svelte"],
  "svelte.plugin.typescript.enable": false,
  "svelte.plugin.svelte.format.enable": true,
  "svelte.plugin.svelte.enable": true,
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,

Tests and validations

Run translation tests (node) with npm run test-translations.

Run svelte-check with npm run validate.

Run linting check with npm run lint.

Run (S)CSS linting with npm run lint:css.

Debugging

With VSCode use the following configuration (launch.json):

    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "sourceMaps": true,
      "url": "http://guest.oae.com",
      "webRoot": "${workspaceFolder}/www"
    },
    {
      "name": "Launch Firefox",
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "reloadOnAttach": true,
      "url": "http://guest.oae.com",
      "webRoot": "${workspaceFolder}/www"
    }

Building and running in production mode

To create an optimised version of the app:

npm run build

You can run the newly built app with npm run start. This uses sirv, which is included in your package.json's dependencies so that the app will work when you deploy to platforms like Heroku.

Deploying to the web

With Vercel

Install vercel if you haven't already:

npm install -g vercel

Then, from within your project folder:

cd public
vercel deploy --name my-project

With surge

Install surge if you haven't already:

npm install -g surge