jfairbank / jfairbank/programming-elm.com
Integrate with javascript webpack `npm start` build error
- Dominant language
- Elm
- Stars
- 20
- Forks
- 4
- PR merge metrics
- No merged PRs in 30d
Description
> This is a continuation of #16 as for this chapter `elm-watch` isn't enough.
I should caveat this issue by saying I don't understand react and this is an opinionated post; other readers might be coming from a javascript background. For those like me without a javascript background, you'd first start by trying to import `index.js` into your `index.html` and expect things to work. They won't, as react needs to be compiled into `.js` (with a tool like Vite, [Parcel](https://www.youtube.com/watch?v=I7a96HHfsME), Babel, so on). You then start the slippery slope of how on earth to compile with these tools, and IMO they're not beginner friendly. I've used CLI tools, [css compilers](https://lesscss.org), and other package managers, so it's not like I'm uninitiated. They suck to setup (and understand the docs) and get outdated quite quickly it seems.
I tried to [avoid using a compiler](https://medium.com/@chrislewisdev/react-without-npm-babel-or-webpack-1e9a6049714), to find an [online compiler](https://nextleap.app/online-compiler/reactjs-programming) (works nicely but doesn't output `.js` file), and looked over the three compilers named above. All of them (except Parcel) were a headache.
Luckily `elm-watch` suggests using [esbuild](https://esbuild.github.io) which took me (literally) 1 minute to install and get working (you'll need to [setup the server](https://lydell.github.io/elm-watch/server/) first).
```terminal
npm install elm-watch@beta
npx elm-watch init
npm install react@16.5.2 react-dom@16.5.2
npm install --save-dev esbuild
# Rename your `.js` files to `.jsx`
npx esbuild src/index.jsx --bundle --outfile=public/app.js
# Add the `"serve": "./public/"` to the `elm.json` file underneath `"targets"`
npx elm-watch hot
```
Done!
I think we're very lucky that Elm is such a pleasure to setup and get working with packages, and that everything is already built in. The javascript world really puts me off. Hopefully this makes readers lives a little easier — [see the full source code](https://github.com/badlydrawnrob/elm-playground/tree/4822deb6e8ef360e1996815d65e57107be2da109/programming-elm/08-javascript) (for initial chapter setup)[^1]
[^1]: I'm sorry about the commit's expletives but that's how it felt, and too late to change the message now!! 🤦♂️
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.