Code Collaboration via GitHub

I’m refraining from beginning this post with a Vanilla Ice pun, so you can thank me now… and let’s jump into some basic collaboration concepts. In this article, we’ll walk through how multiple people can seamlessly work on the same code base. To keep it interesting, we’ll be adding a functioning contact form to our Stackbit site created in From Zero to Web App in Under 60 Seconds.

I’m going to keep this post short but, before we begin, you should make sure that you at least have a GitHub repository to work on and that it’s been cloned to your local machine. If you don’t have a repository at all click here. If it hasn’t been cloned to your computer for local development click here. Otherwise, read on reader!

Scenario
You and a friend are working on a GitHub repo together and you want to make a change. In my case, the friend is imaginary and the change is adding a contact form.

Before You Begin Development…
You need to ensure that you have the most up-to-date code on your local computer. If your friend has made changes, you want to make sure you don’t overwrite them when you begin making changes of your own. To get the code from the master (stable) branch run the following command:

git pull origin master

Next, you need to create a new branch which will act as a sandbox, separate from the master branch. This will ensure that you’re not directly effecting any of the stable code while you’re making your changes and updates. To do this run the following command:

git checkout -b [branch-name]

For the development of this feature, I’ve run git checkout -b feature/contact-form. In the picture below, you can see the current branch in the bottom left-hand corner of my VSCode window.

During Development…
We will be working locally. I’m going to create a new bare bones component ContactForm.js and plop it at the bottom of my Home screen. Here’s the code if you’re as lazy as I am:

import React from 'react';

const ContactForm = () => {
return (
    <form
      name="contact"
      method="POST"
      data-netlify="true"
      netlify-honeypot="bot-field"
    >
      <input type="hidden" name="bot-field" />
      <input type="hidden" name="form-name" value="contact" />
      <p>
        <label>
          Your Name: <input type="text" name="name" />
        </label>
      </p>
      <p>
      <label>
         Your Email: <input type="email" name="email" />
        </label>
      </p>
      <p>
        <label>
          Message: <textarea name="message"></textarea>
        </label>
      </p>
      <p>
        <button type="submit">Send</button>
      </p>
    </form>
  );
}
export default ContactForm;

It’s as simple as that. And the coolest part about this is: the

data-netlify=“true”

line will make it so that this form is automatically recognized by Netlify Forms and will accept the input without any additional effort on your part… but you’ll have to wait until the end for that!

I digress… with a little additional styling we now have our contact form!

Quick note: Adding this new feature was short and sweet and for demonstration purposes. Typically once you believe you have resolved the issue or created the new functionality appropriately, you should test it thoroughly and ensure that everything is working as expected. Make sure to test the entire “area” and not just the code that you worked on.

After Development Is Complete…
You need to commit the new/updated code and push it back to GitHub. I’m going to gloss over this since we covered it in the previous article… but it can typically be accomplished either through the VSCode Source Control panel to the left of the editor or by running the following commands in order:

git add.
git commit -m “[message describing changes made]”
git push origin [branch-name]

After Changes Have Been Pushed to GitHub Repo…
You can go to the repo on GitHub.com and you should see an alert showing your recently pushed branch. If you don’t, you should be able to find it under “branches.” Click on the “Compare & Pull Request Button”

Then, enter a comment describing what was accomplished in the changes you made to the code and click the “Create Pull Request” button.

On the right-hand side of the page, you can click on the gear next to “Reviewers” and assign a team member to review your work. This will send them a notification requesting that they review your updates and merge them into the master branch.

If your team members are imaginary like mine, you can wait for GitHub to check for merge conflicts and, if none exist, go ahead and confirm the merge into the master branch.

Now, the super fun bonus!
If you’ve been following along with the previous articles and creating your own Stackbit site using Netlify, it will automatically detect the new changes that have been merged into the master branch. This will redeploy the website and Netlify will now detect the new contact form we just added. If you go to your Netlify dashboard and click on forms, you should see one with the name specified in your form.

From here you can view responses by clicking on the name of your form within the “Active forms” card, or specify actions to take on form submission and more by click on the “Settings and usage” button. Let’s click on that now.

As you can see, it’s outrageously simple to add notifications… just scroll down, click the “Add notification” button then select the type of notification (Slack, Webhook, or Email), and specify the criteria.

Just like that you have a working contact form! And, on top of that, you can now collaborate on projects with ease.