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:

• ESlint
• i18n Ally
• Babel
• Svelte intellisense
• Debugger for Chrome or Debugger for Firefox
• Stylelint

(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

Then, from within your project folder:

npm run build
surge public my-project.surge.sh

Testing your PWA's performance

We recommend using https://www.webpagetest.org/easy with the Run Lighthouse Audit option turned on. This will give you an in depth look into your app's load performance on the average device connected to the average network. For more info on how to use webpagetest check out this article