{"id":22160388,"url":"https://github.com/rozek/appstudio-live-reload","last_synced_at":"2025-03-24T15:22:01.795Z","repository":{"id":57156722,"uuid":"391885445","full_name":"rozek/appstudio-live-reload","owner":"rozek","description":"a simple web server with \"live-reload\" for NSB/AppStudio","archived":false,"fork":false,"pushed_at":"2021-12-26T05:01:14.000Z","size":89,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T22:35:26.062Z","etag":null,"topics":["appstudio","live-reload","web-server"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rozek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-02T09:20:33.000Z","updated_at":"2022-02-17T00:54:38.000Z","dependencies_parsed_at":"2022-08-30T05:31:40.509Z","dependency_job_id":null,"html_url":"https://github.com/rozek/appstudio-live-reload","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fappstudio-live-reload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fappstudio-live-reload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fappstudio-live-reload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fappstudio-live-reload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rozek","download_url":"https://codeload.github.com/rozek/appstudio-live-reload/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245294719,"owners_count":20591909,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["appstudio","live-reload","web-server"],"created_at":"2024-12-02T04:07:40.229Z","updated_at":"2025-03-24T15:22:01.743Z","avatar_url":"https://github.com/rozek.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# appstudio-live-reload #\n\na simple web server with \"live-reload\" for NSB/AppStudio\n\n[NSB/AppStudio](https://www.nsbasic.com/) is a simple visual IDE to create applications for iOS, Android, Windows, macOS and Linux. These applications are based on Web technologies and may be written in JavaScript or BASIC. Combined with [VoltCloud.io](https://voltcloud.io/) (a deployment server which also integrates basic user management and a simple key-value store) AppStudio simplifies the development of applications for multiple independent users.\n\nFor the purpose of testing, AppStudio projects may be deployed to the local file system where they are read by an automatically started web server and sent to any connecting web browser.\n\nWhile this procedure sounds convenient at a first glance, it may become cumbersome as soon as one starts developing for smartphone or tablets and wants to preview and test snapshots on these external devices (rather than on the desktop). A similar situation occurs when AppStudio is used for UI development only, and business logic and/or style sheets are developed with the help of third-party tools (e.g., in order to benefit from preprocessors such as TypeScript, Babel, SASS etc.) - in such a case, changing an external file would always  require an additional deployment via AppStudio although a simple file copy could be sufficient.\n\n**Live Reloading**\n\nA common solution to this problem is \"[live-reloading](http://livereload.com/)\" of web pages (also available as an [NPM package](https://www.npmjs.com/package/livereload) for more platforms than just macOS)\n\n\"Live-reloading\" uses an additional \"monitoring server\" (besides the normal web server) which monitors a given deployment folder and informs any connected application to update or reload itself whenever any changes in the deployment folder are detected. For that purpose, the application is supplemented by a small script which handles communication with the monitoring server and performs any updates or reloads whenever needed.\n\n**appstudio-live-reload**\n\n`appstudio-live-reload` offers \"live-reloading\" for AppStudio projects by providing both web and monitoring servers and the supplemental script (which is automatically configured for the monitoring server).\n\nFor `appstudio-live-reload` to work as foreseen, the supplemental script has to be added to an AppStudio application (which is just a simple setting in the AppStudio \"Project Explorer\") and the servers started prior to new deployments (in order to configure the supplemental script for the actual IP address of your development machine). After an initial deployment, you may now navigate to the application from any browser (even multiple browsers simultaneously) and any new deployment will automatically update or reload the application on any connected browser.\n\nThe supplemental script may be removed for official releases - otherwise, it will just fail to contact the monitoring server and the application work as usual (i.e., without any automatic update or reload)\n\n**NPM users**: please consider the [Github README](https://github.com/rozek/appstudio-live-reload/blob/main/README.md) for the latest description of this package (as updating the docs would otherwise always require a new NPM package version)\n\n\u003e Just a small note: if you like this script and plan to use it, consider \"starring\" this repository (you will find the \"Star\" button on the top right of this page), so that I know which of my repositories to take most care of.\n\n## Prerequisites ##\n\n`appstudio-live-reload` requires Node.js. Since you are visiting this page, chances are good that you already have Node.js installed on your machine - if not, please follow the instructions found on [nodejs.org](https://nodejs.org/) to install it (the LTS version is sufficient if you don't plan to use Node.js on a regular basis)\n\n## App Preparation ##\n\n`livereload` requires a small supplemental script to be added to your project. Within Appstudio, add the following lines to the `extraFiles` and `extraheaders` of your project settings (found in the \"Project Explorer\")\n\n* **extraFiles**: `live-reload.js`\n* **extraheaders**: `\u003cscript src=\"live-reload.js\"\u003e\u003c/script\u003e`\n\nJust \"copy-and-paste\" the shown texts from here into AppStudio. From the next deployment on (provided that the \"monitoring server\" is running) your application will automatically be updated and/or reloaded whenever any change in the deployment folder is detected.\n\n## Installation and Use ##\n\n`appstudio-live-reload` may either be used with or without prior installation.\n\nIf you prefer an explicit installation, simply open a terminal window, navigate to the folder for your AppStudio project and instruct NPM to install the package:\n\n```\ncd XXX.appstudio\nnpm install --save appstudio-live-reload\n```\n\nYou may then start web and monitoring server using\n\n```\nnpx appstudio-live-reload\n```\n\nFrom then on, every local deployment of your project (and any changes made by external tools) will be detected and any connected browser instructed to update or reload the application. Simply navigate to\n\n```\nhttps://localhost:34567\n```\n\nor to\n\n```\nhttps://a.b.c.d:34567\n```\n\nwhere `a.b.c.d` stands for the IP address of your development machine.\n\n## Use without explicit Installation\n\nIf you do not want to install `appstudio-live-reload` (e.g., because you do not want to pollute your project folder with `node_modules/`, `package-lock.json` and `package.json`), just open a terminal window, navigate to the folder for your AppStudio project and start web and monitoring server using\n\n```\ncd XXX.appstudio\nnpx appstudio-live-reload\n```\n\nWhen invoked for the first time, you may be asked whether you really want to \"install\" `appstudio-live-reload` - in that case, do not worry and simply press \"Return\" or \"Enter\" to proceed: your project folder will remain \"clean\".\n\nFrom now on, again, every subsequent local deployment of your project (and any changes made by external tools) will be detected and any connected browser instructed to update or reload the application. Simply navigate to\n\n```\nhttps://localhost:34567\n```\n\nor to\n\n```\nhttps://a.b.c.d:34567\n```\n\nwhere `a.b.c.d` stands for the IP address of your development machine.\n\n## License ##\n\n[MIT License](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fappstudio-live-reload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frozek%2Fappstudio-live-reload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fappstudio-live-reload/lists"}