readme.md

   1 # WrApp
   2
   3 ## Development
   4
   5 * Once: Run `npm install` to install all needed components (taken from `package.json`).
   6 * Run `npm run dev`
   7 * To serve on hosts other than localhost: `npm run dev -- --host`
   8 * To serve with the base path `/winterrodeln/wrapp`:
   9   `npm run dev -- --base /winterrodeln/wrapp`
  10 * For debugging output, add `-d`
  11
  12
  13 ## Environment variables
  14
  15 The following environment variables defining the local URI to be used to access MediaWiki `api.php` and `index.php`.
  16 You might put it to a file called .env in order to make it available via the Vite server.
  17
  18     WRAPP_WINTERRODELN_API=/winterrodeln/api.php
  19     WRAPP_WINTERRODELN_INDEX=/winterrodeln/index.php
  20
  21
  22 ## Deployment
  23
  24 * Run `npm run build` to create a dist folder that just has to be delivered by a web server.
  25 * To be able to interact with a local MediaWiki server, use an apache proxy configuration, e.g.
  26
  27     <Location /winterrodeln/wrapp>
  28         ProxyPass http://localhost:3000/winterrodeln/wrapp
  29         ProxyPassReverse http://localhost:3000/winterrodeln/wrapp
  30     </Location>
  31
  32   start the Vite server with `npm run dev -- --base /winterrodeln/wrapp` and use http://localhost/winterrodeln/wrapp instead of http://localhost:3000/ to access the server.
  33
  34
  35 ## Conventions
  36
  37 * Naming of Vue components: Although not consistently done yet, the idea is the following:
  38   * Components that *show* properties, say a lon/lat coordintate are named as the property (without a `Show` postfix like we had this in the past), e.g. `LonLat.vue`.
  39   * Components that *edit* properties add a `Edit` postfix, e.g. `LonLatEdit.vue`.
  40   * Components that use an other component just for debugging/development purposes add a `Dev` postfix, e.g. `LonLatDev.vue`.
  41
  42
  43 ## Used components
  44
  45 ### Development system
  46
  47 * [NVM (Node Version Manager)](https://github.com/nvm-sh/nvm): Used to user-install NodeJs as the version in Debian stable is outdated. Install with
  48   `curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash` followed by
  49   `nvm install node`
  50
  51 * [Node.js](https://nodejs.org/en/): Some tools need Node.js. Install with `nvm install node` (installed v15.8.0 at time of writing).
  52
  53 * [Vue.js 3](https://v3.vuejs.org/): Web framework. Install with `npm install vue@next`
  54
  55 * [Vite](https://github.com/vitejs/vite): Web development build tool. Install with `npm init @vitejs/app wrapp`
  56
  57 ### Client side
  58
  59 * [Vue 3](https://v3.vuejs.org/)
  60
  61 * [json-editor](https://github.com/json-editor/json-editor)
  62
  63
  64 # MediaWiki server
  65 * [All sledruns](https://www.winterrodeln.org/mediawiki/api.php?action=query&list=categorymembers&cmtitle=Kategorie:Rodelbahn&cmlimit=100&format=json)
  66 * [Raw JSON sledrun schema](https://www.winterrodeln.org/mediawiki/index.php?title=Winterrodeln:Datenschema/Rodelbahn/V1.json&action=raw)
  67 * [Raw JSON for sledrun](https://www.winterrodeln.org/mediawiki/index.php?title=Latschenh%C3%BCtte/Rodelbahn.json&action=raw)
  68 * https://www.winterrodeln.org/wiki/Latschenh%C3%BCtte/Rodelbahn.json
  69 * https://www.winterrodeln.org/wiki/Winterrodeln:Datenschema/Rodelbahn/V1.json
  70 * https://www.winterrodeln.org/wiki/Formatvorlage_Rodelbahn/Kopiervorlage
  71 * API to comapre two revisions: http://sirius/mediawiki/api.php?action=compare&fromrev=16200&torev=16201
  72 * Compare lates revision with text: http://sirius/mediawiki/api.php?action=compare&fromtitle=Latschenhütte&toslots=main&totext-main=abc
  73
  74
  75
  76 # Knowledge and Considerations
  77
  78 ## JSON Schema and related topics
  79
  80 * https://json-schema.org/
  81 * https://github.com/json-editor/json-editor
  82 * [Online JSON Editor Playground](https://pmk65.github.io/jedemov2/dist/demo.html)
  83 * [Online JSON Editor with Schema](https://json-editor.github.io/json-editor/)
  84
  85
  86 ## CSS frameworks
  87
  88 * https://bulma.io/
  89 * https://quatrochan.github.io/Equal/
  90
  91
  92 ## Flask
  93
  94 * https://flask-cors.readthedocs.io/en/latest/
  95
  96
  97 ## Vue
  98
  99 * https://www.npmjs.com/package/vue-markdown-render
 100 * https://v3.vuejs.org/
 101
 102
 103 ## Typescript
 104
 105 * https://amandeepkochhar.medium.com/typescript-error-could-not-find-a-declaration-file-for-module-xyz-dfbe6e45c2bd
 106 * https://www.tutorialsteacher.com/typescript/
 107
 108
 109 ## Examples
 110
 111 * https://testdriven.io/blog/developing-a-single-page-app-with-flask-and-vuejs/
 112