The starter template you need - part 2

In case you missed, you can read other parts here:

• Part 1
• Part 2, this post
• Part 3

Part 1 Completed - What have we achieved so far ??

So far, we have created our own template, which includes:

• SASS to manage our CSS better
• use JS Features like import/export that let us split code in multiple files.

The next goal is to save our template in a safe place, from where we can download it when we need to bootstrap a new project.

Let's go !

2.0 Git and GitHub

Before uploading our code, we must understand Git & GitHub.

Git
Consider this scenario:

Let's say that today you create a new project, like we did in part 1, and consider that version of the project version 1 (v1).
Tomorrow you edit some files , so that become version 2 (v2).

In two days from today, you realize that v1 is better than v2 and you want to go back, but you forgot which changes you made.

This is the problem Git resolves.

Git is a version control system (VCS), put simply it's a Time Machine of a directory of files.

Do you remember when we typed git init in the terminal ?
That commands means "Initialize current directory as a Git repository and start to track changes on files".

After that command we created all files of our project, so to speak we created our version 1.

But Git doesn't "auto-save" versions of your directory, you must decide when do a "save".

Every time you want to save a "screenshot" of your directory/repo you make a commit, and attach a descriptive name to the commit.
In the future you can go back in time.

GitHub

GitHub is a cloud for code, that was created with Git workflow in mind.

Basically you store your project inside a Git repository hosted on Github.
This repo is considered a remote repo.

When you need the project code you "download" it from remote repo into a directory in your computer. This process is knowns as git clone, and the cloned directory inside your computer is considered a local repo.

After that you make your changes to the code, save a "screenshot" of that code, and "upload" back to the remote repo.
These processes are known as git commit and git push.

In all this workflow Github act as the storage of the files.

Git & Github do a lot more, but for this guide this is all you need to know.

2.1 Create a GitHub Repo

Going back to our project, we want to "save" a screenshot of our files, and "push" the code into GitHub.

To do that, you need an account on GitHub , so ensure you have one before going on.

If you never done it you must set your Git user name and email address.
To do that type these 2 commands in terminal, with your Name and you Email:

git config --global user.name "John Doe"

git config --global user.email [e-mail]

Ok, let's copy our local repo, from our local computer, to a remote repo, on GitHub.
Watch the process on YouTube
While you're doing steps showed in video , the terminal can ask you to login to GitHub, it's ok, do it.
If you get errors or cannot proced write in the comments of this post.

After all the step of the video, our GitHub repository contains all the code of our template.

2.2 Simulate a New Project

With our template in place, let's try to use it.

Open your repository page, on GitHub.
Click on the green 'Code' button, then clink on 'copy' button to copy the remote repo url.

Open terminal and navigate inside your Desktop.
Run this command, pasting the repo url previously copied at <repo_url> place.

git clone <repo_url> simulated-new-project

Example of command :

Now you should have a new directory in your Destkop, named simulated-new-project, that is a clone of your GitHub repo my-starter.

This last command is all you have to do everytime your start a new project.

Now we need only to install all project dependencies and we can code.

So run in terminal these command:

cd simulated-new-project

npm install

npm run start

If all it's allright your browser is open on http://localhost:1234 with your page.

Part 2 Completed - What we get so far ??

So far, we have "saved" our project starter in our GitHub space.

The next goal is to see this project/template published over the Web.
In order to achieve that, we'll use a feature of Github called GitHub Pages,and we'll do it in part 3.

Part 3 will be available on 5 Dec 2021.

If you found this blogpost interesting, if something is not clear or you get some error, let me know in the comments.

Extra

Further reading

• Watch TraversyMedia Crash Course on Git & Github if you want to understand better Git, GitHub , and their relationship.