{"id":13561850,"url":"https://github.com/rlopzc/elm-webpack-starter","last_synced_at":"2025-07-04T20:39:46.102Z","repository":{"id":37970030,"uuid":"127054802","full_name":"rlopzc/elm-webpack-starter","owner":"rlopzc","description":"Elm 0.19 webpack 4 starter template to build SPA","archived":false,"fork":false,"pushed_at":"2024-09-04T11:20:02.000Z","size":3735,"stargazers_count":112,"open_issues_count":25,"forks_count":9,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-28T17:05:39.609Z","etag":null,"topics":["bootstrap-4","elm","elm-19","elm-lang","elm-spa","elm-webpack","gzip","netlify","sass","template","webpack"],"latest_commit_sha":null,"homepage":"","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/rlopzc.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-27T22:52:16.000Z","updated_at":"2024-06-11T02:51:16.000Z","dependencies_parsed_at":"2023-02-05T01:46:58.949Z","dependency_job_id":"d0a65de0-b67f-4362-ab5b-37d81f7207ab","html_url":"https://github.com/rlopzc/elm-webpack-starter","commit_stats":{"total_commits":407,"total_committers":5,"mean_commits":81.4,"dds":"0.23832923832923836","last_synced_commit":"06b8255aa7c27ce0e9db6adf7f139f4cedf7eeb7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rlopzc/elm-webpack-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rlopzc%2Felm-webpack-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rlopzc%2Felm-webpack-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rlopzc%2Felm-webpack-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rlopzc%2Felm-webpack-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rlopzc","download_url":"https://codeload.github.com/rlopzc/elm-webpack-starter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rlopzc%2Felm-webpack-starter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263617728,"owners_count":23489529,"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":["bootstrap-4","elm","elm-19","elm-lang","elm-spa","elm-webpack","gzip","netlify","sass","template","webpack"],"created_at":"2024-08-01T13:01:01.963Z","updated_at":"2025-07-04T20:39:46.073Z","avatar_url":"https://github.com/rlopzc.png","language":"Elm","funding_links":[],"categories":["Elm"],"sub_categories":[],"readme":"# elm-webpack-4-starter\n\n### [Demo](https://elm-webpack-4-starter.netlify.com/)\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/52572774-eddd-41c7-94ef-6dedddf46540/deploy-status)](https://app.netlify.com/sites/elm-webpack-4-starter/deploys)\n\n## About\n\nA Webpack 4 setup for writing [Elm](http://elm-lang.org/) apps:\n\n* Webpack optimized Elm production code with TerserJS [Here](https://github.com/romariolopezc/elm-webpack-4-starter/blob/master/build-utils/webpack.production.js#L41)\n* Webpack dev server with [Elm Hot Loader](https://github.com/klazuka/elm-hot-webpack-loader).\n* [Webpack dashboard](https://github.com/FormidableLabs/webpack-dashboard) to have more info about the dev-server\n* [Elm Analyse](https://github.com/stil4m/elm-analyse). Tool to identify Elm code deficiencies and best practices\n* Support assets\n  * Images\n    * Automatic Compression of images copied by `copy-webpack-plugin`\n  * CSS/SCSS\n    * PostCSS with Autoprefixer with Autoprefixer support for the latest Browsers (defined in `package.json`)\n    * [PurifyCSS](https://github.com/purifycss/purifycss) to remove unused CSS\n    * CSS minification\n* Bootstrap 4 (Sass version)\n* Bundling and minification for deployment with [compressed version of assets](https://github.com/webpack-contrib/compression-webpack-plugin) (gzip)\n* Examples (examples/)\n  * Hello world\n  * Counter\n* App scaffold using Richard Feldman [RealWorld example app](https://github.com/rtfeldman/elm-spa-example)\n* [Webpack bundle analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) to visualize the outputted files\n\n## Requirements\n\n* [Yarn](https://yarnpkg.com/lang/en/docs/install/)\n* Node \u003e= v10.19.0\n* Webpack \u003e= 4.0.0\n* [Elm](https://guide.elm-lang.org/install.html)\n\n## Install\n\nClone this repo into a new project folder, e.g. `my-elm-project`:\n\n```sh\ngit clone https://github.com/romariolopezc/elm-webpack-4-starter my-elm-project\ncd my-elm-project\n```\n\nRe-initialize the project folder as your own repo:\n\n```sh\nrm -rf .git\ngit init\ngit add .\ngit commit -m 'initial commit'\n```\n\nInstall all dependencies using this commands:\n\n```sh\nyarn install\n```\n\n*This does a clean install of all npm packages.*\n*Elm packages are automatically installed by doing `yarn dev` or `yarn prod`*\n\n## Serve locally\n\n```sh\nyarn dev\n```\n\n* Access app at `http://localhost:8080/`\n* Get coding! The entry point file is `src/elm/Main.elm`\n* Browser will refresh automatically on any file changes, including css\n* Elm app is going to preserve the state on each refresh\n\nTo analyse your elm code, look for deficiencies and apply best practices, use:\n\n```sh\nyarn elm-analyse\n```\n\nAccess the web client at `http://localhost:3000`\n\n### Path based routing\n\nFor Path based routing look at [this](https://github.com/romariolopezc/elm-webpack-4-starter/pull/44)\n\n## Build \u0026 bundle for production\n\nThere are presets related to production.\nPresets:\n\n* `compress`: Use WebpackCompressionPlugin\n* `analyze`:  Use WebpackBundleAnalyzer\n\n```sh\nyarn prod\nyarn prod:\u003cpreset\u003e # \u003c- This is the pattern for the presets, defined in package.json\nyarn prod:compress\nyarn prod:analyze\n```\n\nYou can add your own presets to test functionality without breaking the working build.\n\n* Files are saved into the `/dist` folder\n* To check it, open `dist/index.html`\n\n## Deploying the App\n\nTo deploy our app, we are going to use the free service (for personal use) [Netlify](https://www.netlify.com/)\n\nYou can automatically deploy this template with this button\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/romariolopezc/elm-webpack-4-starter)\n\n### Features on Netlify\n\n* Automatic SSL Certificate\n* Serves gzipped files from our build ;)\n* Continuous deployment on selected Branches with preview\n\n### Steps\n\n1. Create an account [here](https://app.netlify.com/signup)\n2. Download the CLI `$ yarn global add netlify-cli`\n3. Login `$ netlify login` and it will open the browser for you to authorize the CLI\n4. Deploy your site with `$ netlify deploy --prod`\n    * Choose `Create \u0026 configure new site`\n    * Choose a site name or leave it blank for random name\n    * Choose your account\n5. Open the `Live URL` from the command output\n6. Site live and ready.\n\n#### Continuous Deployment\n\nIf you want CD (Continuous Deployment), learn more on how to configure Netlify [here](https://www.netlify.com/docs/continuous-deployment/)\n\nFor CD:\n\n1. Run `$ netlify open` to go to your deployed site configuration\n2. Go to Settings -\u003e Build \u0026 deploy. Click `Link site to Git`\n3. Link your github/gitlab account and choose your repo\n4. Choose your branch for CD\n5. Leave `Basic build settings` as it is (we have the configuration in root `netlify.toml`)\n6. Click `Deploy site`\n\n## Contributing\n\nPR's welcome :)\n\n## Notes\n\n* This webpack template was heavily inspired in the Elm Community [elm-webpack-starter](https://github.com/elm-community/elm-webpack-starter).\n* The webpack build-utils and preset pattern was taken from the FrontendMasters course [Webpack fundamentals](https://frontendmasters.com/courses/webpack-fundamentals/).\n* If Bootstrap JS not needed, delete it from the webpack entry in `webpack.config.js` and also delete the file `src/assets/js/vendor.js`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frlopzc%2Felm-webpack-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frlopzc%2Felm-webpack-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frlopzc%2Felm-webpack-starter/lists"}