Check out a free preview of the full Creating an Open Source JavaScript Library on Github course

The "Forking & Renaming" Lesson is part of the full, Creating an Open Source JavaScript Library on Github course featured in this preview video. Here's what you'd learn in this lesson:

For the remainder of the workshop, Kent will be working from a forked version of the Star Wars Names library. After forking the library, he gives it a new name. Because the name is now different, Kent has to spend a few minutes updating all the places “star-wars-names” was used throughout the source code.


Transcript from the "Forking & Renaming" Lesson

>> [MUSIC]

>> Kent C. Dodds: This is where things are gonna get a little interesting. So we'll go ahead and check out the browser build, and this will be the last time you can check out a branch because it is time to fork. So this may not work for everybody. I hope that it does, cuz if it does, it's gonna be awesome.

But hopefully this works. I'm wondering if maybe what we'll do is, we'll kinda go through this together and hopefully get somewhere. Then we'll take like a 15 minute break for people, if it's not quite working yet for you or something, and I can help out in the chat.

And I can be available here and yeah hopefully we can all get this up and going together before we continue. So what we're gonna do is remember, my goal here is for you to publish your own version of this library. And I want to show you how to automate the release process as well.

Automating the release process is really, really awesome. And so the first thing that we're gonna do though, is you're all gonna fork the repository. And then you're gonna set up Travis. Which is a continuous integration service. To run the tests and the linting and everything on every single time we build.

And hopefully by the end of this excercise, we'll have things all built and running. But we don't want to all publish the exact same module, because that would be kind of sad, you want to do something good for the world. And so before you actually push this up and before we go through and release things.

You're going to update the package.json to be only your information. And you'll also update the starwars-names.json to be some other name's JSON. Like whatever you want it to be. You can fill it with whatever characters. Or whatever movie or your family's names or whatever you want to publish to the repository.

And you'll change starwars-names names to startrek-names. Don't use that somebody already took it, but be something else entirely. And then you'll push that to your own fork of the, repo and you can change the name of the repo if you want to, and it will be your library.

So I have a script that I have in the slides here that you can copy and paste in an IMDB page for a movie. So like Harry Potter, I'm pretty sure harrypotter-names isn't taken. And you just stick this in your console and it will copy the names of the characters from the Harry Potter movie.

Or you could go find another movie. Hopefully it works. If it doesn't work you might just have to code in a couple names yourself and then you can add more names later. But yeah, so that's what we're gonna do for the next like half hour or so, is getting you all forked, and having your stuff all set up and ready to go for Travis.

Is this gonna be awesome? Okay so for the first little bit you can kinda, you can follow along with me. And then we'll just stop and i'll help you with specific issues that you're having. So yeah, let's do this. I'm just gonna click this link to get to the repo really quick, and we'll click on Fork I'm gonna fork it to JavaScript error, why not?

Cuz I already have a fork at this. Yeah, so now, yeah, that was actually really fast. You just create your own fork, and then once everybody has their fork you should be able to clone or download right to here, you click on that. And you'll get your very own link.

It should basically be the same as the original one, except it'll have your username in there. And actually before you do that, why don't you decide what you're gonna call this repo? You'll go to your settings and change it to something else. Mine's gonna be,
>> Kent C. Dodds: I don't know, this is the hardest part in programming.

How do I name something? How about, github-names? Yeah, this will be the names of my GitHub repositories or something, I don't know. Okay, so then you'll hit Clone or download. Copy that URL to your clipboard. And come over to your repo, and I'm actually going to rename my directory.

So I'll pop up one directory and move starwars-names over to github-names. And now everything's kind of borked, so I'm gonna have to restart my editor.
>> Kent C. Dodds: Okay.
>> Kent C. Dodds: And with this, we now need to update what repository this GitHub repo or this git repo is pointing to. So it is ls-remote.

>> Kent C. Dodds: I don't know git very well, but here, if you say git ls-remote, I think there's probably a better command for this. But it'll show you that your git repo is still pointing to kentcdodds/starwars-names, unless you already forked it, then in which case, it might be pointed to yours already.

But we don't want it to do that, we want it to point to our fork, and so we're going to say git remote set-url origin. So that's the default name of a remote is origin, and then you'll paste in your remote's URL. So we're changing the origin remote url.

>> Kent C. Dodds: Okay, so that's step one of this important step, or step couple. You fork it, you change the name to whatever you're gonna be creating and publishing to NPM today. And then I changed the name of my directory just to make it a little bit more clear. And then you update your remote origin URL.

And because you've forked it, everything should be exactly the same as it was before. So you have all the same branches, everything. You should still be able to continue to check out next branches and stuff. So yeah, actually when I said you can't check out the next branch, that was not entirely true, you can.

From here, though, we're going to go ahead and update a couple more things to make it ours. To make it your very own. So let me just really quickly find all places where we used starwars-names.
>> Kent C. Dodds: So there are a couple places where you could update starwars-names to github-names in your package.json.

>> Kent C. Dodds: Find all the places that use starwars-names and change that to whatever you called it, github-names. And all places that use kentcdodds as well. Change that to your username.
>> Kent C. Dodds: Except for eslint-config-kentcdodds, you don't wanna change that.
>> Kent C. Dodds: So I'll put that one back.
>> Speaker 2: So you actually released that yes?

>> Kent C. Dodds: It's not, yeah Star Wars names does exist, it already has been released, but this hasn't yet been released now.
>> Speaker 2: I mean that dependency that you just changed. The kentcdodds one.
>> Kent C. Dodds: Yeah, yeah. The eslint-
>> Speaker 2: [CROSSTALK] meant to be released.
>> Kent C. Dodds: Yep, that exists.
>> Speaker 2: Okay.

>> Kent C. Dodds: Yep.
>> Kent C. Dodds: And let's see, where else do we have starwars-names? We need to switch it in the readme, so you'd update. We don't have any docs yet, so you don't have too much to update in here. But we'll do github-names. For all your random. Ooh, I know what I'll do, I'll do people that I follow on GitHub.

All your random GitHub, yeah, we'll just say character names, these are GitHub characters.
>> Kent C. Dodds: Okay, and then in our test, we're calling it starWarsNames.
>> Kent C. Dodds: So gitHubNames.
>> Kent C. Dodds: And in our index, we are requiring starwars-names. We're gonna call it github-names, whoops. And we'll rename the file to github-names.

>> Kent C. Dodds: Pretty sure that is everything.
>> Kent C. Dodds: Yeah, and then of course as well you will want to. Yeah, sorry. Couple more places in your source here. This is starWarsNames. So this will be gitHubNames, and where was that other? Yeah, and then in your webpack.config, the library target, or the library name, is still starWarsNames, you want that to be gitHubNames.

And with that, you should be able to build it, and everything else should still work. It'll just be whatever you called it, and then you just need to update your names thing here, which I'm not gonna have you watch me do. I'm just gonna say kentcdodds and sindresorhus.

So we'll just have two for now.
>> Kent C. Dodds: And like I said, I am mostly just kind of showing you, then you'll get a chance to do this during the break. Let me make sure that we're not missing anything else that you'll want to do. I'm thinking that we'll save the Travis.yml stuff until after the break.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now