Skip to content

Latest commit

 

History

History
44 lines (26 loc) · 2.99 KB

ui.md

File metadata and controls

44 lines (26 loc) · 2.99 KB

User Interface (UI) / Website

Our website open-fixture-library.org/ is a Nuxt instance running on an Express server. That means that every page is a Vue component that is rendered on the server. Users that have JavaScript enabled can navigate purely on the client-side though, so only a small page-specific JavaScript file is downloaded via XHR and rendered in the browser. All that is handled automatically by Nuxt.

Local development server

Locally, running npm run dev starts the development server at http://localhost:5000/ with hot module reloading, i.e. a changed Vue component file patches only that component without having to reload the whole page. Port 5000 can be changed with the environment variable PORT.

Folder structure

Note: for non-UI-related folders, see README.md.

  • ui/
    • ajax/ – Handlers that respond to AJAX resquests from the frontend
    • assets/ – Icons, scripts, stylesheets, etc.
    • components/ – Reusable Vue components
    • express-middleware/ – Functions that directly hook into Express.js (the server side router)
    • layouts/ – Whole-page Nuxt layouts
    • pages/ – All website pages (in the correct directory structure) as Vue components
    • plugins/ – Nuxt plugins that load and instantiate external modules
    • static/ – Resources that don't need processing before being served
  • main.js
  • nuxt.config.js

Browser compatibility

We aim to support modern browsers without having to include too much polyfills / workarounds for legacy browsers:

  • Firefox, Chrome, Edge, Safari, Opera: the 3 newest major releases each
  • Internet Explorer 11

Have a look at caniuse.com to see with which browser versions a JS, CSS or HTML feature works.

Please stick to the code style guidelines. If a function or syntax feature is not supported in the browsers listed above and is not transpiled by the build process automatically (just search for the function name in the JavaScript file loaded by the browser), you can include a polyfill for it in ui/plugins/polyfills.js.

Deployment

Every time the Travis tests for the commits in the master branch have passed, the new version is automatically deployed to https://open-fixture-library.org/ (see the server/ directory).

Each pull request #xyz (e.g. #223) is automatically deployed to https://open-fixture-library-pr-xyz.herokuapp.com/ on Heroku (configurable with app.json). It is refreshed with each commit to the feature branch without waiting for any tests to pass.