jfairbank / jfairbank/programming-elm.com

Integrate with javascript webpack `npm start` build error

Open
#17 1 comment 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.