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
Vercel
WithInstall vercel
if you haven't already:
npm install -g vercel
Then, from within your project folder:
cd public
vercel deploy --name my-project
surge
WithInstall 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