Example template - Landing Page + App

[daKmoR]

I was thinking a landing page, blog, documentation and other such "static things" and then a big, red button "Launch app"

https://twitter.com/veikkoeeva/status/1506634867135729671?s=20&t=Ksk5mbyISqiZ_8dC8Bw4gA

[veikkoeeva]

Maybe I can explain myself a bit more in depth here. Anyone is welcome to chime in, the more thoughts the merrier. :)

I think something like Rocket static page is close to what I imagine using to build an application. With the difference for the application I would actually want to control HTML and write JS as in, say, using https://lit.dev/. Maybe this is already possible within Rocket engine too and so the experience could be seamless and more like adding complexity by way of scripts given?

Spiritually maybe something like https://jeffy.info/2021/07/17/sw-rendering.html and https://open-props.style/.

The less magic the better. Could be just a copy-paste setup with scripts on top of NPM that I can then edit as needed.

I would like to use mostly separate pages with links (page transitions?) and have the tooling to just collect the linked scripts, do the minifying and bundling, set up tests and especially CSS (e.g. something like Parcel CSS) without me worrying about the setup. Import maps would be a nice plus and easily being able to use new features in CSS and TS/JS.

Maybe someone else has an idea for a more SPA type of thing with history API and routing. So, the gist is just a separate build for the app part that happens to be linked to Rocket, I suppose.

Jeff's is a good example on other thing too. I like to push assets to Cloudflare (or other edge servers), I would be happy if I could also do server side rendering there. But that's just a plus. Taking compiled assets and publishing them to Cloudfare definitely is easy (likely for other edge systems too), SSR I don't know as I haven't tried (I think testing and all can be done with https://miniflare.dev/).

So in my mind it's almost like Rocket but with the difference that "Launch app" bridges from Markdown to another HTML page that further links to others with their CSS and JS. Then there is little more flexibility for one's choice of MPA or SPA and other things by way of "copy-paste" kind of build script that sets up a few basic tools.

This way I can keep focus on HTML, CSS and TS. A bit like SQL and maths gets never old. The problem for me always seem to setting up the build system or debugging a magic box system set by someone else.

[daKmoR]

I'm not sure I understand 😅

Possible

everything you linked here is "just" static... e.g. html that does not change depending on users input... so all that is possible with rocket today... and you can distribute it via any CDN.

e.g. URLs like

• domain.com/about/
• domain.com/blog/
• domain.com/blog/welcome-to-my-blog/

Not possible

but what is currently not possible are pages that depend on user input like creating a page of every possible color*

• domain.com/color/ff1100
• domain.com/color/00ff00
• domain.com/color/00ff01

for that you typically create the page on-demand on the server... e.g. build the html with ff1100 as the parameter "color" (e.g. something you could for example do with PHP)

what is also not possible are pages that require a "login" on the server-side (e.g. the server is sending different html based on if you are logged in or not)

[client side login if your API is handling the auth is possible]

Let's retry

puuhh seems complicated and confusing to explain 🙈 and I feel like I'm not doing a great job 😅

let's try it differently... maybe you can outline what your goal is? maybe with a wireframe or so? and the things that the website visitor can do

---

*technically it would be possible but it would be insane to prebuild ~16 million pages for all color combinations

[veikkoeeva]

I'm not sure I understand 😅

I'm just rambling. :)

Possible

Yes. Let I try to rephrase with what you wrote. The intention is more like one piece of use case ideation from someone not involved in the scene, so to speak.

These static URLs are what I have in mind both for Rocket as a static site generator but also for that application launched with that "Launch app" button.

The application with the difference that this will be generated dynamically. In this scenario I see this so that the server returns it. In my case Cloudflare worker likely makes a call to a backend API and renders the page and sends it to the calling browser instance.

This can be Lit SSR on Cloudflare. Other option in my case is Razor pages on Cloudflare or on backend.

Not possible

Well, I seem to concur with what you wrote. :)

But I see maybe your point: the build proces can only consider the static case.

I have been thinking there is just some simple logic in the application that can update to the DOM some links that when the user clicks call the backend. The backend just takes this link with parameters and returns a page. Or if it is a form or some other input that collects parameters to the backend call, update DOM accordingly before and after the call.

I think many people prefer SPA type with routers here. It may be I do too, but it feels this would work for me for now (not done it yet, but planning to).

Taking the colour example, I think it becomes possible to route in this example those dynamic colors to a template file that exists also during build time and that can be deployed to server to be used according to calls coming in. This case could work in my mind also on frontend by intercepting the URLs if I were to use links like this (for the sake of example, maybe a real use case is more complex).

Let's retry

Ah, you do what you do and works. I limb along. :)

I know I would like to do a landing page/product page with blog, quick search, maybe documentation and things like that. The more efficient the better. The most dynamic things are blog posts and such and get updated when a new version is deployed..

As for some of my rambling, specifically thinking Rocket, probably Markdown works well, I'm not sure yet if it's easy to mix HTML pages and/or CSS here to deviate from the HTML generated from the HTML generated from the Markdown.

What seem to be grey hair to me is the tooling in more application like scenario. It would be great to use latest CSS and get it transpiled to something more supported. Using those new colour spaces is one such case. It would even need to be automatic, for me. Just something that can be done easily.

So the application tool-chain, its development and testing always cause grey hair to me. Especially if I try to deviate from the setup. It's any system I try, not just modern web ones. Hence thinking aloud copy-paste script is the best. Coupled with tests it's tweakable and then visible if something breaks due to tooling.

In my mind the application is something like a main content area with a side slider (could be something else too, but as for an example here) and if that changes, it goes to a different page with different content (side panel may update, or stay the same, maybe it's a web component that all pages use and stores state to in-browser persistent store). So, it feels like simple things like link to CSS (I know web components is a bit of a parsing challenge right now) and JS transpiled from TS or JS directly and both processed to some older browsers. Like MPAs more than SPAs.

So the application for me is almost like a static site generator. I feel almost like just doing basic pages with CSS scripts and JS links to save myself from the hassle of tooling. It just feels also bad to do "basic web sites without optimizing anything" and it looks to me Rocket with something like open-props is close what I imagine works also for apps. :D