Live CockpitCMS+Svelte Projects:

0. Basic CockpitCMS+Svelte Orientation

Documentation Contents

Information important for site maintenance
Explanation of intentions, why certain technologies were used
~~Creation process~~ NYI

Technologies Used

Front-end: Svelte (very little 3rd party JS (only Axios and FontAwesome))
Back-end: CockpitCMS (internally modified version + addons)
Management: NPM (Node.js) for general project and package maintenance
- Commands are listed in package.json under scripts, or below, run via npm run COMMAND
Some additional packages:
- rollup as part of the default Svelte template for managing Svelte compilation
- babel and terser for polyfilling (currently implemented generally for all browsers without distinction)
- ftpdeploy for one-way FTP upload
- mkdocs (external installation from PIP (Python)) for generating an interactive HTML version of this Markdown documentation.

How to set up all scripts for compilation / maintenance

1. Package installation

npm install

Just in case something is broken, it's good to use npm install without additional parameters - this command will install all packages that are missing but are defined as required in package.json

Documentation

pip install mkdocs mkdocs-material mdx_truly_sane_lists

For documentation you need mkdocs and the mkdocs-material theme, which can be downloaded via PIP (Python), more here, or here. Additionally, mdx_truly_sane_lists is also installed.

2. Individual commands

Current options Explanations

npm run build - Compiles the entire project into the public folder in a state where it's ready for public use (all JavaScript goes through Babel and Terser for compatibility with IE11 and similar)
npm run dev - Quickly live compiles the project for local development, also starts a webserver, also into the same public folder, however due to prerendering everything goes through a php file and you need to access it through an external WAMP server, live reload works on it as well
npm run start - Starts only the webserver
npm run ftp_ - Uses ftpsync.js to upload all parts of the public site (except cockpit stuff) to the FTP server (webhosting)
npm run ftp - ftpsync.js upload only essential parts (bundle.js/css and svelte.html)
npm run ftpgc - ftpgetcockpit.js downloads sqlite and uploads for content synchronization from the server
npm run docs - Compiles documentation .md to .html
npm run docsdev - Live compilation of changes + documentation webserver

Current options	Explanations
	`npm run build` - Compiles the entire project into the public folder in a state where it's ready for public use (all JavaScript goes through Babel and Terser for compatibility with IE11 and similar) `npm run dev` - Quickly live compiles the project for local development, also starts a webserver, also into the same public folder, however due to prerendering everything goes through a php file and you need to access it through an external WAMP server, live reload works on it as well `npm run start` - Starts only the webserver `npm run ftp_` - Uses ftpsync.js to upload all parts of the public site (except cockpit stuff) to the FTP server (webhosting) `npm run ftp` - ftpsync.js upload only essential parts (bundle.js/css and svelte.html) `npm run ftpgc` - ftpgetcockpit.js downloads sqlite and uploads for content synchronization from the server `npm run docs` - Compiles documentation .md to .html `npm run docsdev` - Live compilation of changes + documentation webserver

Regarding running the live webserver (`npm run dev` / `npm run serve`)

These live servers don't support PHP, so WITHOUT a separate apache/nginx/php/wampserver/xampp/lamp/... instance on port 80 (current API values), which also points to the public folder (where /cockpit is), it WON'T be possible to load the API from Cockpit and will throw a 500 error.

Recommended is wampserver, to ensure functionality you need to install all C++ redist.

Next: 1. Folder Hierarchy