wking-io / elm-live Goto Github PK

View Code? Open in Web Editor NEW

1.1K 17.0 61.0 2.54 MB

⚡ A flexible dev server for Elm. Live reload included.

Home Page: https://elm-live.com

License: MIT License

JavaScript 87.73% CSS 12.27%

elm livereload developer-tools

elm-live's Introduction

Cool WIP: The one year later "Coming Soon" Personal Website

This is the Work In Progress that is my personal website. I have said on my old site that I had an update "Coming Soon" for about a year now and I am done with that.

About a week ago I actually started updating my site after stumbling on Gatsby while listening to @wesbos and @stolinsky's podcast Syntax. A week later I realized I can get this up and running really quick, but will need help refining and optimizing my code.

A Call For Help

I am fairly new to React and would love feedback from any experienced Front End Devs who are willing to help out!

If you are experienced with Front End Dev then I imagine you already know how to get this working without help, but just in case...

Clone / Fork Repo

You can follow Github's guide here: Fork A Repo.

Install Dependencies

npm i

Running in development

gatsby develop

Wanna help?

I have tasks I am adding to the issues to help me keep track of the project. I have gotten it to a state now to where I want to use branches and proper PRs to manage updates. Take a look around in there or make your own if you think my code could use some help :)

[WIP] Changelog

08 / 09 / 2017 Update, I have figured out a few things I want to do. I am loving importing data from any JS file. I have used it to add social accounts and a knowledgebase. Wanted to simulate pulling in real data so that I could get more familar with manipulating it.

I have been able to pull in the added objects / rows in the knowledgebase data file and convert them to a book -> chapter format. Using react-lowlight I added syntax highlighting to the library page and look forward to improving the code examples.

08 / 01 / 2017 This is where it all begins. I will outline what I am using below that I think might be relevant.

I think I want to copy the layout of the home page to all pages as a uniform header and want to make a more reusable component for that.
Styled Components
Prettier

elm-live's People

Stargazers

Watchers

Forkers

silky bdukes rtfeldman zivoslav kbsymanz mattmcfarland lamassu jergason magopian ryan1729 sentience gregziegan natim eeue56 sebn nickneck billperegoy aeons darrensiegel harrysarson gvazharov munksgaard panthershark lucamug rofrol hhy5277 klazuka bernardoow garethstokes waddlaw frou choonkeat methodgrab barslev tj glasserc davnn korutx chengjingfeng giulianok sparksp giuinktse7 explodinglabs leojpod alexchalk odalrick ploppz vtsatskin levyks fpieper primalivet playfloor nduatik angusjf brilliantorg bobmastors jacobtread

elm-live's Issues

Reloading is not working!

I am trying to use elm-live reload, but it does not work!
When I run the command below, the browser does open a window, but it does not serve any file.:

It says simply FILE NOT FOUND!

elm version : 0.19.0
elm-live: 3.0.2-alpha.1

# dir structure

.
|-- elm-stuff
|-- elm.js
|-- elm.json
|-- index.html
|-- node_modules
|-- package-lock.json
|-- src
`-- Main.elm


# I run this command:
elm-live src/Main.elm --open --output=elm.js
[dashboard] elm-live src/Main.elm --open --output=elm.js                                                                                                                                     dashboard  ✭ ✱
Success! Compiled 1 module.

elm-live:
 The build has succeeded. Starting the server! We’ll open your app
 in the default browser as soon as it’s up and running.


Reload web server:
listening on port 8000
monitoring dir /Users/kanuku/Documents/git/elm-workspace/wolf-dashbored/dashboard

Index.html

<!doctype html>
 <link rel="stylesheet" href="style.css" />

 <body>
   <div></div>
   <script src="elm.js"></script>
   <script>Elm.Main.embed(document.querySelector("div"));</script>
 </body>

Elm Application


view : Model -> Html Msg
view model =
    div [ class "uk-container uk-container-center uk-margin-top uk-margin-large-bottom" ]
          [ text "HALLO" ]
...
main =
    Browser.element
        { init = init
        , update = update
        , subscriptions = subscriptions
        , view = view
        }

...

Watch elm.json and elm-package.json

When upgrading a codebase to Elm 0.19, I was making a lot of updates to elm.json (equivalent of the elm-package.json in Elm 0.18 and lower). It would be great if elm-live could kick off a rebuild when it notices that elm.json has changed.

If it also worked with #119, it would all be pretty mind blowing!

Custom Index.html is overwritten

I just discovered elm-live
I tried it on a small apps with ports and flags
The content of the script node is replaced with the compiled app, so the glags and port calls are lost.
How can I get this working?

Windows support - help doesn't work

Running elm-make --help in Windows doesn't do anything, since it's shelling out to man, which is a *nix program.

Question: how can I run Nodejs server and elm-live on the same port

Many thanks for making this helpful package. I had a question.

I have a Nodejs backend that is serving a html file compiled from Elm. I have the server running on one port and elm-live running on another port successfully, but what I'd like is to be able to run both on the same port. At the moment when I try this, I have to refresh the page to see the elm changes. How can I achieve this?

Thanks

not recompiling after file change

I'm in the directory where the Main.elm file is located. I run this command elm-live Main.elm --host=myhost --port=8081 i see:

Success! Compiled 1 module.                                         
Successfully generated index.html

elm-live:
  The build has succeeded. Starting the server!

[0001] info  Server running at http://myhost:8081/ (connect)
[0001] info  LiveReload running on 35729

When i change my Main.elm file nothing happens. I'm sure i'm editing the right file because i see the change after i save and view it with less Main.elm. My OS is CentOS Linux release 7.4.1708 (Core).

I guess this library makes use of some inotify mechanism. But my files are on a fileserver so i don't get notifications from my own kernel. It will be too complicated to setup some mechanism to forward inotify events from the fileserver to my system. Polling is the best solution for me. I saw buda (used by elm-live) supports this by the --poll=N use polling for file watch, with optional interval N flag. But this is not a flag i can use on elm-live. I'm not sure this is the problem or this is the fix, but it's my best guess at the moment because i've seen similar things.

Plans for Elm 0.19?

Hello!

Thanks for a great tool.

I just updated to Elm 0.19, which removes the elm-make binary, and requires running elm make (with space) instead. I guess making the file name change would be simple, but do you see any other potential problems?

I noticed your call for maintainers (#123), which may effect your decision.

What do you think?

Best regards,
Teodor

Possible to live rebuild more than 1 Elm file?

I have different .elm files that correspond to different webpages. As an example, I might have an Index.elm file that gets compiled and referenced in index.html and I have a Dashboard.elm file for dashboard.html. I run elm-live with:

elm-live Index.elm --output=public/elm/index.js --open

Works great for Index.elm, but changes to Dashboard.elm do not get recompiled. Is there a way to have both files auto-rebuild?

Support for multiple arguments in `--before-build`

We made a conscious decision to roll out an MVP --before-build and wait for feedback from our users. There are two options to take this further:

Run the command inside a subshell, like this:
```
elm-live --before-build="my-command arg1 'arg 2'"
```
This would probably feel pretty familiar for most of us. But this comes at a cost of poorer performance and implicitness (Which shell should we use to run the command? The current shell? A POSIX shell? cmd.exe?).
Spawn the command directly, like this:
```
elm-live --before-build=[ my-command arg1 'arg 2' ]
```
This is more explicit and much faster, but may be a surprising syntax for you guys.

Where should we take this? You can vote below, we’ll be super grateful for your feedback!

Default host to `0.0.0.0`

I find myself adding --host=0.0.0.0 to almost every project, to be able to test my stuff on other computers in the network. I think this would make for a reasonable default, especially that it doesn’t break the current defaults (works with http://localhost and the local IP).

Is there anything I should keep in mind / watch out for?

How can we prevent elm-live from monitoring `node_modules/`?

> elm-live Main.elm --output=hoverpad.js --open

Success! Compiled 1 module.                                         
Successfully generated app.js
elm-live:
  You’ve added `node_modules/.bin/strip-indent`. Rebuilding!
elm-live:
  You’ve added `node_modules/watchify/node_modules/.bin/browserify`. Rebuilding!
elm-live:
  You’ve added `node_modules/npm/node_modules/request/node_modules/.bin/har-validator`. Rebuilding!
elm-live:
  You’ve added `node_modules/npm/node_modules/request/node_modules/http-signature/node_modules/.bin/sshpk-conv`. Rebuilding!

Watching Elm files in a sibling directory

Hey! Great work, I ❤️ elm-live!

But now to my question:

A common library project structure is to have a demo or examples folder with its own elm-package.json and then another elm-package.json at the root level for your library.

|
|__ examples
|    |
|    |__ Main.elm 
|
|__ src
    |
    |__ Library.elm

When I run elm-live in the root folder, and direct it to the Main.elm in my examples folder, it properly watches both my library elm code and my example code. Perfect.

The problem is when there's dependencies in the examples that are not in the the library itself.
Now, I need to run elm-live in the examples directory. It not longer detects changes in the library package itself 😢

Is there something simple that I'm missing here? Could this be solved with before-build?

Allow for commands to be executed on rebuild

Hi, and first of all thanks for this wonderful tool :)

It would be nice to be able to specify a command that is run every time the code is rebuilt (ideally before the live-reload)

This would allow people to use tools like elm-css with the dev server, running the elm-css command every time the code changes.

Error in 3.0.6 published version?

I just tested out the 3.0.6 version of elm-live. According to the tag in git, it would seem that 3.0.6 includes the PR by alexkorban that watches files found in elm.jsons source directories. However, when checking node_modules/elm-live it seems to be an older version.

So, either an older version of elm-live has been published under the 3.0.6 version, or the 3.0.6 tag is wrong?

elm-live requires Node v6+ to run natively

The README says Node 4+ is required to run elm-live natively; however, on both 4.x and 5.x I get this error when running it:

/Users/kyank/code/multi-select/node_modules/elm-live/source/debounce.js:4
  let timeout;
  ^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at Object.<anonymous> (/Users/kyank/code/multi-select/node_modules/elm-live/source/elm-live.js:14:18)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)

Running it with Node v6.x works fine. I suggest updating the README to specify Node v6+ is required.

Don’t depend on elm reactor

As we’ve found out in elm-lang/elm-reactor#178, elm reactor is broken on some platforms.

No shame on elm reactor – it’s obviously a tremendous piece of code with rocket science under the hood!

I’ve written elm live because I wanted something simple and flexible. Let’s make it even simpler by using elm make directly under the hood. We’ll serve the files ourselves – that opens an easier way for custom static HTML.

Make the path to elm-make explicitly configurable

The reasoning lives here: elm-community/elm-webpack-loader#43 (comment).

Elm-Live not opening browser

When running elm-live Main.elm --open --pushstate --output=elm.js it doesn't open the browser. The server doesn't seem to be running either at localhost:8000. Another interesting thing to note is that when I run elm-reactor I get the following error message: elm-reactor: bind: unsupported operation (Can't assign requested address)

--open

I’m thinking of an --open option. We can use http://ghub.io/opn to open the served website in the default browser (or another one).

Support changed symlink

The iosphere elm i18n tool works by changing a symlink, can we have elm-live reload when the symlink changes?

https://github.com/iosphere/elm-i18n

To Reproduce:

git clone [email protected]:iosphere/elm-i18n.git
npm install elm-i18n -g
cd elm-i18n/example
elm-i18n-switch -l En
elm-live

Then

elm-i18n-switch -l De --yes

Elm-live should re-compile after switching languages

Remove dependency on prova

The prova package was recently unpublished (see https://medium.com/@azerbike/i-ve-just-liberated-my-modules-9045c06be67c and http://blog.npmjs.org/post/141577284765/kik-left-pad-and-npm), so npm install now fails for the module (though only for development on the module itself, since it's a dev dependency).

Display error message

I am wondering if there is a way to display the error message in the browser? I personally really enjoyed when the errors were displayed.

Hot reloading?

Let’s see if it’s possible!

https://twitter.com/mrundberget/status/665555634327261184

Before/after build events that change elm files cause a second build

I'm using elm-format as a before-build event, but the watcher picks up its changes and immediately kicks off a second build right as the first one finishes.

Does functionality currently exist to pause the watcher during the before/after events?

Cannot exit elm-live process with keyboard shortcut

I'm unable to exit the elm-live process with Ctrl + C or Ctrl + Z on Windows when using:

Bash on Ubuntu on Windows
Git's built-in Bash

However, in Window's Powershell or true "Bash on Ubuntu", I CAN stop the process with Ctrl + C.

Tested on Windows 10

Any ideas what might be causing this?

Can no longer override the default port using --port

I did some digging and this looks like it perhaps is a bug in commander related to specifying default values, but since it is preventing elm-live users from overriding the port, you may want to work around it.

If I do:
$ elm-live src/Main.elm --port=9000

I would expect elm-live to start and serve off of port 9000. It does not, it serves off of the default 8000.

I've submitted PR #137 to address this.

Thank you for building and maintaining this tool.

elm-live@next looking for elm-make in Elm 0.19

Hi,

I expect this is user error but I elm-live seems to be looking for an older version of elm (elm-make is 0.18 thing).

Running on macos high Sierra 10.13.6

Running inside my kanban project directory:

Installed with npm install --save-dev elm elm-live@next

npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js

> [email protected] install /Users/tom/Projects/elm/node_modules/fsevents
> node install

[fsevents] Success: "/Users/tom/Projects/elm/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> [email protected] install /Users/tom/Projects/elm/node_modules/elm
> binwrap-install

npm WARN saveError ENOENT: no such file or directory, open '/Users/tom/Projects/elm/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/Users/tom/Projects/elm/package.json'
npm WARN elm No description
npm WARN elm No repository field.
npm WARN elm No README data
npm WARN elm No license field.

+ [email protected]
+ [email protected]
added 458 packages from 356 contributors, updated 1 package and audited 12654 packages in 59.426s
found 449 vulnerabilities (427 low, 16 moderate, 6 high)
  run `npm audit fix` to fix them, or `npm audit` for details

➜  kanban npm audit fix
npm ERR! code EAUDITNOPJSON
npm ERR! audit No package.json found: Cannot audit a project without a package.json

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/tom/.npm/_logs/2018-08-28T06_18_02_052Z-debug.log
➜  kanban elm-live src/Main.elm --open                                

elm-live:
  I can’t find the command elm-make!
  Looks like elm-platform isn’t installed. Make sure you’ve followed
  the steps at https://git.io/elm-platform and that you can call
  elm-make from your command line.

  If that fails, have a look at open issues:
  https://github.com/tomekwi/elm-live/issues .

Originally tried with a global install:

➜  kanban npm install --global elm elm-live@next
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm ERR! path /usr/local/bin/elm
npm ERR! code EEXIST
npm ERR! Refusing to delete /usr/local/bin/elm: is outside /usr/local/lib/node_modules/elm and not a link
npm ERR! File exists: /usr/local/bin/elm
npm ERR! Move it away, and try again.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/tom/.npm/_logs/2018-08-28T05_37_24_085Z-debug.log

It also had the same error when running.

Debounce updates

At the moment, the project gets rebuilt once for every file that got changed, removed or added. This works well during normal development, but when installing, updating or uninstalling a package, this often means dozens of wasteful rebuilds when only one would do the job.

Windows support - can't find elm-make

Using child_process.spawnSync on Windows doesn't work very well, because npm generates a .cmd file to reference e.g. elm and elm-make, but the built-in spawn behavior doesn't work for .cmd files. So, while I can run elm-make just fine from a command line, elm-live can't find it. The simple fix for this is to use the cross-spawn package, which fixes issues with spawn and spawnSync in Windows.

Surface compile Errors and Warnings

... with clickable line numbers that open the file in your EDITOR and go to the line number :).

How to integrate with Phoenix Framework

Hello there, this may be a longshot but do you have documented how to integrate elm-live with Elixir's Framework?

Specially if one's serving the HTML via a Phoenix Template?

Thanks!

elm-live not detecting file changes

elm-live was working for me and then it suddenly stop detecting file changes. I tried saving changes with Textmate, Emacs but it's just not detecting it.

The only significant thing happened in between is that I install MacTex and added /Library/Tex/texbin to the PATH environmental variable. But I can't imagine how that should affect it.

Is there a way I can debug this?

Support for other budo command line args?

Our Elm app happens also to be a PWA with a service worker.
I notice that Budo supports SSL and HTTPS and I wondered how easy it would be to pass through, e.g. the --ssl flag, --cert and --key options to the underlying server

Prevent page load if elm-test fails

I cannot detect when elm-test is failing without monitoring elm-live terminal output, and I usually keep this terminal minimized. I was hoping to see a 404, other error, or blank page. Current behavior reloads the previous index.html, even if tests are failing.
I believe I tried all combinations of --before-build --after-build and --no-recover options.
Best workaround so far is to pass this script to --before-build in order to produce a blank page upon test failure:

rm index.html
elm-test

I tried some other scripts to conditionally write error text to index.html, but this custom page is not picked-up by the browser without a manual refresh.

Prepublish hook is not executable without `sh`

While testing code for elm-live I've noticed publishing (or in this case npm link-ing) the repository on Windows fails because the prepublish hook is written in shellscript.
One way around this would be to use something like shelljs and port the script to a javascript file.

Need strict mode for debounce.js?

I upgraded from 2.6.0 to 2.6.1 and started getting the following error:

/usr/local/lib/node_modules/elm-live/source/debounce.js:4
let timeout;
^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

I appears that debounce.js was added in 2.6.1.

--host=0.0.0.0 not usable across network

I am running elm-live on a server and accessing the result from a laptop. In order to do this I used --host=0.0.0.0. However, in the rendered HTML I then see:

<script type="text/javascript" src="//0.0.0.0:35729/livereload.js?snipver=1" async="" defer="">

This does not work since 0.0.0.0 on the laptop I assume refers to the laptop itself, but it needs to point to the server where elm-live is running.

File watching and `--open` broken on Windows

As mentioned by @bdukes in #10 (comment) and #10 (comment), we seem to have problems watching stuff and opening the browser.

Browsersync / HMR

I ❤️ elm-live! I was seriously struggling with a webpack config before I found this and it has greatly simplified my workflow.

That said, I found in the ether of githubz, there's another tool called elm-server which is a similar approach to the elm-live setup only it uses browsersync.

Granted, it doesn't have you're before-build hook so it won't compile elm-css.

I notice this repo is a bit more active / well maintained and I figured you'd be the better one to suggest integrating browsersync.

Also is there a way to integrate with some of the hot-module-replacement / hot-reload tools that others have made?

What are some good ways to do that?

2.2.1 in npm does not have host option

Hi, can you please publish a new version to npm? The latest right now does not have the --host changes. Was really confused..

forget to specify directory gives page "budo"

If I accidentally leave out the --dir in my elm-live command line it loads but gives me an empty page titled "budo"
e.g.

elm-live client/Main.elm --output html/elm.js --dir=html --open

Debug flag is not working

Just installed 3.0.4 and noticed that debugging is not working anymore.
See the video

Syntax error in node v0.12.7

elm-live/bin/elm-live.js:25
reactor.on('error', (error) => {
                            ^^
SyntaxError: Unexpected token =>
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)

Outdated elm-lang/elm-platform references

Hello again 👋

I just noticed that one of the failure hints still refers to elm-plaftorm and points at the elm-lang/elm-platform repo:

elm-live/source/elm-live.js

Lines 122 to 123 in fb1f8e9

    
             Looks like ${bold("elm-platform")} isn’t installed. Make sure you’ve followed 
        
             the steps at https://git.io/elm-platform and that you can call

Hope it helps!

Compile in url feature

I would like to use elm-live, but it doesn't support my main use case. I need something like the old 0.18 feature to compile things from url, so in my backend view I could call:

elm-live slow on linux and leaks memory

Hi everyone,

I am using elm-live on my ubuntu machine. Whenever I change a file and elm-live tries to reload the page after recompiling it takes a very long time to reload(~30s) also I notice that my systems memory consumption goes up. After a while everything crashes.

Funny thing is, at work I use a Mac. I did not have any problems there at all.
I am using a globally installed elm-live on both system in version 2.7.4.
Has anyone had a similar issue?

👋 CALL FOR MAINTAINERS

Hey lovely elm-live folks!

You might have noticed this already if you’re following me online: there’s really a ton of stuff going on in my life right now. Alongside my full time startup job that’s pretty damn intensive, after hours I’m building a new business. Not to mention my lovely little family that deserves my time more than anything else in the world! 👨‍👩‍👦‍👦

I’m super glad elm-live has been proving useful for so many folks out there. It’s also been attracting contributions from amazing engineers like @bdukes, @eeue56, @joshmh, @magopian, @n1k0, @Ryan1729 and @Natim. Perhaps one of you folks would like to take over elm-live to ensure it stays helpful and awesome? I’ll be super happy to provide guidance!

Perhaps you know someone who’d like to jump right into a popular open source project like elm-live? Perhaps you’re feeling you’d like to try that yourself? Yes, you – reading this right now! 😄

I think elm-live has grown into a lovely community effort. Let’s keep it going! How does that sound?

LiveReload Chrome Extension

Hi there, I dev using VirtualBox, so I use --host=0.0.0.0

I've never been able to just use a Chrome extension to get LiveReload to work.

Is there a way to use a plugin/extension in Chrome to get LiveReload to work?

Thanks.

Can not access html

I have structure:

index.html
data
- test.html

and if i start elm-live and navigate http://localhost:8000/data/test.html i got content of compiled elm, not html that i expect

Watching symlinked files results in infinite loop

First things first, elm-live is awesome! I see at as an integral part of the elm experience.

Here's my issue

My directory structure looks something like this:

src/Foobar.elm
static/Foobar
├── Foobar.css
├── Foobar.html
├── Foobar.js
├── app.js
└── bundle.js
deploy/
├── app.py
├── foo -> ../static/
├── json
│   └── weather.json
└── reload.sh

Notice the foo -> ../static/, which denotes that foo is a symlinked copy of static from the parent directory.

when I run elm-live src/Foobar.elm --output=static/Foobar/app.js --dir=./static It gets caught in an infinite loop, repeating the following message

Success! Compiled 1 module.
Successfully generated  static/Foobar/app.js

elm-live: 
    You've changed `deploy/foo/Foobar/app.js`. Rebuilding!

I'm not a big js hacker, but depending on how big of a fix you think it'd be, I can implement it and submit a pr. Thanks so much!!!!

	Looks like ${bold("elm-platform")} isn’t installed. Make sure you’ve followed
	the steps at https://git.io/elm-platform and that you can call