Note: This course was created by Frontend Masters. It was originally released on 08/09/2016. We're pleased to host this training in our library.
- Creating an open-source library
- Linting and testing
- Code coverage
- Installing and configuring Babel
- Peer dependencies
- Forking and renaming
- Continuous integration and automating releases
Skill Level Intermediate
(dramatic electronic music) - We're going to build a library from scratch.
It's going to be a really small library. We'll write and run tests. We'll transpile it. We'll add continuous integration. We'll add a browser build. And then we'll publish a real project. So each one of you will have an npm module registered on the npm registry, hopefully. If all works out for that part. And it will be unique, it's not just going to be like a clone of, like, we'll have a hundred clones of the same thing.
It'll be unique and useful. And then I'll Actually, I have a talk about managing an open source project, and that's how we'll wrap things up. That's not exactly a workshop-y thing, it's more of like something you think about and stuff. So I'll kind of give that talk at the end. One thing we're not going to do is I'm not going to focus on building the library. We have so many different purposes for the different libraries that we're building, and so that's pretty hard to teach in a generic way.
I'll talk a little bit in that talk about managing an open source library, I'll talk a little bit about how to make it extensible and stuff like that, but for the most part, the library's going to be very small, and we'll kind of skip over that stuff as we need to. And mostly we're going to be building the tooling around the library to make your life as an open source author easier. So requirements for the workshop. Hopefully, you all have this set up already.
But you need git, node, npm. And then also a travis-ci.org account, so if you don't have that set up, go ahead and set that up. It's pretty quick. Just connect it with GitHub. And a codecov.io account. Connect that with GitHub as well. These are things that we're going to be using to automate our part of our project. So I'll leave that up for a second. So it's travis-ci.org, and codecov.io Actually, you know what, I should just like copy this into the chat.
That is what I will do. Oops. Here we go. Okay, so let's go ahead and jump in. So these are the commands that you should have run, hopefully, beforehand. I will paste those into the chat again as well. There was a mistake in the instructions that was sent out.
It's my bad; copy/paste error. But you shouldn't be running any server going to localhost:8080. That's not necessary for this workshop. And when it's all said and done, you should have a project that looks like this. You'll have a .git directory, a node_modules directory, and a .gitattributes file. That's like, it's totally empty. The reason that I that you have a node_modules directory, I'll just kind of explain this really quick, is this npm run setup:fem, for front end masters, what that is doing is it checks out the very last branch of our workshop.
At every step is a branch, and it runs npm install to install all the dependencies that we're eventually going to have in the project, and then it checks out the very first branch, so the one that like has nothing. But also deletes a couple of directories that are artifacts of running some validation and stuff. And so the reason that we do that is so that throughout the workshop, you don't have to be constantly running npm install, especially if you're on a bad Internet connection, that can be a problem. And so by installing everything up front, you can just skip over that bit.
So that's why you have this node_modules directory. It's not gitignored. We don't have a gitignore in here right now. We'll actually add that a little bit later. So yeah, don't commit that. Yeah. Never commit your node_modules directory. Almost never.