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

**URL:** <https://discourse.elm-lang.org/t/elm-batteries-elm-parcel-cypress-netlify-project-template/4077>\
**Category:** Show and Tell\
**Created:** [July 30, 2019, 10:07am UTC](https://discourse.elm-lang.org/t/elm-batteries-elm-parcel-cypress-netlify-project-template/4077 "2019-07-30T10:07:03Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![cedricsoulas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/cedricsoulas/32/2395_2.png) [@cedricsoulas](https://discourse.elm-lang.org/u/cedricsoulas)\
**Post date:** [July 30, 2019, 10:07am UTC](https://discourse.elm-lang.org/t/elm-batteries-elm-parcel-cypress-netlify-project-template/4077/1 "2019-07-30T10:07:03Z")

</div>

Hello! 👋 I released a project template and generator:

> **[cedricss/elm-batteries](https://github.com/cedricss/elm-batteries)**
>
> Learn how Elm, Parcel, Cypress and Netlify work together. Get started with Elm navigation, routes, remote data and decoder. - cedricss/elm-batteries

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:

 ![](https://concat.dev/elm-cypress.png)

---

<div class="post-metadata">

**Author:** ![Maxim-Filimonov](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/maxim-filimonov/32/1342_2.png) [@Maxim-Filimonov](https://discourse.elm-lang.org/u/Maxim-Filimonov)\
**Post date:** [August 1, 2019, 2:35pm UTC](https://discourse.elm-lang.org/t/elm-batteries-elm-parcel-cypress-netlify-project-template/4077/2 "2019-08-01T14:35:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![2mol](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/2mol/32/864_2.png) [@2mol](https://discourse.elm-lang.org/u/2mol)\
**Post date:** [August 3, 2019, 6:17am UTC](https://discourse.elm-lang.org/t/elm-batteries-elm-parcel-cypress-netlify-project-template/4077/3 "2019-08-03T06:17:47Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![cedricsoulas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/cedricsoulas/32/2395_2.png) [@cedricsoulas](https://discourse.elm-lang.org/u/cedricsoulas)\
**Post date:** [August 3, 2019, 7:12am UTC](https://discourse.elm-lang.org/t/elm-batteries-elm-parcel-cypress-netlify-project-template/4077/4 "2019-08-03T07:12:12Z")

</div>

Thanks! Indeed, it:

1. Looks for files with `.elm` extensions: [postcss.config.js#L21](https://github.com/cedricss/elm-batteries/blob/master/postcss.config.js#L21)
2. Finds (with a regex) if the class exists in these files: [postcss.config.js#L7](https://github.com/cedricss/elm-batteries/blob/master/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](https://github.com/cedricss/elm-batteries/blob/master/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](https://github.com/cedricss/elm-batteries/blob/master/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.

---

<div class="post-metadata">

**Author:** ![2mol](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/2mol/32/864_2.png) [@2mol](https://discourse.elm-lang.org/u/2mol)\
**Post date:** [August 3, 2019, 7:40pm UTC](https://discourse.elm-lang.org/t/elm-batteries-elm-parcel-cypress-netlify-project-template/4077/5 "2019-08-03T19:40:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![FranzSkuffka](https://avatars.discourse-cdn.com/v4/letter/f/c4cdca/32.png) [@FranzSkuffka](https://discourse.elm-lang.org/u/FranzSkuffka)\
**Post date:** [August 3, 2019, 10:06pm UTC](https://discourse.elm-lang.org/t/elm-batteries-elm-parcel-cypress-netlify-project-template/4077/6 "2019-08-03T22:06:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cedricsoulas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/cedricsoulas/32/2395_2.png) [@cedricsoulas](https://discourse.elm-lang.org/u/cedricsoulas)\
**Post date:** [August 5, 2019, 1:24pm UTC](https://discourse.elm-lang.org/t/elm-batteries-elm-parcel-cypress-netlify-project-template/4077/7 "2019-08-05T13:24:21Z")

</div>

> [@2mol](#):
>
> 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.

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

> [@2mol](#):
>
> 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.

Thanks for your feedback, I really appreciate!

---

<div class="post-metadata">

**Author:** ![cedricsoulas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/cedricsoulas/32/2395_2.png) [@cedricsoulas](https://discourse.elm-lang.org/u/cedricsoulas)\
**Post date:** [August 5, 2019, 1:38pm UTC](https://discourse.elm-lang.org/t/elm-batteries-elm-parcel-cypress-netlify-project-template/4077/8 "2019-08-05T13:38:45Z")

</div>

> [@FranzSkuffka](#):
>
> I am curious - why do you favor yarn over npm?

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

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

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

```

```auto
cd my-elm-app && npm run dev

```

or

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

```

```auto
cd my-elm-app && yarn dev

```

---

<div class="post-metadata">

**Author:** ![2mol](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/2mol/32/864_2.png) [@2mol](https://discourse.elm-lang.org/u/2mol)\
**Post date:** [August 7, 2019, 12:19pm UTC](https://discourse.elm-lang.org/t/elm-batteries-elm-parcel-cypress-netlify-project-template/4077/9 "2019-08-07T12:19:39Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![cedricsoulas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/cedricsoulas/32/2395_2.png) [@cedricsoulas](https://discourse.elm-lang.org/u/cedricsoulas)\
**Post date:** [August 9, 2019, 1:36pm UTC](https://discourse.elm-lang.org/t/elm-batteries-elm-parcel-cypress-netlify-project-template/4077/10 "2019-08-09T13:36:16Z")

</div>

Exactly, like in the demo `View.elm`:

> <https://github.com/cedricss/elm-batteries/blob/master/src/View.elm#L27>

See also configuration and customization via [tailwind.config.js](https://tailwindcss.com/docs/configuration)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [August 19, 2019, 1:36pm UTC](https://discourse.elm-lang.org/t/elm-batteries-elm-parcel-cypress-netlify-project-template/4077/11 "2019-08-19T13:36:22Z")

</div>

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