1. 34
    Create a New Project by Cloning the Boilerplate Project
    8m 13s

Create a New Project by Cloning the Boilerplate Project

Andy Van Slaars
InstructorAndy Van Slaars

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 3 years ago

Having a boilerplate project on GitHub makes creating a new project as easy as cloning the project, making a few small adjustments and creating a new git repository for the clone. In this lesson, we’ll clean up the sample code we used to make sure everything was working along the way and then we’ll create a new project with all of the tooling and configuration in place by cloning the boilerplate.

Instructor: [00:00] I'd like to use this project as a starting point for new projects, so I don't have to worry about all this configuration. Let's strip this down to a simple hello world app, so we can use all the tooling, but avoid having too much code to clean up at the start of each new project.

[00:14] To start, I'm going to come down here. I'm going to get rid of this import for this warning component, because we're not going to need that anymore. Then I'm going to come over into my file explorer, and I'm just going to delete warning.js.

[00:30] With that gone, let's go down into our class. We're not going to need the state, or the increment and decrement methods anymore. We can come down here, and we can get rid of this destructuring of state, because we don't have anymore state.

[00:45] We'll leave the hello world h1, but we're going to remove this h2, our buttons, and our count output. We can save that, and then we can come over to styles.css. Most of the CSS is a reset, so I'd like to keep this included.

[01:03] If we scroll down to the bottom, we have this warning class that was used for demonstration purposes. We can get rid of this, and we can save that. Now, we can jump into our terminal, and let's commit this code.

[01:18] I'm going to git status, and we'll see that we've modified our app. We've deleted warning, and we've modified styles.css. I'm going to do a git add, and just add everything. Then I'm going to do a git commit -m, and we'll just say code cleanup.

[01:40] This is going to run all of our pre-commit tests. It'll run our tests and our linter. Everything passes. Now, we have our commit. I'm going to clear that, and then I'm going to do a git push to push this up to GitHub.

[01:59] With that done, I'm going to go to GitHub. I'm going to look at my repo, and you'll see here that I have my most recent commit. I want to create a new project based on this repository. I'm going to go to the clone or download link, and I'm going to grab this URL.

[02:17] Then back in my terminal, I'm going to navigate out of this project. I'm just going to go up a level into my projects directory. I'm going to do a git clone, and I'm going to pass in this flag called depth. I'm going to set that to equal one.

[02:32] That's just going to minimize the amount of git history that I have to clone with this repository. I'm going to paste in that URL that I copied from GitHub, and then I'm going to specify the folder that I want to put this in.

[02:45] I'm going to start a new project with this. This'll be myAwesomeNewApp. I'm going to run this, and this is going to clone that project repository into this new myAwesomeNewApp folder. With that done, I can cd into myAwesomeNewApp.

[03:08] If we do an ls, we'll see that it has all the things that this boilerplate project has, but now, it's been copied to a new directory. I want to open this up in Code. I'm just going to code . to open this in my editor.

[03:23] Now, I have this new copy of my repository opened up in Visual Studio Code. Now, if I come in here, and I do a git log, we're only going to see one entry. This is what happened when I added that depth equals one flag to my git clone.

[03:36] It's only going to pull down the most recent commit, so I don't have all 30 or so commits in this history. The reason I did that is because we're actually going to delete this repository's history from this copy of it, and we're going to initialize our own Git project here.

[03:51] I'm just going to hit Q to get out of the log. I'm going to run an ls on this directory, and I'm going to pass the -a flag to show everything. We'll see this .git repository that we don't see in our file list. This is hidden.

[04:04] This is where all of our Git information is stored. If I come in here, and I do a git remote -v, it'll show our original remote. All this information resides in that folder. We're going to remove that. We're going to do an rm rf .git.

[04:22] Now, we'll see that my prompt has changed, because I'm no longer in a Git repository. I can do a git status, and it'll tell me this is not a Git repository. I'm going to create a new Git repository in this directory just by running git init.

[04:41] Now, I have empty repository. We'll see that everything is new for this repository. If I do a git status, all of our files are untracked at this point. We can do a git add, and that'll add everything. If I do a git status one more time, now, these are all seen as new files.

[05:03] Then I can do a git commit -m, and we'll say initial commit. If I git status one more time, we'll see that our working tree is clean. I can git log, and now, I have a new entry for new repository, with my single initial commit.

[05:24] With this local repository in place, I'm going to create one on GitHub that I can push this up to. I'll go to GitHub, and I'm going to use the plus up here to create a new repository. I'm going to call this myAwesomeNewApp.

[05:46] I'm going to leave everything as-is and create the repository. I need this remote add origin with my URL in it, so I'm going to copy that. Run that back in my terminal, so that'll add the remote. I can verify that with git remote -v.

[06:07] Then I can push to master with git push -u origin master. Then I can reload my GitHub page, and verify that it shows up. There's all my starting code. Now, I can move the terminal out of the way, and I'm going to open up my package.json file.

[06:28] We'll see that this still has the old project name. I'm going to update that to myAwesomeNewProject. I'll save that. Then I'm going to scroll down, and we'll see that we have all this repository information. This is also left over from our original project.

[06:47] I'm going to take this repository field, and I'm going to delete that. I'm going to do the same thing for bugs and homepage, because all three of those are pointing to the GitHub page for my old project. I'll save this, and then I'm going to go into the terminal.

[07:01] I'm going to run npm init -y. We'll see that in the preview, we have updated fields for bugs, homepage, and repository that all use our new remote. If I close package.json, and open that again, we'll see the refreshed view of that, with our repository, bugs, and homepage appended to the end.

[07:24] With all of that updated, I'm going to close out the package.json and clear my terminal. I'm going to come into my readme, and this is the only thing left over that we don't want. We'll update this to myAwesomeNewApp.

[07:41] We can save that, and then down in my terminal, the last thing we have to do is run an npm i to install of our dev and runtime dependencies for this project. With that done, we should be able to run any of the commands that we configured in our original project.

[07:59] I can come in here, and I can do an npm run dev. That does a dev build, and loads up in the browser. Now, we have a working project. We can replace this hello world with our awesome new app.

Jexxie
Jexxie
~ 3 years ago

Awesome tutorials! One more question, could you show how to organize Github Repo of Branches and Releases, like the way your setup each commit for a branch?

Jake Wiesler
Jake Wiesler
~ 3 years ago

Great video series Andy! Just a bit of feedback for this video. It's not a huge deal because we're creating a boilerplate with the expectation that users of said boilerplate will npm install dependencies, but when removing the .git directory (rm -rf .git), it also removes all of the hooks installed by husky. To get the hooks back you'd have to re-install husky.

Andy Van Slaars
Andy Van Slaarsinstructor
~ 3 years ago

Great video series Andy! Just a bit of feedback for this video. It's not a huge deal because we're creating a boilerplate with the expectation that users of said boilerplate will npm install dependencies, but when removing the .git directory (rm -rf .git), it also removes all of the hooks installed by husky. To get the hooks back you'd have to re-install husky.

Thanks for the feedback @jake. In the last section of the video we do an npm i, which under normal conditions will run husky's post-install script that will put the hooks in place.

Andy Van Slaars
Andy Van Slaarsinstructor
~ 3 years ago

Awesome tutorials! One more question, could you show how to organize Github Repo of Branches and Releases, like the way your setup each commit for a branch?

@jexxie, The way I structure the repo like this for lessons is by making sure I have a commit for the end of each lesson. I tag the commits as I go and when I'm through everything, I create a branch from each tag like git checkout -b NEW_BRANCH_NAME SOURCE_TAG_NAME. You could also create branches as you go, creating a branch, committing as you go and creating the next branch when it makes sense.

You might also want to check out this egghead course on git

Ilham Wahabi
Ilham Wahabi
~ 3 years ago

Great course, many new things to learn. I'm waiting for another react lesson from you :)

Agustin Quintanilla
Agustin Quintanilla
~ 3 years ago

Awesome Andy! thank you for this great course. I'm sure I'll continue use CRA and other popular boilerplates for my daily work, but now I'm have a better perspective of what are behind the scenes

Janis
Janis
~ 3 years ago

Thanks for the tutorial series, Andy! Ok, so I consumed this cover to cover and redid everything in code to follow along... What's the next step? What should I do now to gain more skill? Thanks

Negin Basiri
Negin Basiri
~ 2 years ago

I see many security alerts on github, what to do for those? Also thanks for creating amazing content in this course

Andy Van Slaars
Andy Van Slaarsinstructor
~ 2 years ago

I see many security alerts on github, what to do for those? Also thanks for creating amazing content in this course

Typically library updates will resolve vulnerabilities if the libraries have been updated with fixes. You can use npm's audit capabilities to automate this - https://docs.npmjs.com/cli/audit.