Elm-batteries: Elm + Parcel + Cypress + Netlify project template

Show and Tell
1

Hello! :wave: I released a project template and generator:

It creates an Elm app with:

  • Local web server and serverless functions (Parcel and Netlify Dev)
  • Hot code and style reloading, keeping app state
  • CSS transformations with postcss (purgecss, autoprefixer…)
  • Testing (elm-test and Cypress)
  • Optimized and minified production build
  • Preview and production deployments

The demo app also has minimal code examples of elm-css, Browser.Navigation, Url.Parser, RemoteData and Json.Decode to get started with these modules.

Here is a screenshot of the generated app being tested with Cypress:

elm-cypress.png1750Ă—1212

23 Likes
2

Woo - many hours saved of setting it up every time.
Thanks a lot :pray: !

1 Like
3

Really cool!

I was just looking into purgecss, and I couldn’t find much on it in relation to elm. How does it detect the classes in your elm files? Just regex-ing through the files?

1 Like
4

Thanks! Indeed, it:

  1. Looks for files with .elm extensions: postcss.config.js#L21
  2. Finds (with a regex) if the class exists in these files: postcss.config.js#L7 (the class extractor works for Tailwind classes, that includes : and / characters)

Note that in elm-batteries, purgecss is only used for production builds, saving some build time in local development: postcss.config.js#L12

Known limitations and alternatives:

  • purgecss won’t find and preserve classes created dynamically. Alternatively, we can explicitly whitelist class and tag names: postcss.config.js#L26
  • class names found in unused Elm functions will be preserved. Alternatively, and when removing dead code from sources is not an option, we could inspect the .js production build.
1 Like
5

That’s pretty cool, I guess the possibility of including a class by mistake (i.e having a variable or function somewhere of the same name) is more than offset by how simple and predictable it is.

Thanks for making this, as a non-JS person most of these tools are new to me. I’m learning a lot from just browsing through your template and finding out what the build does.

6

I am curious - why do you favor yarn over npm?

7

Exactly :slight_smile: The main motivation is to use CSS framework like Tailwind (that has thousands of utility classes like bg-gray-500, border-l-4…) while controlling the size of the production css.

Thanks for your feedback, I really appreciate!

8

I have no particular recommandation, is this something you read in the documentation :thinking:?

elm-batteries generator and project template support both npm and yarn. For example:

npm init elm-batteries ./my-elm-app

cd my-elm-app && npm run dev

or

yarn create elm-batteries ./my-elm-app

cd my-elm-app && yarn dev
9

I have another question: What is the reason for using rtfeldman/elm-css if you’re using tailwind? Do you want to mix tailwind classes with the option to do something custom here and there?

10

Exactly, like in the demo View.elm:

See also configuration and customization via tailwind.config.js

1 Like
11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.