{"id":13393309,"url":"https://github.com/cedricss/elm-batteries","last_synced_at":"2025-04-10T23:24:50.415Z","repository":{"id":45292930,"uuid":"177555713","full_name":"cedricss/elm-batteries","owner":"cedricss","description":"Learn how Elm, Parcel, Cypress and Netlify work together. Get started with Elm navigation, routes, remote data and decoder.","archived":false,"fork":false,"pushed_at":"2021-10-21T19:44:16.000Z","size":702,"stargazers_count":117,"open_issues_count":1,"forks_count":5,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-28T03:07:14.360Z","etag":null,"topics":["cypress","elm","elm-test","netlify","parcel","postcss","purgecss","tailwind-css"],"latest_commit_sha":null,"homepage":"https://elm-batteries.netlify.com/demo","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cedricss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-25T09:34:07.000Z","updated_at":"2024-10-22T23:51:42.000Z","dependencies_parsed_at":"2022-08-19T03:21:08.004Z","dependency_job_id":null,"html_url":"https://github.com/cedricss/elm-batteries","commit_stats":null,"previous_names":[],"tags_count":18,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedricss%2Felm-batteries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedricss%2Felm-batteries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedricss%2Felm-batteries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedricss%2Felm-batteries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cedricss","download_url":"https://codeload.github.com/cedricss/elm-batteries/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247730068,"owners_count":20986404,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cypress","elm","elm-test","netlify","parcel","postcss","purgecss","tailwind-css"],"created_at":"2024-07-30T17:00:49.889Z","updated_at":"2025-04-10T23:24:50.392Z","avatar_url":"https://github.com/cedricss.png","language":"Elm","funding_links":[],"categories":["Elm","Boilerplates"],"sub_categories":["Individual Podcast episodes"],"readme":"[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/4954c048-352a-4b1c-bea5-05d4a7c1c4fc/deploy-status)](https://elm-batteries.netlify.com)\n\n# Elm Batteries Included\n\nA project template and a generator to:\n\n- Learn how [Elm](https://elm-lang.org/), [Parcel](https://parceljs.org), [Cypress](https://www.cypress.io) and [Netlify](https://www.netlify.com) work together 😋\n- Get started with Elm css, navigation, routes, remote data and JSON decoder\n\n## Features\n\n- Local web server and optional serverless functions\n- Hot code and style reloading, keeping app state\n- CSS transformations with postcss (`autoprefixer`, `purgecss`...)\n- Front-end testing\n- Optimized and minified production build\n- Preview and production deployments\n\n[**Table of contents ›**](#table-of-contents)\n\n## Quick Start\n\n- `npm init elm-batteries ./my-elm-app`\n- or `yarn create elm-batteries ./my-elm-app`\n- or [generate from Github](https://github.com/cedricss/elm-batteries/generate)\n\n[**Learn more ›**](#setup)\n\n\u003ch3 align=\"center\"\u003e\n  \u003ci\u003eThe generated \u003ca href=\"https://elm-lang.org\"\u003eElm\u003c/a\u003e app. Started with \u003ca href=\"https://parceljs.org\"\u003eParcel\u003c/a\u003e\u003cbr/\u003e behind \u003ca href=\"https://www.netlify.com/products/dev/\"\u003eNetlify Dev\u003c/a\u003e and tested with \u003ca href=\"https://www.cypress.io\"\u003eCypress\u003c/a\u003e:\u003c/i\u003e\n\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://elm-batteries.netlify.com/demo\"\u003e\n    \u003cimg width=\"875px\" src=\"https://concat.dev/elm-cypress.png\" alt=\"elm-batteries template demo\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Test file source:\n  \u003ca href=\"https://github.com/cedricss/elm-batteries/blob/master/cypress/integration/demo.spec.js\"\u003e\n    demo.spec.js\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Links\n\n- Demo: [elm-batteries.netlify.com/demo](https://elm-batteries.netlify.com/demo)\n- Twitter: [@CedricSoulas](https://twitter.com/CedricSoulas)\n- Newsletter: [concat.dev/elm](https://concat.dev/elm#subscribe)\n- Chat: [Slack](https://elmlang.herokuapp.com/) (ping @CedricSoulas)\n- Forum: [Discourse thread](https://discourse.elm-lang.org/t/elm-batteries-elm-parcel-cypress-netlify-project-template/4077)\n\n## Overview\n\n\u003ch3 align=\"center\"\u003e\n  Usage with \u003ca href=\"https://www.npmjs.com/get-npm\"\u003enpm\u003c/a\u003e or \u003ca href=\"https://yarnpkg.com\"\u003eyarn\u003c/a\u003e\n\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://elm-batteries.netlify.com/demo\"\u003e\n    \u003cimg width=\"875px\" src=\"https://concat.dev/sneak_peek.png\" alt=\"Website documentation (sneak peek)\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Table of contents\n\n- Setup\n  - [From the CLI](#from-the-CLI)\n  - [From the repository template](#from-the-repository-template)\n- Local development\n  - [Develop](#develop)\n  - [Run a live session](#run-a-live-session)\n- Testing\n  - [Run Cypress](#run-cypress)\n  - [Run unit and fuzz tests](#run-unit-and-fuzz-tests)\n- Production build and deployment\n  - [Build for production and deploy a preview](#build-for-production-and-deploy-a-preview)\n  - [Deploy to production](#deploy-to-production)\n  - [Going further](#going-further)\n- Designing\n  - [Tailwind](#designing)\n  - [CSS build tools](#designing)\n- See also\n  - [Html meta tags](#meta-tags)\n  - [Elm Navigation](#navigation)\n\n## Setup\n\n### From the CLI\n\nThe CLI lets you pick the batteries to include in your app:\n\n\u003cimg width=\"438px\" src=\"https://concat.dev/create-elm-batteries.png\" alt=\"create-elm-batteries cli generator\" /\u003e\n\n#### `npm`\n\n```\nnpm init elm-batteries ./my-elm-app\n```\n\n```\ncd my-elm-app \u0026\u0026 npm run dev\n```\n\n#### or `yarn`\n\n```\nyarn create elm-batteries ./my-elm-app\n```\n\n```\ncd my-elm-app \u0026\u0026 yarn dev\n```\n\n### From the repository template\n\n\u003cimg width=\"401px\" src=\"https://concat.dev/use-this-template.png\" alt=\"Use this Github Template\" /\u003e\n\nClick [Use this template](https://github.com/cedricss/elm-batteries/generate) to generate a new public or private project from [elm-batteries](https://github.com/cedricss/elm-batteries).\n\nInstall the dependencies with `npm install` or `yarn install` and run `npm run dev` or `yarn dev`.\n\n---\n\n💡 In the following documentation, if you use [yarn](https://yarnpkg.com), run `yarn \u003ccommand-name\u003e` (instead of `npm run \u003ccommand-name\u003e`). Alternatively, you can define short aliases in your terminal to run these commands.\n\n## Local development\n\n### Develop\n\nTo run serverless functions along your Elm app, run\n\n```bash\nnpm run dev\n```\n\nor\n\n```bash\nyarn dev\n```\n\nThen open [localhost:8888](http://localhost:8888)\n\n![Netlify Dev on top of Parcel and serverless functions](https://concat.dev/netlify-dev.png)\n\n\u003e ✓ development build with [Parcel](https://parceljs.org/)\u003cbr/\u003e\n\u003e ✓ web server with Parcel behind [Netlify Dev](https://www.netlify.com/docs/cli/#netlify-dev-beta)\u003cbr/\u003e\n\u003e ✓ serverless functions on your local machine\u003cbr/\u003e\n\u003e ✓ hot code swapping with [elm-hot](https://github.com/klazuka/elm-hot)\u003cbr/\u003e\n\n⚠️ Netlify Dev connects to the `1234` default Parcel port. Make sure this port isn't used by another application.\n\n### Develop without Netlify Dev\n\nRead [Elm + Parcel](https://github.com/cedricss/elm-batteries/blob/master/PARCEL.md) to use this project template without Netlify Dev and serverless functions.\n\n### Run a live session\n\nTo share your development session with a coworker, run:\n\n```bash\nnpm run dev:live\n```\n\n\u003e ✓ development build with [Parcel](https://parceljs.org/)\u003cbr/\u003e\n\u003e ✓ live sharing with [Netlify Dev](https://www.netlify.com/docs/welcome/)\u003cbr/\u003e\n\n## Testing\n\n### Run Cypress\n\nThese tests are in `cypress/integration/*`. [Start your Elm app](#1-develop-with-serverless-functions) then launch the Cypress runner app:\n\n```bash\nnpm run cypress:open\n```\n\nIf you open one test from the list of spec files (for example [demo.spec.js](https://github.com/cedricss/elm-batteries/blob/master/cypress/integration/demo.spec.js)) then you should see your application loaded:\n\n![Cypress runner app](https://concat.dev/elm-cypress.png)\n\nAlternatively, to run Cypress tests from the CLI without the GUI:\n\n```bash\nnpm run cypress\n```\n\nThe Elm app uses `data-*` attributes to provide context to the selectors and insulate them from CSS or JS changes. [Learn more ›](https://docs.cypress.io/guides/references/best-practices.html#Selecting-Elements)\n\nTo learn more about Cypress and play with it, [install and start it](https://docs.cypress.io/guides/getting-started/installing-cypress.html#Installing) in a fresh new project folder: it will initialize a `cypress` folder with several examples.\n\n### Run unit and fuzz tests\n\nInstall [elm-test](https://github.com/rtfeldman/node-test-runner).\n\nThese tests are in `tests/*`. To start the runner in [watch mode](https://github.com/rtfeldman/node-test-runner#--watch):\n\n```bash\nnpm run test:watch\n```\n\nAlternatively, run it just once:\n\n```bash\nnpm run test\n```\n\n## Production build and deployment\n\n### Build for production and deploy a preview\n\n```bash\nnpm run deploy\n```\n\nor\n\n```bash\nyarn deploy\n```\n\n\u003e ✓ production build with [Parcel](https://parceljs.org/)\u003cbr/\u003e\n\u003e ✓ compilation with the Elm `optimize` flag\u003cbr/\u003e\n\u003e ✓ minification with [`terser`](https://github.com/terser-js/terser)\u003cbr/\u003e\n\u003e ✓ deployment to a [Netlify](https://www.netlify.com/docs/welcome/) _Live Draft URL_\u003cbr/\u003e\n\n💡 If you are using Netlify for the first time, run `netlify login` to authenticate (learn more about [Netlify CLI](https://www.netlify.com/docs/cli/)).\n\n💡 The JS code from Elm is minified with [special flags](https://elm-lang.org/0.19.0/optimize) that work for Elm apps because they have no side-effects (otherwise it would be unreliable to use such flags).\n\nIf this preview looks good, deploy to production.\n\n### Deploy to production\n\n```bash\nnpm run deploy:prod\n```\n\n\u003e ✓ deployment to production with [Netlify](https://www.netlify.com/docs/welcome/)\u003cbr/\u003e\n\n### Going further\n\n`deploy` commands are great when rapidly iterating. Consider also setting up [continuous deployment with Netlify »](https://www.netlify.com/docs/continuous-deployment/).\n\n## Designing\n\n[Tailwind CSS](https://tailwindcss.com/), an utility-first CSS framework, is included along with:\n\n- [`postcss`](https://postcss.org/) (read [`postcss.config.js`](postcss.config.js)),\n- [`autoprefixer`](https://github.com/postcss/autoprefixer) to add vendor prefixes,\n- [`purgecss`](https://github.com/FullHuman/purgecss) to remove unused selectors,\n- and [`cssnano`](https://cssnano.co/) to compress the css (by default with Parcel).\n\n`purgecss` and `cssnano` are used on production mode to minify the css. They are ignored on development mode.\n\n## See also\n\n### Meta tags\n\n[`index.html`](index.html) has meta tags included, like [Twitter Card](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html) tags and Open Graph tags. Make sure to update their values and the content preview image (`img/content_preview.jpg`).\n\n### Elm\n\n#### Navigation\n\n- All links in an application create a [`UrlRequest`](https://package.elm-lang.org/packages/elm/browser/latest/Browser#UrlRequest) (read [Browser.application](https://package.elm-lang.org/packages/elm/browser/latest/Browser#application)).\n- A [navigation `Key`](https://package.elm-lang.org/packages/elm/browser/latest/Browser-Navigation#Key) is needed to create navigation commands that change the URL: it is stored in the `Model`.\n- `Nav.pushUrl` changes the address bar without starting a page load.\n\n## Links and sources\n\n- Demo: [elm-batteries.netlify.com/demo](https://elm-batteries.netlify.com/demo)\n- Documentation: [Table of contents](https://github.com/cedricss/elm-batteries#table-of-contents)\n- Twitter: [@CedricSoulas](https://twitter.com/CedricSoulas)\n- Newsletter: [concat.dev/elm](https://concat.dev/elm#subscribe)\n- Chat: [Slack](https://elmlang.herokuapp.com/) (ping @CedricSoulas)\n- Forum: [Discourse thread](https://discourse.elm-lang.org/t/elm-batteries-elm-parcel-cypress-netlify-project-template/4077)\n- Project template: [github.com/cedricss/elm-batteries](https://github.com/cedricss/elm-batteries)\n- Built with elm-batteries:\n  - [reactive.how/rxjs](https://reactive.how/rxjs)\n  - [concat.dev](https://concat.dev)\n\n## License\n\nAuthored by [Cédric Soulas](https://twitter.com/CedricSoulas), released under the [MIT](LICENSE) License. Read [LICENSE](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcedricss%2Felm-batteries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcedricss%2Felm-batteries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcedricss%2Felm-batteries/lists"}