I have elm reactor serving my pages while developing. After saving my code changes, I am running elm make src/Main.elm --output=main.js. Is there a way to auto elm make on save and see the changes on the browser?
I'm using elm 0.19
Update for 2021:
These days I would just use Parcel JS. It support hot reloading and is easy to setup in general: https://parceljs.org/languages/elm/
Old answer:
I had the same issue.
At first I used a custom script in my Atom environment, but then I found Elm Live: https://github.com/wking-io/elm-live.
Does all you ask. Highly recommended! Automatically recompiles, hot reloads and opens the browser window if not opened.
First install with NPM: (I used some issues with the latest version)
npm install --save-dev elm elm-live
Then use the command instead of the one you're using now:
elm-live src/Main.elm --open -- --output=main.js
I think you'll need to use a proper build environment to get hot reloading. The one I created and use is at https://github.com/simonh1000/elm-webpack-starter
Related
I've been using the command line for some time now, but I'm still not sure what exactly happens when I do certain things - and I'm not sure what to google for help.
When I'm working with Anaconda and Python, I found the environments I created in C:\Users\<User>\Anaconda3\envs. And every python package I install in an environment seems to go there. Great!
But how does this work outside of Anaconda/Python? For example, I installed the vue CLI via npm install -g #vue/cli. What exactly happens when I do this; or more precicely, where are files saved?
During the creation of a new vue project, a readme.md is created as well. It states that users should simply npm install to setup the project. It seems that this command installs all packages stated in the package.json. I would like to try out if this command works for new users, but I already (obviously) have everything installed. Can I create some kind of environment (like I do with Anaconda for Python) to accomplish this?
Thanks a lot for your answers!
I am try to upgrade exisiting ember project cli version by following this tutorial
https://emberigniter.com/update-latest-ember-data-cli/
after finishing this i try to run ember serve it shows error like
missing path
i doknow what exactly it was trying to say and also i am new to ember could any one help me sort out this issue.
I recommend using ember-cli-update to update your ember projects. Please check it out. It avoids user-mistakes while upgrading (no manual merges, etc. ...).
You could try to delete node_modules and run npm install again. It could a package in your package.json that ember serve can't find. Also check the releases it is not easy to upgrade from older version to the latest one, too many deprecations. Also if it si too old i suggest you to start over create again the ember app.
I have made a few applications (using webpack, babel, react, d3, npm etc.) that uses very similar charting code. I am in the process of splitting out that charting code into an npm package which multiple apps can then import.
To test this out, I've embedded a demo app inside my chart libraries project directory and install the library at its file path. Now, presumably i'll be able to install this in depending apps A, B and C and so on, and I can change my chart libary and all apps will reflect these changes.
The first thing I noticed is that I now have to cd into my chart library and run npm run build (which runs webpack) any time I change something, and then cd into the depending app I'm working on and run npm i. This can perhaps be improved by using npm link but there are issues there as well (such as versioning and deploying to my server). So my first question is about what a decent rapid development approach looks like now that my charting code is in a separate npm project.
The other problem I've noticed is that I've lost two valuable features with respect to my chart library code. Code completion in VSCode and debugging in chrome dev tools. I'm not sure why VSCode code completion has stopped working. And for debugging, how would i be able to debug both my depending app and the library its depending on at the same time in chrome?
I would use npm link. It's immensely helpful when working on a library and its integration side by side.
Check the Chrome settings to make sure it's not instructed to skip libraries in Settings -> Framework Blackboxing, see e.g., http://blog.edenhauser.com/tell-chrome-debugger-to-ignore-libraries/.
I have a project generated with aurelia-cli with default options. It's built with au build, run with au run --env dev --watch and uses requirejs behind the scene. How do I add hot-module-reload into the mix?
There is no hot module reload support for Aurelia CLI at the moment. The team is working on a Webpack-based support, which should land soon, as stated in their latest update:
That's what our new hot module reload enables. We've got a preliminary version of this up and running and integrated into our forthcoming Webpack update. It enables editing Views, ViewModels, related components (such as ValueConverters and BindingBehaviors) and CSS without reloading the full website.
As you said, Aurelia CLI is currently using RequireJS for module loading. A support for Webpack is coming to Aurelia CLI sometime in future. When that happens, we should also get hot module reload support.
If you cannot wait, your options are to either switch to Webpack based solution or build your own support for it, which could be pretty hard to do.
I have an online site and Im going to overhaul it. While I cannot find any information about if I can use npm and some kind of package manager (e.g Webpack) on live site which is on shared host (which has latest Node.js, npm support etc), Im going to develope it locally and worry about "publishing" it later on.
Is there a way to somehow covert my current downloaded project to npm project or Im better off just starting a new project? This is rather confusing, I've never used npm before.
Im using WordPress, everything is run with PHP atm but Im going to overhaul it and use Node.js.
NPM can be used to collect and manage Javascript dependencies for the browser so as to create a stand alone front-end JS app. BUT, bower is probably a better choice.
NPM is designed to manage Javascript dependencies for projects that use NodeJS or use the CommonJS module format for requiring modules.
Bower is specifically a package manager (like npm or composer) but it is meant to manage browser based javascript dependencies.
Currently, javascript doesn't have a formally defined module/import system, so a number of competing require() functions are been produced. NodeJS comes with a require() function that searches the npm/ folder for modules. Browserify is a pre-processor that can scan the npm folder for a dependency and all of its dependencies and bundle them into 1 file for a browser to download (because browser's don't have a require() function because the JS standard doesn't have define one)
I might be rambling here, but you should probably look at bower, and then - at some point in the future - look at either browserify or requirejs to combine and optimize all the JS plugins for your front-end app.
Edit for clarity:
Basically there are 2 engines to run your JS application: the browser or NodeJS. NodeJS needs npm, the browser has no idea what npm is. If you want to write a clean, single page app, all JS front-end for a PHP backend, you don't need NodeJS, and therefore don't need npm. Using npm will prematurely complicate the development of a front-end browser app because it will force you to decide on a require() implementation (Browserify or Requirejs) right from the start.