Elm Reactor + External CSS #138

PedroSena · 2015-08-09T17:19:48Z

Hi,

I'd like to know if it is possible to use the reactor(by using I mean keep it recompiling the code at every change, debug and time-travel) with an external CSS being loaded with the Elm file. Let's say my entire project is just a single Elm file(or centralized on a main Elm file) and I want to use the reactor with an external CSS source, is this possible ?

My current "solution" is to use grunt and make it recompile the code but obviously I lose the debug and time-travel abilities from reactor, I'm willing to implement this myself, just want to collect some feedback first and maybe some initial guidance.

My idea is to simply add a <link> reference in the header of the auto generated HTML based on some commmand line argument, something like that:

elm reactor --include-css main.css

It would be up to the person to generate this single CSS containing everything he needs but I believe this wouldn't be an issue(at least not so big as having to choose between CSS and debug+time-travel).

Thanks

The text was updated successfully, but these errors were encountered:

jvoigtlaender · 2015-08-09T20:53:10Z

Maybe some of the solution(s) here would help you in the meantime, in the absence of the specific feature you ask for?

PedroSena · 2015-08-10T12:52:44Z

Thanks for pointing that out @jvoigtlaender , I'll give them a try, but it is good to see that other people had similar needs in the past

Warry · 2015-10-06T12:14:29Z

I drop this here, it could be nice if in addition to Html and Element return types for main we could have something like Document that'd look like this:

type alias Document =
    { title : String
    , metas : List Meta
    , scripts : List Script
    , stylesheets : List Stylesheet
    , body : List Html
    , className : String
    }

People are constantly asking on the ML or here how to achieve this, it must reflect a real need.

mordrax · 2016-05-14T05:23:28Z

I'm surprised that something simple like having a bootstrap/semantic UI css along side elm has taken me half an hour to get to this point with no results...

elm-css wouldn't be my first solution as I don't want to spend months rewriting styling for my simple project needs. Is it still not possible to include css in a elm project?

fluxxu · 2016-05-21T23:01:38Z

Try this:
https://github.com/moarwick/elm-webpack-starter

aaronwhite · 2016-05-22T03:32:10Z

@fluxxu loving it

oz123 · 2016-08-19T06:30:09Z

I am trying to learn elm, coming only with basic experience with js Html and CSS. I don't want to work with less, scss or sass or other tools like webpack. Trying to solve the problem of including external CSS in my elm project I keep getting search results about elm-reactor and elm-css.

For people like me, it would be just great to have and example minimal as html with one external CSS file.

therustmonk · 2016-08-19T06:43:12Z

@oz123 You could use workaround like this. Add index.html to your src forder with styles.css file. Contents of index.html:

<html>

        <head>
                <meta charset="UTF-8">
                <title>Title</title>
                <link rel="stylesheet" href="styles.css"><!-- Put your styles in folder with index.html -->
        </head>

        <body>
                <div style="width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #9A9A9A; font-family: &#39;Source Sans Pro&#39;;">
                        <div style="font-size: 3em;">Building your project!</div>
                        <img src="/_reactor/waiting.gif">
                        <div style="font-size: 1em">With new projects, I need a bunch of extra time to download packages.</div>
                </div>
        </body>

        <!-- Fonts and external JS and styles are available, I've put Ace for example -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/ace.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/theme-chrome.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/worker-lua.js"></script>

        <!-- Put the name of your app here (my sources place in `src` forder) -->
        <script type="text/javascript" src="/_compile/src/YourApp.elm"></script>

        <!-- Removes splash and starts elm app. -->
        <script type="text/javascript">
                while (document.body.firstChild) {
                        document.body.removeChild(document.body.firstChild);
                }
                runElmProgram();
        </script>

</html>

Now, open it with reactor :)

oz123 · 2016-08-19T06:52:35Z

@deniskolodin, wow! Thanks for the quick response. So this will also work with elm-make?
Like I said, currently I am interested in final build products and not the how to add CSS in the reactor.

therustmonk · 2016-08-19T07:13:32Z

@oz123 I use different for testing and production. But minimal changes you need:

<!-- Head is the same -->

<body>
     <div id="my-app"></div>
</body>

<!-- Fonts and external JS and styles are available -->

<!-- Your source after making -->
<script type="text/javascript" src="YourApp.js"></script>

<!-- Removes splash and starts elm app. -->
<script type="text/javascript">
     var node = document.getElementById('my-app');
      var app = Elm.YourApp.embed(node);
</script>

n1k0 · 2016-09-11T07:57:06Z

Suggestion: could we have support for a "stylesheets" directive added to elm-package.json which would load these from the generated html page? I must admit I have no idea of the technical implications and limitations here, so just discard if this doesn't make any sense.

flip111 · 2016-09-24T09:15:40Z

I tried elm a year ago, had this problem too. Now i just came back in the elm irc channel and i see people who still have this exact same problem. Makes me believe urgency is high on this one ^^

MeinAccount · 2016-09-24T10:04:53Z

@flip111 You can use the following in the meantime: for development, for production

flip111 · 2016-09-24T10:10:08Z

@MeinAccount. Thx i will forward your solution when i see someone else asking about it again. Perhaps it's worthwhile too include it in the reactor documentation or website

MeinAccount · 2016-09-24T10:14:31Z

@flip111 I'd suggest a section on using a custom HTML-file. That's useful for including CSS, JS as well as custom HTML-Code. The other option would be the suggested --include-css option for Elm Reactor, although that has less possibilities.

- Shift everything around in main.go - Use shortened json result as response to front-end for development - Follow advice from github on how to embed custom css when using elm-reactor elm-lang/elm-reactor#138 (comment)

stuartnelson3 · 2016-11-02T18:50:09Z

Starting with the advice in #138 (comment), I made a bootstrap repo that (for me) is the simplest way to serve custom CSS while developing. Golang is required, however. Maybe someone will find it helpful.

https://github.com/stuartnelson3/elm-bootstrap

fiatjaf · 2016-11-02T20:12:40Z

Here's the solution I use to keep using Elm Reactor while messing with external CSS, flags and ports from the Javascript side:

<!doctype html>
<meta charset=utf-8>
<title>a title</title>
<link href=/bundle.css rel=stylesheet>
<body></body>
<script src="/_compile/Main.elm"></script> <!-- this will fail in production -->
<script src="/elm-bundle.js"></script> <!-- this will fail in development -->
<script>
var app
var flags = {}

try {
  app = Elm.App.fullscreen(flags)

  /* app.ports is now available */
} catch (e) {
  // this will run in case there are compile errors:
  var stylesheets = document.querySelectorAll('link')
  for (var i = 0; i < stylesheets.length; i++) {
    stylesheets[i].parentNode.removeChild(stylesheets[i])
  }
  runElmProgram()
}
</script>

ghost · 2016-11-10T21:11:19Z

I've been compiling down to index.html and using a separate stylesheet but it would be nice to run something like elm-reactor --include-css styles/ and have link elements inserted into the DOM whenever viewing an elm file.

Will see if I can do this, this is a very useful feature.

Just some ideas on how to implement this:

add the --include-css flag to the flags record
add the css file to the static assets
before the html is compiled/rendered we have to inject the stylesheet and then serve it, this can be done in serveHtml; the function is by serveElm, which also uses Generate.makeElmHtml

mathphreak · 2017-01-13T06:49:35Z

Having --include-css would be handy, but in the meantime I'm just throwing in

Html.node "link" [ Html.Attributes.rel "stylesheet", Html.Attributes.href "style.css" ] []

as another child returned from Main.view and that works fine (unless there's a browser cache issue on style.css, which happens surprisingly often). It's probably not a production-ready solution, but for rapid prototyping without leaving elm-reactor it's simpler than most of the workarounds in this thread.

stoivo · 2017-02-03T21:59:38Z

@mathphreak Where do you put style.css locally?

mathphreak · 2017-02-03T22:30:42Z

@stoivo Same directory as my Main.elm file. That way it gets resolved properly as a relative path.

djyde · 2017-05-11T02:52:07Z

Is any progression?

hawk78 · 2017-09-03T02:47:28Z

I'm using the following function in my code. I have to use a trick to avoid flickering. Is there any downside to this technique? It generates a script that adds the stylesheet link into the header.
(inspired by @mathphreak)

cssAdder : String -> (a -> List (Html msg) -> Html msg) -> (a -> List (Html msg) -> Html msg)
cssAdder css f = \a html ->
            f a (Html.node "script" [ Html.Attributes.type_ "text/javascript", Html.Attributes.id "scriptToRemove"] 
            [text ("""
                document.body.hidden=true;
                var link=document.createElement('link'); 
                link.href='"""++css++"""'; link.rel='stylesheet';
                document.getElementsByTagName('head')[0].appendChild(link);
                
                window.setTimeout(function () { document.body.hidden=false; }, 0);

                var rem=document.getElementById('scriptToRemove');
                rem.parentNode.removeChild(rem);
            """)] :: html)
            
view : Model -> Html Msg
view model =
      (cssAdder "style.css" div) [] [text "ok now"]

joshmh mentioned this issue Nov 24, 2015

Hotswap CSS ? #152

Closed

evancz mentioned this issue Jun 6, 2016

feature requests #193

Open

n1k0 mentioned this issue Sep 17, 2016

Load the bootstrap stylesheet when using elm-reactor Kinto/elm-kinto#4

Closed

jhg mentioned this issue Feb 5, 2017

Nodes head, link and title? elm/html#113

Closed

epsilonhalbe mentioned this issue Oct 1, 2017

Add feature: "add css links" #138 #235

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Elm Reactor + External CSS #138

Elm Reactor + External CSS #138

PedroSena commented Aug 9, 2015

jvoigtlaender commented Aug 9, 2015

PedroSena commented Aug 10, 2015

Warry commented Oct 6, 2015

mordrax commented May 14, 2016

fluxxu commented May 21, 2016

aaronwhite commented May 22, 2016

oz123 commented Aug 19, 2016

therustmonk commented Aug 19, 2016 •

edited

Loading

oz123 commented Aug 19, 2016

therustmonk commented Aug 19, 2016

n1k0 commented Sep 11, 2016 •

edited

Loading

flip111 commented Sep 24, 2016

MeinAccount commented Sep 24, 2016

flip111 commented Sep 24, 2016

MeinAccount commented Sep 24, 2016 •

edited

Loading

stuartnelson3 commented Nov 2, 2016

fiatjaf commented Nov 2, 2016

ghost commented Nov 10, 2016 •

edited by ghost

Loading

mathphreak commented Jan 13, 2017

stoivo commented Feb 3, 2017

mathphreak commented Feb 3, 2017

djyde commented May 11, 2017

hawk78 commented Sep 3, 2017 •

edited

Loading

Elm Reactor + External CSS #138

Elm Reactor + External CSS #138

Comments

PedroSena commented Aug 9, 2015

jvoigtlaender commented Aug 9, 2015

PedroSena commented Aug 10, 2015

Warry commented Oct 6, 2015

mordrax commented May 14, 2016

fluxxu commented May 21, 2016

aaronwhite commented May 22, 2016

oz123 commented Aug 19, 2016

therustmonk commented Aug 19, 2016 • edited Loading

oz123 commented Aug 19, 2016

therustmonk commented Aug 19, 2016

n1k0 commented Sep 11, 2016 • edited Loading

flip111 commented Sep 24, 2016

MeinAccount commented Sep 24, 2016

flip111 commented Sep 24, 2016

MeinAccount commented Sep 24, 2016 • edited Loading

stuartnelson3 commented Nov 2, 2016

fiatjaf commented Nov 2, 2016

ghost commented Nov 10, 2016 • edited by ghost Loading

mathphreak commented Jan 13, 2017

stoivo commented Feb 3, 2017

mathphreak commented Feb 3, 2017

djyde commented May 11, 2017

hawk78 commented Sep 3, 2017 • edited Loading

therustmonk commented Aug 19, 2016 •

edited

Loading

n1k0 commented Sep 11, 2016 •

edited

Loading

MeinAccount commented Sep 24, 2016 •

edited

Loading

ghost commented Nov 10, 2016 •

edited by ghost

Loading

hawk78 commented Sep 3, 2017 •

edited

Loading