Deployment and Version Control with Git JavaScript

What You’ll Learn 📚

• Understanding version control and why it’s essential
• Basic Git commands and workflows
• Deploying JavaScript applications
• Troubleshooting common issues

Introduction to Version Control and Git

Version control is like a time machine for your code. It allows you to track changes, collaborate with others, and revert to previous versions if something goes wrong. Git is one of the most popular version control systems, and it’s widely used in the industry.

Think of Git as a save point in a video game. If you make a mistake, you can always go back to a previous save!

Key Terminology

• Repository (Repo): A storage space where your project lives. It can be local (on your computer) or remote (on a server like GitHub).
• Commit: A snapshot of your project at a specific point in time.
• Branch: A separate line of development. Think of it as a parallel universe for your code.
• Merge: Combining changes from different branches.

Getting Started with Git

Setting Up Git

First, you’ll need to install Git on your computer. Follow these steps:

1. Download Git from the official website.
2. Follow the installation instructions for your operating system.
3. Open a terminal or command prompt and type git --version to verify the installation.

git --version

Creating Your First Repository

Let’s create a simple JavaScript project and track it with Git.

1. Create a new directory for your project:

mkdir my-javascript-app

2. Navigate into the directory:

cd my-javascript-app

3. Initialize a new Git repository:

git init

Making Your First Commit

Create a simple JavaScript file:

console.log('Hello, Git!');

1. Add the file to the staging area:

git add .

2. Commit the file:

git commit -m 'Initial commit'

The -m flag is used to add a commit message. It’s a good practice to write clear and descriptive messages.

Branching and Merging

Branches allow you to work on different features or fixes without affecting the main codebase.

Creating a Branch

git branch feature-branch

Switch to the new branch:

git checkout feature-branch

Merging Branches

Once you’re done with your feature, you can merge it back into the main branch.

git checkout main

git merge feature-branch

Deploying JavaScript Applications

Deployment is the process of making your application available to users. Let’s deploy a simple JavaScript app using GitHub Pages.

Deploying with GitHub Pages

1. Create a new repository on GitHub.
2. Push your local repository to GitHub:

git remote add origin https://github.com/yourusername/my-javascript-app.git

git push -u origin main

3. Go to the repository settings on GitHub and enable GitHub Pages.

GitHub Pages is a free service that hosts static websites directly from a GitHub repository.

Troubleshooting Common Issues

Common Git Mistakes

• Forgot to stage changes: Use git add to stage files before committing.
• Merge conflicts: Occur when changes in different branches conflict. Resolve them manually in the affected files.

Common Deployment Issues

• Page not updating: Clear your browser cache or force a refresh.
• 404 error on GitHub Pages: Ensure your repository is public and the correct branch is selected for GitHub Pages.

Practice Exercises

• Create a new branch and make some changes. Try merging it back into the main branch.
• Deploy a simple HTML page using GitHub Pages.

Frequently Asked Questions

1. What is the difference between Git and GitHub?
2. How do I undo a commit?
3. What is a pull request?
4. How do I resolve merge conflicts?
5. Can I use Git without GitHub?

Answers

1. Git is a version control system, while GitHub is a platform for hosting Git repositories.

2. Use git reset to undo a commit. Be careful, as this can be destructive!

3. A pull request is a way to propose changes to a repository. It’s commonly used in collaborative projects.

4. Merge conflicts can be resolved by manually editing the conflicting files and committing the changes.

5. Yes, Git can be used locally without any online service.

Congratulations on completing this tutorial! 🎉 Keep practicing, and soon you’ll be a Git and deployment pro!