Difference between revisions of "Web Application Development"

From MythTV Official Wiki
Jump to: navigation, search
(Some initial thoughts on developing the new WebApp)
 
m
Line 6: Line 6:
  
 
== Getting started  ==
 
== Getting started  ==
The WebApp uses [https://angular.io/ Angular] and [https://www.primefaces.org/primeng/setup PrimeNG]
+
The WebApp uses [https://angular.io/ Angular], [https://www.primefaces.org/primeng/setup PrimeNG] and [https://primefaces.org/primeflex/ PrimeFlex v3].
 +
 
 +
Angular is the web framework, PrimeNG is an Angular UI Component Library providing various form controls like text edits, check boxes, radio buttons, sliders as well as tables, panels, overlays etc
 +
 
 +
PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries.
 +
 
  
 
[https://code.visualstudio.com/ Visual Studio Code (VSC)] development environment is recommended to work on the WebApp.
 
[https://code.visualstudio.com/ Visual Studio Code (VSC)] development environment is recommended to work on the WebApp.
 +
  
 
To load the code into VSC cd to /mythtv/http/mythbackend and run '''code .''' to start working on the webapp.
 
To load the code into VSC cd to /mythtv/http/mythbackend and run '''code .''' to start working on the webapp.
 +
  
 
In a terminal in VSC type '''ng serve''' to start the development http server and point your web browser to '''http://localhost:4200/'''. Each time you save something in VSC the dev web server cause your browser to reload the web app making it easy to make changes.
 
In a terminal in VSC type '''ng serve''' to start the development http server and point your web browser to '''http://localhost:4200/'''. Each time you save something in VSC the dev web server cause your browser to reload the web app making it easy to make changes.
  
Be aware that we use Angular v13.x and many tutorials and examples on the web may not compile or work properly if they was written for earlier versions.
 
  
 +
Be aware that we use Angular v13.x and [https://primefaces.org/primeflex/ PrimeFlex v3] so many tutorials and examples on the web may not compile or work properly if they was written for earlier versions.
 +
 +
 +
Be aware we use PrimeFlex v3 
 
Many examples on the web put their assets like images, data files, fonts, css files etc in the src/assets directory unfortunately because of the way our webapp has to be proxied to get it to work with our web server that does not work. Instead you can put your assets into the  mythtv/html/assets directory which is made available to the webapp once it is installed. This can lead to some head scratching if you don't make sure the assets are installed before you start the backend and the assets are in there own folder since the backend will only search for them the first time it is started.
 
Many examples on the web put their assets like images, data files, fonts, css files etc in the src/assets directory unfortunately because of the way our webapp has to be proxied to get it to work with our web server that does not work. Instead you can put your assets into the  mythtv/html/assets directory which is made available to the webapp once it is installed. This can lead to some head scratching if you don't make sure the assets are installed before you start the backend and the assets are in there own folder since the backend will only search for them the first time it is started.
  

Revision as of 19:10, 10 May 2022

Incomplete.png Incomplete, needs to be expanded. Please help to fill the gaps or discuss the issue on the talk page

Basic instructions for working on the new WebApp

Getting started

The WebApp uses Angular, PrimeNG and PrimeFlex v3.

Angular is the web framework, PrimeNG is an Angular UI Component Library providing various form controls like text edits, check boxes, radio buttons, sliders as well as tables, panels, overlays etc

PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries.


Visual Studio Code (VSC) development environment is recommended to work on the WebApp.


To load the code into VSC cd to /mythtv/http/mythbackend and run code . to start working on the webapp.


In a terminal in VSC type ng serve to start the development http server and point your web browser to http://localhost:4200/. Each time you save something in VSC the dev web server cause your browser to reload the web app making it easy to make changes.


Be aware that we use Angular v13.x and PrimeFlex v3 so many tutorials and examples on the web may not compile or work properly if they was written for earlier versions.


Be aware we use PrimeFlex v3 Many examples on the web put their assets like images, data files, fonts, css files etc in the src/assets directory unfortunately because of the way our webapp has to be proxied to get it to work with our web server that does not work. Instead you can put your assets into the mythtv/html/assets directory which is made available to the webapp once it is installed. This can lead to some head scratching if you don't make sure the assets are installed before you start the backend and the assets are in there own folder since the backend will only search for them the first time it is started.


Build the Web App

cd into .../mythtv/html/backend and run npm run-script build to build the project. The build artefacts will be stored in the ../apps/backend directory. These should be committed, so that the backend webapp does not need rebuilding at build time.