hangar-tech
/
listmonk
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
listmonk/frontend
History
Vivek R 6c234f1b1d fix: use inbuilt frontend dev server to proxy API 
Vue's inbuilt dev server can be configured to proxy API for
development instead of directing developers to setup Nginx proxy.
Additionally this commit also adds an option to configure frontend port
on which dev server runs. Sample env config file is under
`frontend/.env.sample`, it can be copied to either `frontend/.env` or `frontend/.env.local`.

Available options are

LISTMONK_FRONTEND_PORT - Configure frontend dev server port (defaults to 8080)
LISTMONK_API_URL - Configure API server URL (defaults to http://127.0.0.1:9000)

Since env variables are sourced to current session we are prefixing it with `LISTMONK_`.
 		2020-10-03 04:50:07 +05:30
..
fontello Add campaign search UI. 2020-08-01 19:46:47 +05:30
public Add rebranded design elements. 2020-08-09 19:15:44 +05:30
src Update Settings.vue 2020-09-19 00:11:42 +02:00
.browserslistrc Rewrite frontend with Vue+Buevy and ditch React+Ant Design. 2020-07-04 00:12:14 +05:30
.editorconfig Rewrite frontend with Vue+Buevy and ditch React+Ant Design. 2020-07-04 00:12:14 +05:30
.env.sample fix: use inbuilt frontend dev server to proxy API 2020-10-03 04:50:07 +05:30
.eslintrc.js Rewrite frontend with Vue+Buevy and ditch React+Ant Design. 2020-07-04 00:12:14 +05:30
.gitignore Rewrite frontend with Vue+Buevy and ditch React+Ant Design. 2020-07-04 00:12:14 +05:30
README.md Refactor and fix media uploads. 2020-07-05 17:35:05 +05:30
babel.config.js Rewrite frontend with Vue+Buevy and ditch React+Ant Design. 2020-07-04 00:12:14 +05:30
package.json Upgrade JS dependencies (security fixes) 2020-08-01 20:28:39 +05:30
vue.config.js fix: use inbuilt frontend dev server to proxy API 2020-10-03 04:50:07 +05:30
yarn.lock Upgrade JS dependencies (security fixes) 2020-08-01 20:28:39 +05:30

README.md

listmonk frontend (Vue + Buefy)

It's best if the listmonk/frontend directory is opened in an IDE as a separate project where the frontend directory is the root of the project.

For developer setup instructions, refer to the main project's README.

Globals

main.js is where Buefy is injected globally into Vue. In addition two controllers, $api (collection of API calls from api/index.js), $utils (util functions from util.js), $serverConfig (loaded form /api/config.js) are also attached globaly to Vue. They are accessible within Vue as this.$api and this.$utils.

Some constants are defined in constants.js.

APIs and states

The project uses a global vuex state to centrally store the responses to pretty much all APIs (eg: fetch lists, campaigns etc.) except for a few exceptions. These are called models and have been defined in constants.js. The definitions are in store/index.js.

There is a global state loading (eg: loading.campaigns, loading.lists) that indicates whether an API call for that particular "model" is running. This can be used anywhere in the project to show loading spinners for instance. All the API definitions are in api/index.js. It also describes how each API call sets the global loading status alongside storing the API responses.

IMPORTANT: All JSON field names in GET API responses are automatically camel-cased when they're pulled for the sake of consistentcy in the frontend code and for complying with the linter spec in the project (Vue/AirBnB schema). For example, content_type becomes contentType. When sending responses to the backend, however, they should be snake-cased manually.

Icon pack

Buefy by default uses Material Design Icons (MDI) with icon classes prefixed by mdi-.

listmonk uses only a handful of icons from the massive MDI set packed as web font, using Fontello. To add more icons to the set using fontello:

  • Go to Fontello and drag and drop frontend/fontello/config.json (This is the full MDI set converted from TTF to SVG icons to work with Fontello).
  • Use the UI to search for icons and add them to the selection (add icons from under the Custom section)
  • Download the Fontello pack and from the ZIP:
    • Copy and overwrite config.json to frontend/fontello
    • Copy fontello.woff2 to frontend/src/assets/icons.
    • Open css/fontello.css and copy the individual icon definitions and overwrite the ones in frontend/src/assets/icons/fontello.css