Webpack Workshop

Using the Vanilla JavaScript TodoMVC Example

Purpose

This was originally part of an ES6 training by Kent C. Dodds

Now I'm using it to teach people about Webpack:

• Egghead.io lessons
• Frontend Masters

Thanks

This codebase was originally taken from the TodoMVC project starting here. Big thanks to them!

Latest Workshop

This repo has been used to teach in several different places (egghead, Frontend Masters, etc.). If you're coming here to follow along with that, then I recommend you follow the project setup for that (see below). The most recent and up-to-date version of the workshop is the Frontend Masters workshop. This is a linear workshop and starts with the FEM/00-original-project branch. See the slides.

Project Setup

This project assumes you have NodeJS v6 or greater installed. You should also have npm v3 or greater installed as well (this comes packaged with Node 6). You'll also need a recent version of git installed as well.

You may have come to this project from different varying sources. There are a different series of branches for each workshop/course I've done. To get started with the project, start with this:

1. Sign up for a GitHub Account (if you don't already have one)
2. Fork this repo
3. Clone your fork
4. In the directory you cloned the repository, run git fetch --all

If you need help with these steps, you might check out this free Egghead.io course which can help you get things going.

Finally, based on which version of the project you're looking for (workshop, egghead, or Frontend Masters) you'll run one of the following commands in the cloned directory:

• ES6 Workshop: npm run setup:workshop
• Egghead Course: npm run setup:egghead
• Frontend Masters Workshop: npm run setup:fem

If you get any failures at this point something is wrong and needs to be fixed. Remember, Google and StackOverflow are your friends.

You might find it helpful to see a list of the available branches. Run: git branch for that.

Notes

Because 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.

Running Webpack with webpack -p is not showing the warnings about the dead code elimination anymore. However, it is working as expected.

Updates

The ecosystem moves fast. So this section of the README will be dedicated to tracking changes in the ecosystem so you can follow the repo, but be aware of changes in the latest versions of the dependencies you'll be installing (or if there are better dependencies to use now).

• All courses
  • babel-preset-es2015-webpack is no longer necessary for leveraging tree shaking. You can now just use babel-preset-es2015 with a special configuration to indicate modules should not be transformed. More info
• Egghead Course
  • Using istanbul is no longer necessary for checking code coverage and can actually be accomplished using special configuration in karma.conf.js with the karma-coverage plugin like this.

Contributing

Super nice that you're interested in contributing. Unfortunately things are pretty complex with how things are set up with branches for each section of the workshop. So feel free to file pull requests to indicate what needs to be changed but if I decide to implement a change in the workshop code, I'll probably just have to manually make the updates. Thanks!

Windows 10 Setup Instructions

1. Fork and clone this repository
2. Download Git Bash
3. 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
4. In Git Bash: run cd es6-todomvc
5. Run npm run setup:fem (this will fail, but there is a workaround)
6. After that fails:

• In Git Bash run git stash
• run git checkout FEM/00-original-project --force
• Make sure http-server is installed globally: npm i -g http-server
• 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
• Open http://localhost:3084/ or change the URL to indicate the port number you wish to use
• In your package.json file, add -p 3084 to the end of your "start" script
• Add open http://localhost:3084/ && to the beginning of your start script (make sure there is a space between && and http-server
• now you can just run npm start and the app should load up at http://localhost:3084

LICENSE

MIT