How to set the `title` metadata field?

Learn
1

How can I set the title metadata field of webapp?

I have written a little webapp with Elm which worked out very nicely. The elm code compiles to a single index.html file which is exactly what I want. However in this index.html file the title metadata field is set as

<title>Main</title>

Is there a way to instruct the Elm compiler to set it to another value? (Something like `MyApp V 1.2.3 – so that people inspecting the index.html file see, “aha, that’s what this file is.”)

2

There are many ways to achieve that:

  1. You can use Browser#document instead of Browser#sandbox or Browser#element which allow to control the title of the page in Elm code.
  2. You can use a port that will set the title javascript side and be called in the init function. This requires to use at least Browser#element and not Browser#sandbox. This also requires on of the bellow options, making this one a bit overkill
  3. You can ask the elm compiler to generate JS code instead of HTML file (--output=elm.js) and craft your own index.html page which will have the propoer title and a script section to launch elm code
  4. Same spirit as above but less code to write : patch the index.html generated by Elm using, for example sed command : sed -i -e 's!<title>Main</title>!<title>My Own Title</title>' index.html

Tell us if you need any complementary explanation on any of these options and which solution do you come finally with.

3 Likes
3

Thanks @setop!

I think I go with option 4: Rewriting the HTML file with a command line tool.

One questions here: I use elm-live. Is there a way to hook the sed command into the elm-live watcher after it has generated the index.html? Or is another reload tool better suited for this than elm-live?

4

I’d highly recommend https://www.npmjs.com/package/elm-watch

2 Likes
5

Cool. Thanks for the suggestion!

Can elm-watch generate an index.html? (This file I then want to modify in the postprocess step.) The doco talks only about a main.js…

6

I’m not certain about outputting html. I’m not sure with either elm-live or elm-watch if you’d want to use sed with watch though. Saying you want to use sed, I’m guessing you’re only setting the title once on your final build. With that in mind, you would only need to do this for your production build in which case you can do elm make src/Main.elm --optimize | sed .... Is there a reason you’re needing to change the title during development?

1 Like
7

elm-watch cannot generate an HTML file. The assumption is that you want to create it yourself. In my opinion, that elm can output HTML files is just a convenience for beginners, so they don’t need to learn too much at once. elm-watch is mostly geared towards people who have grown out of plain elm and are a little bit more advanced. (Though I still tried to keep things simple and friendly.)

1 Like
8

No really - I just thought it would be nice if in development the correct title is shown as well. But having it only on the final build is fine too.

9

Thanks for chiming in @lydell !

Good to know.

10

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