Skip to content

Latest commit

 

History

History
101 lines (66 loc) · 3.69 KB

README.md

File metadata and controls

101 lines (66 loc) · 3.69 KB

MemberMatters (frontend)

The new MemberMatters frontend. You'll need the backend API to use this UI. Please check the memberportal folder for instructions.

The frontend software is a modern JavaScript SPA. It utilises Vue.js, Webpack, NPM, Capacitor and Electron. It also uses eslint for code formatting and linting. The frontend can be built into a normal SPA web app, a semi native iOS and Android app, and a desktop "kiosk" mode.

Note

These commands should be run from within the MemberMatters/src-frontend folder!

Getting Started

Node

Ensure you have nvm (node version manager) installed. Once you've installed nvm, you should install node 18 with nvm install 18.

Linux Tips (skip if not using Linux)

If you're using Ubuntu, you may need:

sudo apt install libpng-dev

If using Fedora, you may need:

sudo dnf install libpng-devel

Install the dependencies

npm install

Start the app in development mode (hot module replacement, error reporting, etc.)

npm run dev

Take note of the IP and port. In this case, open your favourite browser and go to http://127.0.0.1:8080/. You should be presented with the home page of the web app. Assuming you loaded the database fixtures in the backend, you can login with the username "[email protected]" and password "MemberMatters!". You should create a new account, then use the default account to give your new account admin rights. You can do so using the Django admin page for the user model which can be accessed at http://localhost:8080/admin/profile/user/. Make sure to select "super user", "staff", and "admin" for your new account. You should change the password of the default admin account or remove it once you've setup your new account.

Build the app for production

npm run build

Generate app icons

This will generate the app icons for every supported target of the MemberMatters portal (web, iOS, Android and Electron).

With the icon overlayed on a plain white splashscreen.

npm run icons

With the icon overlayed on a gradient background for the splashscreen.

npm run icons:bg

Linter

This project uses a combination of eslint and prettier to detect common errors and enforce common code style.

You should set up a file watcher as explained below, but you can also manually lint the front end by running: npm run lint

Contributing Guidelines

This frontend project uses the Quasar framework for components and building/config. All source code can be found in the src folder.

All code must pass the eslint rules. In fact, the dev server will throw an exception if your code generates an eslint error. It is recommended that you set up some sort of file watcher in your IDE that automatically runs eslint --fix <changed_file>. You should also set up your IDE to show you eslint errors or warnings (most can do this).

Routing and menu config

In the file pages/pageAndRouteConfig.js you'll find an object. This is where all of our routes and main menu pages, page titles and components are specified. If you'd like to add a new page you must add it to this file. Currently pages one level deep are supported under the children property.

Example

{
    title: 'Dashboard', // this is the page title
    icon: 'fad fa-columns', // this is the icon to use in the main menu
    to: '/dashboard', // this is the how the URL should appear in the browser
    name: 'dashboard', // this is the page and tab title
    component: () => import('pages/Dashboard.vue'), // this specifies the component to use
  }

NOTE: you must specify the component as a generator like above for lazy loading to work correctly.