{"id":13431998,"url":"https://github.com/kentcdodds/es6-todomvc","last_synced_at":"2025-03-16T23:30:21.187Z","repository":{"id":36175410,"uuid":"40479530","full_name":"kentcdodds/es6-todomvc","owner":"kentcdodds","description":"The vanillajs example converted to es6","archived":true,"fork":false,"pushed_at":"2021-01-25T23:23:54.000Z","size":1241,"stargazers_count":352,"open_issues_count":0,"forks_count":358,"subscribers_count":16,"default_branch":"main","last_synced_at":"2024-10-27T11:47:26.306Z","etag":null,"topics":["kcd-archive","kcd-edu"],"latest_commit_sha":null,"homepage":"https://kcd.im/webpack-workshop-repo","language":"JavaScript","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/kentcdodds.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":"2015-08-10T11:41:28.000Z","updated_at":"2024-05-02T15:29:22.000Z","dependencies_parsed_at":"2022-08-18T14:21:33.414Z","dependency_job_id":null,"html_url":"https://github.com/kentcdodds/es6-todomvc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fes6-todomvc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fes6-todomvc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fes6-todomvc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fes6-todomvc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kentcdodds","download_url":"https://codeload.github.com/kentcdodds/es6-todomvc/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243949725,"owners_count":20373648,"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":["kcd-archive","kcd-edu"],"created_at":"2024-07-31T02:01:07.678Z","updated_at":"2025-03-16T23:30:21.175Z","avatar_url":"https://github.com/kentcdodds.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Webpack Workshop\n\n\u003e Using the Vanilla JavaScript TodoMVC Example\n\n[![MIT License][license-badge]][LICENSE]\n[![Donate][donate-badge]][donate]\n[![Star on GitHub][github-star-badge]][github-star]\n[![Tweet][twitter-badge]][twitter]\n\n\u003ca href=\"https://app.codesponsor.io/link/PKGFLnhDiFvsUA5P4kAXfiPs/kentcdodds/es6-todomvc\" rel=\"nofollow\"\u003e\u003cimg src=\"https://app.codesponsor.io/embed/PKGFLnhDiFvsUA5P4kAXfiPs/kentcdodds/es6-todomvc.svg\" style=\"width: 888px; height: 68px;\" alt=\"Sponsor\" /\u003e\u003c/a\u003e\n\n## Purpose\n\nThis was originally part of [an ES6 training](http://kcd.im/es6-intro-slides) by [Kent C. Dodds](https://twitter.com/kentcdodds)\n\nNow I'm using it to teach people about [Webpack](http://webpack.github.io/):\n\n- [Egghead.io lessons](http://kcd.im/egghead-webpack)\n- [Frontend Masters](http://kcd.im/fem-webpack)\n\n## Thanks\n\nThis codebase was originally taken from the TodoMVC project starting [here](https://github.com/tastejs/todomvc/tree/563d1e1b8cee5f6ec962ec43663cb66a72b69d76/examples/vanillajs). Big thanks to them!\n\n## Latest Workshop\n\nThis repo has been used to teach in several different places (egghead, Frontend Masters, etc.). If you're coming here\nto follow along with that, then I recommend you follow the project setup for that (see below). The most recent and\nup-to-date version of the workshop is [the Frontend Masters workshop](http://kcd.im/fem-webpack). This is a linear\nworkshop and starts with the `FEM/00-original-project` branch. See\n[the slides](https://slides.com/kentcdodds/webpack-deep-dive).\n\n## Project Setup\n\nThis project assumes you have [NodeJS v6](http://nodejs.org/) or greater installed. You should\nalso have [npm v3](https://www.npmjs.com/) or greater installed as well (this comes packaged\nwith Node 6). You'll also need a recent version of [git](https://git-scm.com/) installed\nas well.\n\nYou may have come to this project from different varying sources. There are a\ndifferent series of branches for each workshop/course I've done. To get started with\nthe project, start with this:\n\n1. [Sign up](https://github.com/join) for a GitHub Account (if you don't already have one)\n2. [Fork](https://help.github.com/articles/fork-a-repo/) this repo\n3. [Clone](https://help.github.com/articles/cloning-a-repository/) your fork\n4. In the directory you cloned the repository, run `git fetch --all`\n\nIf you need help with these steps, you might check out\n[this free Egghead.io course](http://kcd.im/pull-request) which can help you get things going.\n\nFinally, based on which version of the project you're looking for (workshop, egghead, or\nFrontend Masters) you'll run one of the following commands in the cloned directory:\n\n- **ES6 Workshop**: `npm run setup:workshop`\n- **Egghead Course**: `npm run setup:egghead`\n- **Frontend Masters Workshop**: `npm run setup:fem`\n\nIf you get any failures at this point something is wrong and needs to be fixed. Remember,\n[Google](https://google.com) and [StackOverflow](https://stackoverflow.com) are your friends.\n\nYou might find it helpful to see a list of the available branches. Run: `git branch` for that.\n\n## Notes\n\nBecause Webpack 2 is currently in beta, there are issues with `peerDependencies`, so you’ll have to use npm version 3 to be able to install the dependencies.\n\nRunning Webpack with `webpack -p` is not [showing the warnings](https://webpack.js.org/guides/migrating/#uglifyjsplugin-warnings) about the dead code elimination anymore. However, it is working as expected.\n\n### Updates\n\nThe ecosystem moves fast. So this section of the README will be dedicated to tracking changes in the ecosystem so you\ncan follow the repo, but be aware of changes in the latest versions of the dependencies you'll be installing (or if\nthere are better dependencies to use now).\n\n- All courses\n  - `babel-preset-es2015-webpack` is no longer necessary for leveraging tree shaking. You can now just use\n  `babel-preset-es2015` with a special configuration to indicate modules should not be transformed.\n  [More info](https://github.com/kentcdodds/es6-todomvc/issues/13)\n- Egghead Course\n  - Using `istanbul` is no longer necessary for checking code coverage and can actually be accomplished using special\n  configuration in `karma.conf.js` with the `karma-coverage` plugin like\n  [this](https://github.com/kentcdodds/es6-todomvc/blob/f4f790ef7602bf9de4620841848d91f5213e647e/karma.conf.js#L22-L29).\n\n### Contributing\n\nSuper nice that you're interested in contributing. Unfortunately things are pretty complex with how things are set up\nwith branches for each section of the workshop. So feel free to file pull requests to indicate what needs to be changed\nbut if I decide to implement a change in the workshop code, I'll probably just have to manually make the updates.\nThanks!\n\n## Windows 10 Setup Instructions\n\n1. Fork and clone this repository\n2. Download Git Bash \n3. Follow the instructions on this page to clone all branches at once in Git Bash: https://stackoverflow.com/questions/40310932/git-hub-clone-all-branches-at-once\n4. In Git Bash: run `cd es6-todomvc` \n5. Run `npm run setup:fem` (this will fail, but there is a workaround)\n6. After that fails:\n\n* In **Git Bash** run `git stash`\n* run `git checkout FEM/00-original-project --force`\n* Make sure http-server is installed globally: `npm i -g http-server`\n* run `http-server --silent -c-1 -p 3084` (or whatever port number you want to use). If the port number you are trying to use is already in use, it will give you a nasty error that says something like: Error: listen EADDRINUSE 0.0.0.0:8081\n* Open `http://localhost:3084/` or change the URL to indicate the port number you wish to use\n* In your package.json file, add `-p 3084` to the end of your \"start\" script \n* Add `open http://localhost:3084/ \u0026\u0026 ` to the beginning of your start script (make sure there is a space between `\u0026\u0026` and `http-server`\n* now you can just run `npm start` and the app should load up at `http://localhost:3084`\n\n## LICENSE\n\nMIT\n\n[license-badge]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square\n[license]: https://github.com/kentcdodds/es6-todomvc/blob/master/LICENSE\n[donate-badge]: https://img.shields.io/badge/%EF%BC%84-support-green.svg?style=flat-square\n[donate]: http://kcd.im/donate\n[github-star-badge]: https://img.shields.io/github/stars/kentcdodds/es6-todomvc.svg?style=social\u0026label=Star\n[github-star]: https://github.com/kentcdodds/es6-todomvc/stargazers\n[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20this%20fantastic%20webpack%20workshop!%20http://kcd.im/webpack-workshop-repo%20%F0%9F%98%8E\n[twitter-badge]: https://img.shields.io/twitter/url/https/kcd.im/webpack-workshop-repo.svg?style=social\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkentcdodds%2Fes6-todomvc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkentcdodds%2Fes6-todomvc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkentcdodds%2Fes6-todomvc/lists"}