Difference between revisions of "Web Application Development"
| Line 16: | Line 16: | ||
== Development vs Production == | == Development vs Production == | ||
| − | We have intentionally checked in the production build artifacts, so that the webapp does not need to be rebuilt every time MythTV is built | + | We have intentionally checked in the production build artifacts, so that the webapp does not need to be rebuilt every time MythTV is built. |
=== Development === | === Development === | ||
| − | To get started, first ensure you have an up to date version of | + | To get started, first ensure you have an up to date version of '''npm''' installed. Then change to '''mythtv/html/backend''' and run '''npm install'''. This will install all the required dependencies and ensure you are using the same versions as other developers. Occasionally you may need to re-run this if additional dependencies are added. |
=== Visual Studio Code === | === Visual Studio Code === | ||
| Line 38: | Line 38: | ||
==== proxy.conf.js ==== | ==== proxy.conf.js ==== | ||
| − | The file | + | The file '''mythtv/html/backend/src/proxy.conf.js''' controls how the development web server handles URLs. Without this configuration, all the API calls to the backend would fail, since they are not part of the url routes handled by the webapp. |
You can change this to point to any backend you wish to serve the API from (eg. a backend with guide data). You may create additional stanzas to send different URLs to different backends should you wish. | You can change this to point to any backend you wish to serve the API from (eg. a backend with guide data). You may create additional stanzas to send different URLs to different backends should you wish. | ||
| Line 44: | Line 44: | ||
=== Production === | === Production === | ||
| − | When you are happy with the changes you have made, you should run '''npm run build''' which will create a production build of the webapp in | + | When you are happy with the changes you have made, you should run '''npm run build''' which will create a production build of the webapp in '''mythtv/html/apps/backend'''. These build artifacts should be checked in. Ultimately they will be served by the backend when you visit the new webserver on the backend (currently runs on port 6744 by default) |
This is done so that the webapp does not need to be rebuilt at build time, and none of the npm modules are required on a build server. | This is done so that the webapp does not need to be rebuilt at build time, and none of the npm modules are required on a build server. | ||
Revision as of 20:55, 11 May 2022
Incomplete, needs to be expanded. Please help to fill the gaps or discuss the issue on the talk page
Contents
Basic instructions for working on the new WebApp
Getting started
The WebApp uses Angular, PrimeNG and PrimeFlex v3.
Angular is the web framework we use.
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.
Development vs Production
We have intentionally checked in the production build artifacts, so that the webapp does not need to be rebuilt every time MythTV is built.
Development
To get started, first ensure you have an up to date version of npm installed. Then change to mythtv/html/backend and run npm install. This will install all the required dependencies and ensure you are using the same versions as other developers. Occasionally you may need to re-run this if additional dependencies are added.
Visual Studio Code
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.
VSC has many useful extensions to aid development. Some useful ones are Angular Language Service, Angular Translation, Code Spell Checker and Trailing Spaces.
Starting the development web server
First start a local copy of mythbackend. Certain URLs will be send to the backend to be answered. (see proxy.conf.js section for details)
In a terminal in VSC type ng serve to start the development http server and point your web browser to http://localhost:4200/ (alternatively the shortcut ng serve --open. 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.
proxy.conf.js
The file mythtv/html/backend/src/proxy.conf.js controls how the development web server handles URLs. Without this configuration, all the API calls to the backend would fail, since they are not part of the url routes handled by the webapp.
You can change this to point to any backend you wish to serve the API from (eg. a backend with guide data). You may create additional stanzas to send different URLs to different backends should you wish.
Production
When you are happy with the changes you have made, you should run npm run build which will create a production build of the webapp in mythtv/html/apps/backend. These build artifacts should be checked in. Ultimately they will be served by the backend when you visit the new webserver on the backend (currently runs on port 6744 by default)
This is done so that the webapp does not need to be rebuilt at build time, and none of the npm modules are required on a build server.
Possible Problems
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.
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.
