# OP UPDATED: Paste here some Haxe JavaScript build HXMLs and/or package.json and describe your toolchain
**URL:** https://community.haxe.org/t/op-updated-paste-here-some-haxe-javascript-build-hxmls-and-or-package-json-and-describe-your-toolchain/1955
**Category:** Haxe
**Tags:** haxe-js
**Created:** [August 9, 2019, 6:37pm UTC](https://community.haxe.org/t/op-updated-paste-here-some-haxe-javascript-build-hxmls-and-or-package-json-and-describe-your-toolchain/1955 "2019-08-09T18:37:59Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@Kyliathy](https://community.haxe.org/u/Kyliathy)
#### Post date: [August 9, 2019, 6:37pm UTC](https://community.haxe.org/t/op-updated-paste-here-some-haxe-javascript-build-hxmls-and-or-package-json-and-describe-your-toolchain/1955/1 "2019-08-09T18:37:59Z")
I perceive a lack of tutorials and examples about how to setup a modern Haxe JavaScript toolchain, preferably using:
- modern front-end libraries/frameworks such as React, Angular or Vue
- modern backend frameworks such as Node and perhaps data binding frameworks
- unit testing, mocking and coverage tools
The reason I’m asking you to show your build HXML / package.json is because I’d like this topic to contain references to the latest and most popular frameworks to use with JavaScript **and** the exact way to add this to one’s toolchain.
A build file is an excellent starting point for discussions about a toolchain.
I believe this will be useful to people getting started with Haxe’s JavaScript target.
Extra points if you use VS Code and perhaps can also paste your VS Code tasks file (generated by any extension you may be using).
---
### Author:  [@mark.knol](https://community.haxe.org/u/mark.knol)
#### Post date: [August 10, 2019, 9:18am UTC](https://community.haxe.org/t/op-updated-paste-here-some-haxe-javascript-build-hxmls-and-or-package-json-and-describe-your-toolchain/1955/2 "2019-08-10T09:18:03Z")
So do you _want_ all those features etc or do you want the hxml just as plain as possible? Not sure whats the question here.
I use fast-live-reload.js but thats not part of hxml but its in my package.json, so I can do `yarn dev` to start a webserver with reloading.
Oh and I’m super lazy, but I don’t have time for unit testing, I just avoid bugs and breaking changes 😌
---
### Author:  [@matthijskamstra](https://community.haxe.org/u/matthijskamstra)
#### Post date: [August 12, 2019, 9:03am UTC](https://community.haxe.org/t/op-updated-paste-here-some-haxe-javascript-build-hxmls-and-or-package-json-and-describe-your-toolchain/1955/3 "2019-08-12T09:03:41Z")
I while back I added this info to my existing “Haxe and JavaScript” documentation.
My idea for documentation is to start from scratch with Haxe and JS. Funny enough the info about the hxml is the last I added.
[https://matthijskamstra.github.io/haxejs/20build/example.html](https://matthijskamstra.github.io/haxejs/20build/example.html)
---
### Author:  [@alex\_dja](https://community.haxe.org/u/alex_dja)
#### Post date: [August 13, 2019, 9:34am UTC](https://community.haxe.org/t/op-updated-paste-here-some-haxe-javascript-build-hxmls-and-or-package-json-and-describe-your-toolchain/1955/4 "2019-08-13T09:34:27Z")
You can use `livereloadx` npm lib for live reload. Just specify haxe output folder in npm script:
```haxe
"scripts": {
"livereload": "livereloadx -s haxeOutputFolder",
...
}
```
What about frameworks please take a look at:
> **[kLabz/haxe-react](https://github.com/kLabz/haxe-react)**
>
> Haxe-React #next: preparing for 2.0.0. Contribute to kLabz/haxe-react development by creating an account on GitHub.
> **[elsassph/haxe-react-redux](https://github.com/elsassph/haxe-react-redux)**
>
> Demonstrates Haxe React + Redux, code-splitting and hot-reload
---
### Author:  [@Kyliathy](https://community.haxe.org/u/Kyliathy)
#### Post date: [August 13, 2019, 5:45pm UTC](https://community.haxe.org/t/op-updated-paste-here-some-haxe-javascript-build-hxmls-and-or-package-json-and-describe-your-toolchain/1955/5 "2019-08-13T17:45:36Z")
@mark.knol Ok, it’s not that important really that it is HXML. Basically I’m curious how you set all that up. Can you paste the relevant parts of your package.json? Also, am I to undertand you have some VSCode task that builds the Haxe and another VSCode task that keeps an eye on the `yarn dev` webserver?
@matthijskamstra Thank you! Useful! 🙂 And welcome back, thanks for answering my post.
@alex_dja Thanks. And yes, those are some frameworks I’m targeting to use. Wasn’t aware that @kLabz also has a React effort. Happy that there’s a sample in the repo that has a build HXML that shows how to integrate React.
>
---
### Author:  [@elsassph](https://community.haxe.org/u/elsassph)
#### Post date: [August 14, 2019, 1:50pm UTC](https://community.haxe.org/t/op-updated-paste-here-some-haxe-javascript-build-hxmls-and-or-package-json-and-describe-your-toolchain/1955/6 "2019-08-14T13:50:30Z")
This sample is interesting for academical purposes - it’s a bit old school to use global JS libraries and nowadays you would be advised to look into JS bundlers and managing dependencies using a `package.json`:
- [GitHub - jasononeil/webpack-haxe-loader: Webpack loader for the Haxe programming language.](https://github.com/jasononeil/webpack-haxe-loader)
- [GitHub - elsassph/webpack-haxe-example: Modular Haxe application with lazy loading leveraging webpack](https://github.com/elsassph/webpack-haxe-example)
For the second link I’ve used `hmm` for Haxe dependencies management but these days `lix` is popular (if you hate haxelib):
- [GitHub - andywhite37/hmm: Haxe module manager - supplementary package manager for haxelib](https://github.com/andywhite37/hmm)
- [GitHub - lix-pm/lix.client: A dependable package manager for your Haxe projects](https://github.com/lix-pm/lix.client)
---
### Author:  [@fullofcaffeine](https://community.haxe.org/u/fullofcaffeine)
#### Post date: [August 14, 2019, 6:11pm UTC](https://community.haxe.org/t/op-updated-paste-here-some-haxe-javascript-build-hxmls-and-or-package-json-and-describe-your-toolchain/1955/7 "2019-08-14T18:11:39Z")
I’ve also been playing with integrating Haxe with Webpack and typescript lately. You can check some of my (WIP) experiments here: [haxe-boilerplate · GitHub](https://github.com/haxe-boilerplate).
Just be aware that they are mainly a playground at the moment. Some of them use [hxgenjs](https://github.com/kevinresol/hxgenjs), the others use [hxtsdgen](https://github.com/nadako/hxtsdgen) to generate TS decl. files. TS can also be used from Haxe by creating externs, though they are not generated automatically like `d.ts` are atm. They are not really well documented at the moment so feel free to ping me directly if you have questions about them.
I have a more up to date boilerplate that’s supposed to be the product of those experiments. I’ve somewhat successfully integrated `coconut.data` with plain React (using tsx) through `mobx`_[1]. It uses expressjs in the backend_[2]. It provides for a more-or-less sane workflow :). It’s also an example of how to use Haxe and js/ts at the same time in the same project. At the moment the use of webpack is very straightforward and there’s intentionally no use o HMR, although I might look into it later. ~~I hope to share it soon~~. Actually here’s the repo to my latest TSHX boilerplate experiment: [GitHub - fullofcaffeine/fullofcaffeineco-app-boilerplate](https://github.com/fullofcaffeine/fullofcaffeineco-app-boilerplate). I’m working on adding [SSR](https://alligator.io/react/server-side-rendering/) at the moment (from what I see, I’ll need to rework the way the backend is compiled and I’ll need to introduce webapack for the backend too, for it to work\*).
You can read more about the motivations behind these experiments [here](https://community.haxe.org/t/gist-sample-ts-haxe-bridge-fullstack-app-using-hxgenjs/1704).
\*[1] The main reason to do it is because [coconut.data](https://github.com/MVCoconut/coconut.data) is actually very nice for the model layer and while [coconut.ui](https://lib.haxe.org/p/coconut.ui) through react works well, it’s still kind of bleeding edge and changing all the time (thanks @kLabz for his awesome work on react-edge though!). I figured it’d be nice to have a way to tap directly into tsx/plain React for UIs and for the rest use Haxe and mix-and-match as needed.
\*[2] As I mentioned above, I tried to keep js/ts only in the UI, the rest uses Haxe, even the expressjs web-server. However, I must mention finding good externs for express was a huge pain, and I ended up using the ones from js-kit with some mods to make it work well. It’s still not perfect as you can see [here](https://community.haxe.org/t/weird-warning-with-extern-classes/1511/5).
---
### Author:  [@fullofcaffeine](https://community.haxe.org/u/fullofcaffeine)
#### Post date: [August 16, 2019, 7:26pm UTC](https://community.haxe.org/t/op-updated-paste-here-some-haxe-javascript-build-hxmls-and-or-package-json-and-describe-your-toolchain/1955/8 "2019-08-16T19:26:00Z")
> [@mark.knol](#):
>
> Oh and I’m super lazy, but I don’t have time for unit testing, I just avoid bugs and breaking changes
Just opening a parenthesis here. I’m not passionate about automated tests (there are enough testing zealots/purists out there and it’s really tiring reading all the gospel about it, specially when it comes to TDD zealots, and testing is code you also have to maintain and that adds to the overhead), **but some testing is useful.** Be pragmatic, don’t buy into hype, do what you think is useful to let you know when code that is crucial for your app breaks.
---
### Author:  [@Kyliathy](https://community.haxe.org/u/Kyliathy)
#### Post date: [August 21, 2019, 9:58am UTC](https://community.haxe.org/t/op-updated-paste-here-some-haxe-javascript-build-hxmls-and-or-package-json-and-describe-your-toolchain/1955/9 "2019-08-21T09:58:27Z")
@elsassph Thank you! :). Useful! Why would I hate haxelib? (wasn’t aware that `lix` exists, but I do know that haxelib is not very advanced when it comes to dependency management).
@fullofcaffeine One question. Here, you use -lib react but I can’t see any lib called react in haxe. It’s all react dash something. Am I missing something (or is that hxml missing `something` hehe see what I did there 😃 ).
>
Anybody else has somethin’? 🙂
---
### Author:  [@fullofcaffeine](https://community.haxe.org/u/fullofcaffeine)
#### Post date: [August 21, 2019, 6:39pm UTC](https://community.haxe.org/t/op-updated-paste-here-some-haxe-javascript-build-hxmls-and-or-package-json-and-describe-your-toolchain/1955/10 "2019-08-21T18:39:28Z")
Hey Kyliathy,
It’s the [GitHub - massiveinteractive/haxe-react: React JS applications development using the Haxe language](https://github.com/massiveinteractive/haxe-react) lib. Indeed it’s a bit confusing that it ends up being called only ‘react’ in Haxe-land, though.
I managed to add SSR and I’m improving the code a bit. I’m still not 100% sure if it’s worth bridging coconut.data with plain react, but we shall see. The `controller` inside the sample `App.tsx` is now a plain react `Store` class that interfaces the React view with the coconut.data model. I’ll update the repo in the following days.
---
### Author:  [@Gama11](https://community.haxe.org/u/Gama11)
#### Post date: [August 21, 2019, 7:56pm UTC](https://community.haxe.org/t/op-updated-paste-here-some-haxe-javascript-build-hxmls-and-or-package-json-and-describe-your-toolchain/1955/11 "2019-08-21T19:56:15Z")
> [@fullofcaffeine](#):
>
> Indeed it’s a bit confusing that it ends up being called only ‘react’ in Haxe-land, though.
Is it? Having a lib named `haxe-react` on **Haxe** lib seems a bit redundant. 🙂