DEV Community: Hiba E

Top 10 Git Commands I Use Daily

Hiba E — Mon, 31 Jan 2022 00:01:23 +0000

I've been using Git for a few years now but every now and then I still find myself Googling the commands that I need to use for different cases and scenarios. Below is a list of the top 10 commands I use every day without fail.

Git Checkout

Git repositories use branching strategies to create separate versions of a main repository. So to get started on making changes to your codebase you need to do one of two things:

Checkout an existing branch
Checkout a new branch

A Git branch is a separate version of the main Git repository (A master or main branch).

Whichever option you use you'll need to use the git checkout command.

To checkout a new branch you would need to run the below command:

git checkout -b my_branch_name

The above command creates a separate local version of the repository using the branch you were on when you ran the command.

To checkout to an existing branch all you need to do is remove the -b parameter:

git checkout branch_name

Git Status

Once you're all set and making changes to your solution, you can check the status of your code against your local copy by running the below command:

git status

This returns the status of files in your solution (files added, updated or deleted).

Git Add

Once you're happy with your changes you'll need to stage the files. This is a way of letting Git know which files you want to record (i.e. commit) changes to. By running the below command you're telling Git to record/stage all changes made in your current directory:

git add .

To stage certain files copy the relative path of the file and run the below command:

git add folder-name/file-name.file-extension

To stage all changes in all directories:

git add --all

Once you run the above command, your files will show as "staged" when running the git status command again 👇🏼

Git Diff

Once you've made changes, you can check the changes you've made so far for unstaged files using the below command:

git diff

To check file differences that are staged run the below command:

git diff -staged

The output of running the git diff command would be something like this

Git Reset

To unstage all files run the below command:

git reset

To unstage specific files files copy the relative path of the file and run the below command:

git reset folder-name/file-name.file-extension

To discard all your local changes that haven't been committed yet, you can run the below command that will undo all your changes permanently

git reset --hard

If you've made a mistake with your last commit to your local branch, not to worry it's easily fixable.

If you've not pushed your changes to your remote branch, you can just run the below command:

git reset --soft HEAD~1

The above command will remove the last commit from the current branch and move the changes to your pending changes so you'll be able to commit/amend them again as needed.

If you don't want the changes to show as pending on your local branch either you can run the below command:

git reset --hard HEAD~1

warning: by running this command you will lose all uncommitted changes and all untracked files in addition to the changes introduced in the last commit

Git Commit

Now that you're done with all your changes and ready to commit the files to your local machine, you can run the following command with a relevant commit message:

git commit -m "This is the commit message"

The above command will commit your changes to your local Git repository so you will no longer see pending changes when running Git status. Add your commit message after the -m parameter. It's good practice to write concise, unambiguous and informative commit messages. An example of a good commit message is: "Add component for wishlist button in the website header"

Looking back at this commit, we'll have no issues understanding what this commit does.

Note: Running git commit without the -m parameter would open up your default text editor to write a commit message.

Using git commit with the amend parameter you can also rewrite the last commit you made. The amend parameter allows you to:

1- Update/rewrite the changes in the last commit. So any newly staged changes will be combined with the changes in the last commit to your branch. To add changes to the last commit without updating the commit message run the following:

git commit --amend --no-edit

2- Update/rewrite the changes in the last commit and to update the commit message:

git commit --amend -m "This is my updated commit message"

3- Rewrite the commit message of your last commit. To do this run same command as number 2 (make sure you don't have any files staged if you don't want to commit them)👆🏼

git commit --amend -m "This is my updated commit message"

This is particularly useful in the case of premature commits, if you miss a file from a commit or if your commit message isn't quite right. A new commit would then be created replacing the old commit.

Note: this should only be done on local commits that haven't been pushed to the remote branch unless you're completely confident no one is using the same branch. This is to avoid issues that will arise if other developers are using the same branch and have based their work on a commit that is amended after your changes.

Git Push

After running the Git commit command, your changes are now in your local repository. Once you're 100% happy with your changes and want to push them to the remote Git repository you need to run the below command:

git push

If your branch does not have an associated remote branch, you'll get the following prompt:

To resolve this, you would need to run the below command:

    git push --set-upstream origin test-branch

or the shorter version might be easier to remember 😅

    git push origin test-branch

All your previously pending changes would now be available on the remote Git repository. You'll now be able to see your changes showing in the Git repository on the server and not just on your machine! 🎉

Git Pull

Git pull downloads changes from the remote branch on the server and merges those changes into the local branch you have checked out. This would only work if the branch you have checked out is tracking an upstream remote branch.

By running the git pull command, the remote tracking branches for all other branches will also be updated.

The way this is done is by running the git fetch then git merge commands in the background.

git pull

Git Revert

If you've made a mistake with your last commit and you have pushed your changes to the remote branch, You'll need to use git revert and specify the commit hash you want to revert. You can get the commit hash by running git log

git log --oneline

Once you have the commit hash, you can revert your commit by running:

git revert commit_hash

Comparison between Git reset and Git revert

git reset discards the commit on your local branch so you'll no longer see you in your list of commits, while git revert creates another commit to revert the changes made in the commit you need reverting.

Git Log

If you want to see a list of previous commits you can check the Git log ! Just run the below command:

git log

If all you want is a list of commits with the commit hash and message only you can run the below command:

git log --oneline

Once you've found a commit in the log that you want to find out more about, copy the commit hash from the previous command and run the following command git show commit_hash. This will show you all the changes made as part of that commit. To can exit the commit window just press :wq and enter

Git Merge

Let's say you need to merge from the main branch to your new branch, to make sure you have the latest changes, you can do that by following the steps below:

Switch to the main branch/version of your Git repository

git checkout main

Pull from remote main branch. Your local branch will be updated with the all the changes from the remote main branch

git pull

Switch to your branch

git checkout my_branch

Merge from the main branch to your branch. The following command will copy over the code from the main branch and merge it with the code in your branch.

git merge main

You may see conflicts resulting from this which would need to be resolved. The most direct way to resolve a merge conflict is to edit the conflicted file.

Bonus ⭐️

Deleting a branch

This is one that I always seem to forget and always end up Googling so I thought I would add it here 😁

Once you're done with a branch, to delete branch on your local machine all you need to do is run the below command:

git branch -d branch_name

If you have a remote version of your branch on origin, you can run the below command to delete it too:

git push origin --delete branch_name

So these are my top 11 most-used Git commands that I come across daily. There's a lot more to Git than the commands listed above and I hope to be able to explain a few more Git commands in future articles.

Thank you for reading. I hope you found this useful 😃 Let me know what other Git commands you use on a daily basis. If you have any comments, questions or feedback, please feel free to leave a comment below or reach out to me on Twitter

Creating and Deploying React App with .NET Core 3.1 on DigitalOcean

Hiba E — Wed, 10 Mar 2021 17:35:12 +0000

A few weeks ago I decided to build a personal website. I did some research and finally decided on using React for the frontend and .NET Core for the backend.

In this tutorial, I'll go through all the steps needed to create and deploy a brand new react app with .NET Core 3.1 from a new repository on Github to DigitalOcean.

This assumes that you have .NET Core 3.1 installed on your machine.

Creating and Running React App

Run the following command to create your react app.

This will also create the directory

dotnet new react -o my-react-app

This command uses the "ASP.NET Core with React.js" template installed with .NET core. After running the command, your new directory should contain something like this

Click on the .csproj file and open it using your favourite IDE.
Looking at the project, you will notice that you have a "ClientApp" folder. This folder contains all the files needed for the "React" part of the app.
Build the project. Building the project restores the npm dependencies on the first run.
Run the app as normal by right-clicking on the project and selecting "run". This should open a new page that looks something like this.

Deploying React App

Now that we have the app running we'll prepare the app to be deployed. To do this we're going to:

Create a Github account and a new repository and add the project we created to the repository.
Add a DockerFile to the root of the repository

Creating Github Account

We'll start by creating a new account on Github. You can skip this step if you already have one. Navigate to Github and click on "Sign Up" at the top of the page. The page you'll see is 👇🏼

After filling in your details you'll get taken to a page where you can select your experience, what kind of work you do and what you're interested in. Finally, you'll be sent an email to verify your email address and voilà!

Creating Github Repository

Now that the Github account is all set up, we'll create our new repository.

We'll clone our repository by clicking on "Code" 👇🏼
Copy the HTTPS URL, open the terminal on your computer and run the following:

Replace {https-url} with your HTTPS URL

git clone {https-url}

If you have just created a new Github account you will be asked to authenticate yourself and enter your username and password.

Adding Project to Github Repository

Once we've got our new repository cloned copy the folder containing your new project("my-react-app") and paste/move it to your repository folder("my-react-app").

Run the commands below to commit and push your changes.

git add .
git commit -m "Add new react project"
git push

You should now be able to see your changes in your Github repository.

Adding Dockerfile to Github Repository

The final step to prepare your project to be deployed to DigitalOcean is to add a Dockerfile to the root of your repository.

Dockerfile

FROM mcr.microsoft.com/dotnet/core/aspnet:3.1-buster-slim AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
RUN curl -sL https://deb.nodesource.com/setup_10.x |  bash -
RUN apt-get install -y nodejs

FROM mcr.microsoft.com/dotnet/core/sdk:3.1-buster AS build
RUN curl -sL https://deb.nodesource.com/setup_10.x |  bash -
RUN apt-get install -y nodejs

WORKDIR /src
COPY ["my-react-app/my-react-app.csproj", ""]
RUN dotnet restore "my-react-app.csproj"

COPY . .
WORKDIR "/src/"
RUN dotnet build "my-react-app/my-react-app.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "my-react-app/my-react-app.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "my-react-app.dll"]

If you have Docker installed on your machine and want to test the dockerfile, navigate to the root of your repository and run the following commands
docker build -t my-react-app . docker run -p 80:80 my-react-app

Run the commands below to commit and push your changes.

git add .
git commit -m "Add Dockerfile"
git push

Now your repository is all set and we can move on to create an account with our hosting provider(DigitalOcean).

You can find the code on my Github account here 👇🏼

eldursi / my-react-app

Creating DigitalOcean Account

At the time of writing 9th of March 2021, DigitalOcean offer $100, 60-day credit when you create a new account with them using a referral link. I've already created an account with them so this is my Referral Link

You will need to add your billing information but you won't be charged until the end of the 2 months.

So after you've created your account, you'll be asked to create a new project. Add in the project name but skip the "Move Resources" step.

Once that's done you'll be shown to the default account page.

DigitalOcean offers some really great services but the one that we'll be using here is a new one which is the App Management feature.

Once you've clicked on "Apps", you'll see this screen.

Select "Launch Your App" and you'll be taken to a screen to select where source code will be coming from

Our source is on Github so we'll select that. Then you'll be taken to a screen where you can login to your Github account. You may need to modify the access permissions on your repository to allow DigitalOcean access

Now that your DigitalOcean account has access to your repo you will be able to select it. A great thing that DigitalOcean allows you to do is to publish from a certain branch whenever you push into it. Master will be selected as default.

When you click on "Next" DigitalOcean will go looking for your Dockerfile. If it all goes well, you should see this page

Moving on, I will keep the selected region and the app name as they are

We finally get to the final step and launch

If everything is going well you'll get transferred to this page where you'll be able to monitor your deployment.

Until it succeeds 🥳

On first deploy, you might get this error (Error code: DeployContainerHealthChecksFailed)

If that happens, navigate to "Components" and make sure that the exposed HTTP port is set to 80

As DigitalOcean isn’t a domain registrar, you can’t purchase a domain from them. If you have an existing domain you can transfer it over to DigitalOcean to manage. DigitalOcean have a great article on how to do that here

You can find the full source code on my Github account:

eldursi / my-react-app

Creating a Contact Form with Validation with React and Material UI

Hiba E — Tue, 09 Mar 2021 19:59:59 +0000

In this article I'll be going through how we can build our own simple contact form component with validation in React, Typescript and Material UI. Scroll down to the end of the page to see the CodeSandbox url for this.

Form Skeleton 💀

First, we'll create the react component, let's call it ContactForm

const ContactForm = () => {}

Then we'll add an empty form element

export const ContactForm = () => 
{
  return (
    <form>
    </form>
  )
}

This form will do nothing at the moment and won't display anything on the page. So we'll start adding the form elements using Material UI components. This will build up the basic skeleton of the contact form. The elements we're adding are:

Three text fields for the user to input their name, email and message.
One button used to submit the form.

export const ContactForm = () => 
{
  return (
    <form>
      <TextField label="Full Name" />
      <TextField label="Email"/>
      <TextField label="Message"/>
      <Button type="submit">Submit</Button>
    </form>
  )
}

The form now should look like this:

We'll make some adjustments to make the form look nicer so we'll add fullWidth to the TextField components and add multiline and rows={5} to the message text field:
If fullWidth is set, the input will take up the full width of its container.

export const ContactForm = () => 
{
  return (
    <form>
      <TextField label="Full Name" fullWidth autocomplete="none"/>
      <TextField label="Email" fullWidth autocomplete="none"/>
      <TextField label="Message" fullWidth multiline rows={5} autocomplete="none"/>
      <Button type="submit">Submit</Button>
    </form>
  )
}

Form Validation ✅

Now that our form is looking a bit better we'll start looking at the validation side of things.
Let's create a new function in a separate file to handle our validation and we'll add and expose the functions that we need to validate the form's input values.


const initialFormValues = {
  fullName: "",
  email: "",
  message:"",
  formSubmitted: false,
  success: false
}

export const useFormControls = () => {
  // We'll update "values" as the form updates
  const [values, setValues] = useState(initialFormValues);
  // "errors" is used to check the form for errors
  const [errors, setErrors] = useState({} as any);
  const validate: any = (fieldValues = values) => {
    // this function will check if the form values are valid
  }
  const handleInputValue: any = (fieldValues = values) => {
    // this function will be triggered by the text field's onBlur and onChange events
  }
  const handleFormSubmit = async (e: any) => {
    // this function will be triggered by the submit event
  }
  const formIsValid: any = () => {
    // this function will check if the form values and return a boolean value
  }
 return {
    handleInputValue,
    handleFormSubmit,
    formIsValid,
    errors
  };
}

Now we have the functions in place we'll set up the event handling. We'll also need to get access to the functions in the useFormControls component so we'll create an object that will contain the initial form values

export const ContactForm = () => {
  const {
    handleInputValue,
    handleFormSubmit,
    formIsValid,
    errors
  } = useFormControls();
  return (
    <form onSubmit={handleFormSubmit}>  
      <TextField name="fullName" onBlur={handleInputValue} onChange={handleInputValue} label="Full Name" fullWidth autoComplete="none" {...(errors["fullName"] && { error: true, helperText: errors["fullName"] })}/>   
      <TextField name="email" onBlur={handleInputValue} onChange={handleInputValue} label="Email" fullWidth autoComplete="none" {...(errors["email"] && { error: true, helperText: errors["email"]  })}/>   
      <TextField name="message" onBlur={handleInputValue} onChange={handleInputValue} label="Message" fullWidth multiline rows={5} autoComplete="none" {...(errors["message"] && { error: true, helperText: errors["message"] })}/> 
      <Button type="submit" disabled={!formIsValid()}>Submit</Button>   
    </form> 
  )
}

Our input fields have shared properties and values so to make the code DRY, we'll create an array with our text fields' properties' values and add it to the top of the file and loop through it:

const inputFieldValues = [
  {
    name: "fullName",
    label: "Full Name",
    id: "my-name"
  },
  {
    name: "email",
    label: "Email",
    id: "my-email"
  },
  {
    name: "message",
    label: "Message",
    id: "my-message",
    multiline: true,
    rows: 10
  }
];
export const ContactForm = () => {
  const {
    handleInputValue,
    handleFormSubmit,
    formIsValid,
    errors
  } = useFormControls();
  return (
    <form onSubmit={handleFormSubmit}>
      {inputFieldValues.map((inputFieldValue, index) => {
        return (
          <TextField
            key={index}
            onBlur={handleInputValue}
        onChange={handleInputValue}
            name={inputFieldValue.name}
            label={inputFieldValue.label}
            multiline={inputFieldValue.multiline ?? false}
            rows={inputFieldValue.rows ?? 1}
        autoComplete="none"
        {...(errors[inputFieldValue.name] && { error: true, helperText: errors[inputFieldValue.name] })}

          />
        );
      })}
      <Button
        type="submit"
        disabled={!formIsValid()}
      >
        Send Message
      </Button>
    </form>
  )
}

That's all set up then .. Now we just need to start filling in the values in the useFormControls component.

We'll start with the onBlur and onChange events. We need this to show an error message if the user clicks in the input box and clicks out without typing anything. The onChange event will be triggered when the value in the text field is changed and this will trigger the same function handleInputValue

const handleInputValue = (e: any) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value
    });
    validate({ [name]: value });
  };

This 👆🏼 will update the state variable values for a specific element (e.g. When the "email" text field is updated where the name is "email", the value of "email is updated).

This function will call the validate function which validates the value of the text field that was changed and sets the appropriate error message. A regex will be used to validate against the email value to ensure the correct format hhas been entered. The state variable errors gets updated with the relevent message

const validate: any = (fieldValues = values) => {
    let temp: any = { ...errors }

    if ("fullName" in fieldValues)
      temp.fullName = fieldValues.fullName ? "" : "This field is required."

    if ("email" in fieldValues) {
      temp.email = fieldValues.email ? "" : "This field is required."
      if (fieldValues.email)
        temp.email = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(fieldValues.email)
          ? ""
          : "Email is not valid."
    }

    if ("message" in fieldValues)
      temp.message =
        fieldValues.message ? "" : "This field is required."

    setErrors({
      ...temp
    });
  }

Next we update the formIsValid function

The errors state variable would have been updated in the validate function.
We check if the properties are set, to cover the first time the contact form loads when the errors state variable is empty.

 const formIsValid = (fieldValues = values) => {
    const isValid =
      fieldValues.fullName &&
      fieldValues.email &&
      fieldValues.message &&
      Object.values(errors).every((x) => x === "");

    return isValid;
  };

And last but not least we have the function that actually submits the form to be sent. The functionality to send the contact form by email postContactForm isn't covered as part of this tutorial but I will be covering it in a later tutorial.

const handleFormSubmit = async (e: any) => {
    e.preventDefault();
    if (formIsValid()) {
      await postContactForm(values);
      alert("You've posted your form!")
    }
  };

At the end of this, you will have a functioning contact form (minus the sending email part 😊).

I hope this helps. You can find the full working code here:

In a later post, I will be going through sending an email to a .NET Core backend and displaying a message on the screen.