How to get the Raw HTML output of ELM applications

Learn
1

Hi,

I would like to know how to get the Complete HTML view of my website which is generated from ELM.
Here is an example
view-source:https://santhosh.thediaryofanentrepreneur.com/ This is my landing page I created using elm-land.
It doesn’t give me the complete Html view.

image
image730×1007 100 KB

Is there a way I can download the raw HTML of the site generated from ELM?
Best would be a package or tool which elm supports. But for now I’m open to know if there are any other cli tools which could help me get such raw html.

NOTE:
I have already tried

# elm make --output=index.html

Which produces the output

<!DOCTYPE html>
<html lang="en" class="theme-dark">
<head>
    <title>Santhosh's profile</title>
    <meta name="elm-land" content="0.20.1">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.2.1/css/all.css">
    <link rel="stylesheet" href="/bulma-timeline.min.css">
    <link rel="stylesheet" href="/bulma-tagsinput.min.css">
    <link rel="stylesheet" href="/my_css.css">
    <script type="module" crossorigin src="/assets/index-MCLIfLAV.js"></script>
  </head>
<body>
</body>
</html>

Which is not I’m looking for. I need the complete html views generated as html tags.

Thanks
Santman

1 Like
2

I don’t know exactly what you are trying to achieve, but I would say that elm-pages is the best at producing pages that are sent as HTML over the wire.

Might be annoying to switch though, if you’re already using Elm Land.

1 Like
3

Thanks @lydell for your response. Yep. Migrating is not an option now :frowning:

Just to give some more context. I want to send the generated files from elm as email. And having these content as embedded javascript will not work for Email HTML, so I needed the raw HTML instead of the one with the javascript generated by elm.

4

Then it sounds like you might be looking for elm-html-string 2.0.2, and maybe Platform - core 1.0.5 to run an Elm program in Node.js, for example as a CLI tool that writes the email HTML files.

1 Like
5

Thank you @lydell I will have a look

Looks 5 years old. I will check if it still works. But I already see the limitations of img tag being not supported. But still will give me some good insight on how to go about it.

I need more time to look at this. I will get back with some updates shortly.

Thank you again for your pointers!

6

elm/html is 6 years old. Elm packages don’t really stop working over time.

What do you mean it’s not supported? Html.String - elm-html-string 2.0.2

3 Likes
7

image
image853×262 23.2 KB

8

I think that point about “void elements” only points out, that something like

img [] [ div [] [ text "test" ] ]

would NOT result in

<img><div>test</div></img>

but would result in

<img />

Somebody opened a PR (#13), that adds a test case for void elements and they use an image tag as their test example - so it looks like it should work.

1 Like
9

Just for kicks, I also thought of hand rolling my own DSL parser and renderer in ELM

It is not complete yet. Wanted to get some opinion on pros and cons of such thing compared to the possible solutions suggested here.

Obvious Cons is that, too much boiler plate code.
But the upside is I’m able to render the generated HTML using elm-land and also dump the required html on to the console, which I could pick from “node myscript.js” and get my work done.

I’m open for some feedback on this custom DSL apporach.

10

Here’s an example of extracting data when executing Elm with Node.js: elm-port-gen/src at master · ronanyeah/elm-port-gen · GitHub

Another project you may want to leverage is: https://documentation.mjml.io/ (non-Elm)

11

Thank you for the suggestion. Infact I’m trying to build an alternative for this using Elm :slight_smile:

Can you please update the readme file on how to use this exactly?

12

The gen script in package.json runs it.

13

There is also elm-html-in-elm 1.0.2, which requires a small patch of the generated JS elm app.
elm-pages uses (a vendored version of) this internally. Or you could try GitHub - ThinkAlexandria/elm-static-html: Statically render html from Elm!, which is a CLI wrapper around it.

14

Thank you @klaftertief for your suggestion. I will have a look at it and get back.

15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.