What are the bare essentials for a web app?

Factual Questions
1

I want to build a web app, for fun.

I have built various air quality sensors running on ESP8266micro-controllers, communicating via a message broker to an agent which persists the readings to a MariaDbdatabase.
I have built a R-Shiny app to analyze/present readings to anyone with a browser.

I am bored of using R Shiny, it is kinda limiting and the free version doesn’t support HTTPS etc.

So I want to build a proper web app instead.

So far, I have built a back end web server which provides a REST type API so that anything that can speak HTTP can request data. This is working perfectly and I have even ported my shiny app to use the web api rather than directly connecting to the MySql DB.

My favorite language is F# so I have built the web api using Suave and I want to build the front end in Elmish.

However I don’t really know much about web apps and I can’t figure out how to deploy anything!

Here comes my question…

My (perhaps flawed) understanding is that all I need for any web app front end is HTML, CSS and Javascript. (Elmish generates Javascript). So I could, in principle, just double click on an html file (with appropirate linkage to CSS and JS files) and everything would work just fine. Is that correct? How do I do it from the back end server? Do I just respond to some request with an html file? what about the css and js files?

I’m asking this question here because dopers are willing to explain things. If I asked this on stack overflow, they would have a fit!

2

Hey, it sounds like you already understand programming and general server-client stuff. Are you asking specifically how you deploy web apps so that they can be user-facing?

If so, you really shouldn’t be running your own web host from home unless you really know what you’re doing. The security risks are huge (if it’s your own computer). Even if you’re using an embedded device like a Pi, it would be slow and tedious for your users unless you have high upstream bandwidth and a static IP or dynamic hostname and all that jazz. Basically, it’s just not a good practice when proper web hosting is so cheap or even free.

If you’re just trying to publish data onto the web and maybe visualize it, you can look at drop-in solutions like Google Data Studio or Bing PowerBI etc: https://improvado.io/blog/tableau-vs-looker-vs-power-bi-vs-google-data-studio-vs-bigquery

They basically connect to a DB backend, run the data through some analyses and transformations, and visualize it in dashboards and graphs. I built quick-and-dirty server and equipment monitors out of these, for example.

If you want to roll your own, you can sign up for a free Google App Engine account (your usage, for hobbyist use, will probably never exceed the free tier). From there, you basically just make a HTML page with some JavaScript that talks to your backend. When a user visits the HTML, the JS runs on their computer, and their computer directly talks to your backend. BTW, your backend also should not be your own computer but a cloud database or pub/sub service… Firebase would be one option, or Google CloudSQL, etc. Then you regularly push data changes from your computer to your cloud database (never allowing incoming access, for security again). Treat all the cloud stuff as disposable and back up them regularly, because chances are botnets will attack them with some frequency. You can add CloudFlare or another security layer on top of it if you want.

Amazon has similar services, but Jeff Bezos is a shithead who mistreats all his workers, so I don’t recommend them.

As for actually writing the JavaScript to talk to your backend, I like Angular, but there are many web app frameworks (React, etc.) you can choose from. Or you can write a basic one using jQuery or even plain JS (not recommended) or various other higher-level languages. It all gets compiled down into JS to the user.

If you want more details, you can elaborate on what you’re actually trying to do (what sort of data, to which users, how often, etc.). And I’ve had really good luck asking on Stack too; don’t neglect them altogether. Maybe the web apps stack? https://webapps.stackexchange.com/

3

I forgot to mention something: There is another model (non-AJAX) where, instead of using JS to communicate with the backend, the web server itself does all the communications itself and serves the user a flat HTML page, rendering it with the latest data with every refresh. This isn’t recommended for any real-time data because the user (and your web server) would have to redraw the entire page for every update, but it might be easier to write. For example, you could use PHP or ASP to grab stuff from the database and just spit out the HTML. This is a pretty antiquated way of doing things, but might be somewhat simpler to learn if you just want to put something up ASAP instead of following modern conventions.

4

Thanks! I was actually thinking of hosting it myself, and I might still do that and just restrict it to my LAN; this isn’t anything serious and don’t particularly feel the need to share it with anyone.
The project is a system to monitor air quality in my house. I currently have 4 sensors each streaming 4 different readings (Temp, Humidity, and 2 different types of dust)every 7 seconds.
Like I said, everything is working just fine and at this point I am just rewriting everything using different technologies and languages just as a learning exercise.
Once I am done with this, I am going to rewrite everything in Haskell and then again in Lisp!

Then again I might go with an externally hosted build as well, just because it sounds cool. But I wonder if any of the free/cheap options would have a problem with me constantly streaming data? I assume not.
Sent from my iPhone using Tapatalk

5

Oh, if it’s for your own private use on the LAN, then yeah, you can do it however you want. However, doing it the “right” way could make it a valuable skill to use with other projects too, whether for pay or as a volunteer in the open-source/civic hacking/environmental sensors worlds. For example, sites like wunderground.com or openpv.nrel.gov welcome citizen data, but they probably have their own (simpler) ways of uploading. I don’t know if you’re doing PM2.5 stuff, but I know some environmental groups were trying to gather data on air pollution in different neighborhoods, seeing if (for example) schools near highways suffer from worse particular pollution and worse grades.

Maybe you’d want a self-hosted, open-source dashboard like https://grafana.com/

Looks like it’d save you a lot of time in terms of visualizing the data or setting up filters and alerts, etc.

And no, the cloud providers wouldn’t care how often you stream data, it’s just the cumulative monthly bandwidth they care about (how much data). If you stream a few bytes every second, over the course of the month it’s still nothing. (But depending on your service, you might have to configure firewall rules so they don’t think you’re doing a denial of service attack on yourself.)