Proposal: SSG/PWA Generator based on Elmish and React

[ghost]

I am currently setting up my developer blog with Gatsby and I like the experience.

I want to create something like that based on Fable and Elmish. I think a MVP should be able to generate Elmish components/pages at designtime from Markdown.

A more general approach and the next logical step would be sourcing from GraphQL at design time. That would be a great upstream use case and battletest for https://github.com/fsprojects/FSharp.Data.GraphQL.

Can any of you give me advice what placed to dive in first? I would really love to host my blog with technologies I promote ... for credibility and trust building that would be an advantage 😄

[alfonsogarciacaro]

Hi @kfrie! I'm really sorry I didn't reply earlier. I just saw this issue and realized I must have missed the notification somehow 😞

Elmish is a state manager so it's only used for dynamic sites. An example of a site made with Elmish that's mostly static is the web of last FableConf, while Fable's own site is indeed generated statically from markdown files (it uses Fable.React but not Elmish, because there's no state). We tried to extract the helpers to this repo but we haven't worked much on it and it's probably old.

About GraphQL, I haven't had good experiences with it so personally I don't like the technology very much. But it'd be great if you could integrate it with Fable!

[ghost]

Hi @alfonsogarciacaro

I doubled down on the notification miss 🙈. I'm glad that you always take the time to reply!

The resources you posted are extremely helpful and guide into the right direction.
While fiddling around with Gatsby I began to discover what my actual use case essentially is 😄.

For me, it is about the ability to create JAMStack apps with Fable and Elmish. And content sourced from Markdown at build-time side-by-side, such that the Markdown content to be sourced sits in the same repo as the app itself, and whenever the content gets updated (i.e. by a new commit by one of the numeruous Headless CMS, the site gets updated.

So that there is still a app.js in the end as usual, but with hyperlinks to the proper generated content parts weaved in at build-time if any. So assume there needs to be some sort of top-level client-side router logic reconciling those. That is the aspect I want to take from Gatsby.

I see this as a good opportunity to use and spread SAFE/Fable/Elmish. And I see it as a sweet spot for certain kinds of sites/apps that small to mid-size businesses need. They usually have something knocked off with Drupal or WordPress or use some sort of site building service like WiX. However, the crucial part is the delivery of CMS functionality and that can then be outsourced to mature tools that are decoupled from the web site /app itself. And it would be a great feature for blogs and documentation homes too. And it can be hosted anywhere for no cost, e.g. with Netlify that gives instant leverage to additional mighty features.

I was mentioning GraphQL because Gatsby supports content generation from GraphQL queries at design time + live updates and I really liked how easy I could plug external content into the app. However 70% of that experience is probably attributed to Gatsby tool chain and not to GraphQL, so before I consider tackling that, I need to have a real-world use-case myself. And I think the Markdown part is way more important.

I am currently preparing a little sample app with SAFE for a talk I will be giving in August in Zurich. I already have some ideas for that Markdown scenario within that app, but I will only possibly tackle it after the talk. Would be a good project for a proper deep-dive into Fable and JS tooling too for me 😄.

BTW was good seeing you at fsharpconf :D.

[hotyes]

My website is based on Fable+React+Elmish, I did whatever I can do for PWA and SEO, but seems google doesn't like my website. the crawler can not get the real content other than the template html file. it will be good if you have any best practices.

you can check the webcache here: http://webcache.googleusercontent.com/search?q=cache:y3o1wYExOH4J:https://www.xcg123.com/series/54720E76C72E21635BF8B465119BDDE1&hl=en&gl=ph&strip=0&vwsrc=0

and my website https://www.xcg123.com

thanks

[forki]

You may want to look at SSR in SAFE-Stack. https://compositional-it.com/blog/2019/02-18-server-side-rendering-with-safe/index.html hotyes <[email protected]> schrieb am Do., 28. Feb. 2019, 16:41:

…

My website is based on Fable+React+Elmish, I did whatever I can do for PWA and SEO, but seems google doesn't like my website. the crawler can not get the real content other than the template html file. it will be good if you have any best practices. you can check the webcache here: http://webcache.googleusercontent.com/search?q=cache:y3o1wYExOH4J:https://www.xcg123.com/series/54720E76C72E21635BF8B465119BDDE1&hl=en&gl=ph&strip=0&vwsrc=0 and my website https://www.xcg123.com thanks — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#76 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADgNB9g5mIzefJGp-q5LmMhza0JChYJks5vR_jAgaJpZM4S5LDj> .

[hotyes]

hi @forki yes I was considering server side rendering .. but client side rendering also have some benefits which not easy for me to make the decision ..

my current website the FE is hosted on netlify, a very nice static website host service. and I am planing move my api service to azure function, to make it as a serverless app.

[forki]

Read the article. It's both. Initial rendering (especially for search engines is server side). Then when the bundle is loaded, client side takes over. hotyes <[email protected]> schrieb am Do., 28. Feb. 2019, 16:52:

…

hi @forki <https://github.com/forki> yes I was considering server side rendering .. but client side rendering also have some benefits which not easy for me to make the decision .. my current website the FE is hosted on netlify, a very nice static website host service. and I am planing move my api service to azure function, to make it as a serverless app. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#76 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADgNIk-rf-PCrz3huQX7_c4nQngriiWks5vR_s0gaJpZM4S5LDj> .

[hotyes]

Hmm okay I got your point .. but where to host the home page is the problem.
now my https://www.xcg123.com is hosted on static web hosting server. and my api service is on anther server with diff domain. this is the tricky part.

[MangelMaxime]

If you can't use SSR, I think you can improve the situation by user a page loader.

Here is a demo of a page loader to be sure we speak of the same things :)

Or if you don't want a page loader, you can also make your components reserves their dimensions in the DOM using placeholder and then replace the placeholder with the real content.

I don't remember exactly the rules of the performance measurement for SEO so I am not sure if this can work or not.

[hotyes]

hi @MangelMaxime thanks for your reference .. currently I am trying to use pre-rendering for my website, see how is the result :)