DEV Community: GLD5000

Add stripe to a Next 13.4 App

GLD5000 — Tue, 15 Aug 2023 17:41:09 +0000

This is a guide to make a Next.js project with Stripe Payment GateWay

TLDR: grab the template here

Also including:

TypeScript for type safety
Tailwind CSS for styling
Jest for testing
ESLint for linting
Prettier for formatting
Husky & Lint-Staged for pre-commit testing and linting

If you like this, checkout my other projects on GitHub or via my Portfolio

Setup Stripe with Next 13.4

To set up or better understand the project you can read on!

Installation

Start with a clean Next.js install or my GLD-NextTemplate
If starting with the GLD-NextTemplate, run npm i to set up dependencies etc.
Run npm i stripe axios to install stripe and axios (You can also just use the native Fetch API if you like).

Setup Account on Stripe

Go to Stripe and setup an account with your email address (You do not need a credit card or anything as you can just stay in 'test mode').
Copy your secret key from the 'Developers' Tab and put it into a '.env' file in your repos root directory.
Add some products using the 'Products' tab (we will use the API to fetch these for our page).

Create API route handlers

You will need two handlers:

To fetch products from your Stripe account
To enable checkout for a desired product

api/getproducts/route.ts:

import Stripe from 'stripe';
import { NextResponse } from 'next/server';

/* eslint-disable import/prefer-default-export */

export async function GET() {
    if (process.env.STRIPE_SECRET_KEY) {
        const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
            apiVersion: '2022-11-15',
        });
        const products = await stripe.products.list({
            limit: 4,
            expand: ['data.default_price'],
        });
        // console.log('products:', products)
        return NextResponse.json(products.data);
    }
}

api/checkout/route.ts:

import Stripe from 'stripe';
import { NextResponse, NextRequest } from 'next/server';

/* eslint-disable import/prefer-default-export */

export async function POST(request: NextRequest) {
    if (process.env.STRIPE_SECRET_KEY) {
        const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
            apiVersion: '2022-11-15',
        });
        const data = await request.json();
        const { priceId } = data;
        const session = await stripe.checkout.sessions.create({
            line_items: [
                {
                    price: priceId,
                    quantity: 1,
                },
            ],
            mode: 'payment',
            success_url: `${process.env.HOST_URL}`,
            cancel_url: `${process.env.HOST_URL}`,
        });

        return NextResponse.json(session.url);
    }
}

Integrate getproducts (AKA fetch) API route

The fetch is be enabled by a useEffect on page / site load:

    useEffect(() => {
        fetchProducts();
    }, []);

The fetchProducts function gets an array of products and sets the component state to the result:

    async function fetchProducts() {
        const { data } = await axios.get('/api/getproducts');
        setProducts(data);
    }

We map over the returned array, sending each product to a product card:

    function getProductCards(productData: Product[]) {
        return productData.map((data) => (
            <ProductCard key={data.id} data={data} />
        ));
    }

Then we return the product card array to the page:

   return (
        <div className="grid sm:grid-cols-2 gap-16">
            {getProductCards(products)}
        </div>
    );

I put these parts together in a 'ProductCards.tsx':

'use client';

import axios from 'axios';
import { useState, useEffect } from 'react';
import { Product } from '@/lib/stripe/types';
import ProductCard from './ProductCard';

export default function ProductCards() {
    const [products, setProducts] = useState([]);

    useEffect(() => {
        fetchProducts();
    }, []);

    return (
        <div className="grid sm:grid-cols-2 gap-16">
            {getProductCards(products)}
        </div>
    );

    async function fetchProducts() {
        const { data } = await axios.get('/api/getproducts');
        setProducts(data);
    }

    function getProductCards(productData: Product[]) {
        return productData.map((data) => (
            <ProductCard key={data.id} data={data} />
        ));
    }
}

Integrate the checkout API Route

In the product card, there is a button for buying a product:

  <Button onClick={handleClickBuy}>Buy Now</Button>

This button has a click handler which makes the API request and gives control of the window location to the Stripe checkout returned:

    async function handleClickBuy(e: SyntheticEvent) {
        e.preventDefault();
        const { data: checkout } = await axios.post(
            '/api/checkout',
            {
                priceId: id,
            },
            {
                headers: {
                    'Content-Type': 'application/json',
                },
            }
        );
        window.location.assign(checkout);
    }

I put these in a ProductCard.tsx component:

import Image from 'next/image';
import axios from 'axios';
import { SyntheticEvent } from 'react';
import { Price, Product } from '@/lib/stripe/types';
import { Button } from '../ui/button';

export default function ProductCard({ data }: { data: Product }) {
    const {
        name,
        description,
        images: [image],
        default_price: price,
    } = data;
    const { currency, unit_amount: amount, id } = price as Price;
    if (!name || !description || !image) return null;
    return (
        <div className="grid gap-4 border rounded shadow p-6 lg:max-w-[35rem]">
            <Image
                priority
                src={image}
                alt={description}
                width={806}
                height={671}
            />
            <h2 className="text-6xl font-bold mx-auto w-fit">{name}</h2>
            <p className="mx-auto">{description}</p>
            <b className="mx-auto">{`${
                amount ? amount * 0.01 : 'N/A'
            } ${currency}`}</b>
            <Button onClick={handleClickBuy}>Buy Now</Button>
        </div>
    );

    async function handleClickBuy(e: SyntheticEvent) {
        e.preventDefault();
        const { data: checkout } = await axios.post(
            '/api/checkout',
            {
                priceId: id,
            },
            {
                headers: {
                    'Content-Type': 'application/json',
                },
            }
        );
        window.location.assign(checkout);
    }
}

On Types

I also decided to destructure the type definitions for 'Product' and 'Price' and export them from my own module so I did not need to keep importing the stripe module and using dot notation to access them (lib/stripe/types.ts):

import Stripe from 'stripe';

export type Product = Stripe.Product;
export type Price = Stripe.Price;

That's about it- remember to like / star if you found this useful!

Next.js 13.4 & Jest & Cypress Setup Guide

GLD5000 — Sun, 06 Aug 2023 22:47:33 +0000

Getting Started with Next 13.4

How I set up a project

This is a step-by-step guide to make a Next.js project with:

TypeScript for type safety
Tailwind CSS for styling
Jest for testing components etc.
Cypress for end to end testing etc.
ESLint for linting
Prettier for formatting
Husky & Lint-Staged for pre-commit testing and linting

If you like this, checkout my other projects on GitHub or via my Portfolio

You can also read this guide on my blog

TLDR: This setup is available as a template in my GitHub Account if you want the quickest path to the end result or want to see the setup in context- GLD-NextTemplate

Installation and Repo setup

npx create-next-app@latest
code my-app
git init
gh repo create
git add .
git commit . -m "Initial Commit"
git push -u origin main

Setup Testing

Jest

Install Jest, ts-jest, jsdom, testing libraries & eslint plugins: npm i -D jest ts-jest jest-environment-jsdom @testing-library/jest-dom @testing-library/react eslint-plugin-jest-dom eslint-plugin-testing-library
Add jest.config.mjs

import nextJest from "next/jest.js";

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: "./",
});

// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const config = {
  // Add more setup options before each test is run
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],

  testEnvironment: "jest-environment-jsdom",
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config);

Add jest.setup.js:

import '@testing-library/jest-dom/extend-expect'
import React from 'react'

function MockImage(props) {
    return React.createElement('img', props)
}
jest.mock('next/image', () => MockImage)

Add scripts to package.json:

  "scripts": {
    "test": "clear && jest",
    "test:noClear": "jest",
    "test:watch": "clear && jest --watchAll",
  }

Add first test in \_\_tests\_\_/home.test.tsx:

import React from 'react';
import { render } from '@testing-library/react';
import Home from '@/app/page';

describe('Home component', () => {
  it('renders correctly', () => {
    render(<Home />);

    const heroHeading = screen.getByTestId('hero-heading');
    expect(heroHeading).toBeInTheDocument();

    const madeByText = screen.getByText(/Made by GLD5000/i);
    expect(madeByText).toBeInTheDocument();

  });
});

Cypress

Install latest Cypress: npm i -D cypress@latest (currently "cypress": "^12.17.3" at time of writing)
Start a dev server in a terminal: npm run dev
Open Cypress from a second terminal: npx cypress open
Once open, click 'E2E Testing' button to configure and then click 'continue' (if you get an error relating to 'bundle' you may need to switch tsconfig.json "moduleResolution": "bundler", to "moduleResolution": "node",), when prompted for a browser choose e.g. Chrome and click to add scaffolded examples if you like.
Setup new config files within the 'cypress' folder:

cypress/eslintrc.json with disabled rules to accommodate cypress example specs:

{
    "plugins": ["cypress"],
    "extends": ["plugin:cypress/recommended"],
    "rules": {
        "testing-library/await-async-utils": "off",
        "no-unused-expressions": "off",
        "@typescript-eslint/ban-ts-comment": "off",
        "cypress/unsafe-to-chain-command": "off",
        "@typescript-eslint/no-unused-vars": "off",
        "@typescript-eslint/no-empty-function": "off",
        "func-names": "off",
        "@typescript-eslint/no-var-requires": "off",
        "global-require": "off",
        "testing-library/no-debugging-utils": "off",
        "no-param-reassign": "off"
    },
    "overrides": [
        {
            "files": ["viewport.cy.js", "waiting.cy.js"],
            "rules": {
                "cypress/no-unnecessary-waiting": "off"
            }
        }
    ]
}

cypress/tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["es5", "dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true,
        "plugins": [
            {
                "name": "next"
            }
        ],
        "paths": {
            "@/*": ["./src/*"]
        }
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
    "exclude": ["node_modules"]
}

Update exclude and include in root tsconfig.json:

    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts","cypress/tsconfig.json"],
    "exclude": ["node_modules", "./cypress.config.ts","cypress"]

Put an eslint disable comment in the cypress.config.ts:

/* eslint-disable */
import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

Add script to package.json:

  "scripts": {
    ...
   "cypress": "npx cypress open"
  }

Add first test:

Add data-testid attribute to H1 on app/page.tsx:

    <h1 data-testid="hero-heading" className="w-fit mx-auto text-5xl font-bold text-center">
                Minimal Starter Template for
            </h1>

Add test in cypress/e2e/home.cy.ts:

describe("template spec", () => {
  it("H1 contains correct text", () => {
    cy.visit("http://localhost:3000/");
    cy.get("[data-testid='hero-heading']").contains("Minimal Starter Template for");
  });
});

Setup Linting

Install prettier: npm i -D prettier eslint-plugin-prettier eslint-config-prettier
Make prettier config e.g.: touch .prettierrc.js
Configure prettier e.g.:

export default {
    trailingComma: "es5",
    tabWidth: 4,
    semi: false,
    singleQuote: true,
};

Setup eslint: npm init @eslint/config
Install Eslint AirBnb: npm i -D eslint-config-airbnb
Get peer dependency list for AirBnb config: list peer dependencies npm info "eslint-config-airbnb@latest" e.g.:

   eslint: '^7.32.0 || ^8.2.0',
  'eslint-plugin-import': '^2.25.3',
  'eslint-plugin-jsx-a11y': '^6.5.1',
  'eslint-plugin-react': '^7.28.0',
  'eslint-plugin-react-hooks': '^4.3.0'

Paste into package.json devDependencies and watch for conflicts (duplicates) you will not need eslint if it is already installed with Next.js.
Run npm install to install the extra dependencies: npm i
Install Eslint typescript: npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb-typescript
Install testing plugins: npm i -D eslint-plugin-jest-dom eslint-plugin-testing-library
Update eslint config e.g.:

module.exports = {
    extends: [
        'next/core-web-vitals',
        'plugin:testing-library/react',
        'plugin:jest-dom/recommended',
        'airbnb',
        'prettier',
        'eslint:recommended',
        'plugin:react/recommended',
        'plugin:react/jsx-runtime',
        'plugin:@typescript-eslint/recommended',
    ],
    plugins: ['prettier', 'react'],
    ignorePatterns: ['*.ttf', '*.css'],
    rules: {
        '@next/next/no-img-element': 'off',
        'import/no-extraneous-dependencies': 'off',
        'react/require-default-props': 'off',
        'react/jsx-props-no-spreading': 'off',
        'react/jsx-no-useless-fragment': 'off',
        'no-undef': 'off',
        'import/extensions': 'off',
        'react/jsx-uses-react': 'error',
        'react/jsx-uses-vars': 'error',
        'no-console': 'off',
        'react/jsx-no-bind': 'off',
        'react/prop-types': 'off',
        'no-use-before-define': ['error', { functions: false }],
        'react/jsx-filename-extension': 'off',
        'prettier/prettier': ['error'],
        'jsx-a11y/label-has-associated-control': [
            2,
            {
                controlComponents: [
                    'InputSelect',
                    'SectionTitle',
                    'InputTitle',
                    'InputText',
                ],
                depth: 3,
            },
        ],
    },
}

Setup Linting Pre Hooks

npm i -D husky
npm pkg set scripts.prepare="husky install"
npm i or npm run prepare
npm install -D lint-staged
Add hook: npx husky add .husky/pre-commit "npx lint-staged"
Make lint-staged configuration file:touch lint-staged.config.js
Add lint-staged configuration e.g.:

module.exports = {
    // this will check Typescript files
    '**/*.(ts|tsx)': () => 'yarn tsc --noEmit',

    // This will format and lint TS & JS Files
    '**/*.(ts|tsx|js)': (filenames) => [
        `yarn prettier --write ${filenames.join(' ')}`,
        `yarn eslint --fix --max-warnings=0 ${filenames.join(' ')}`,
    ],

    // this will Format MarkDown and JSON
    '**/*.(md|json)': (filenames) =>
        `yarn prettier --write ${filenames.join(' ')}`,
}

Add optional testing hook e.g.: npx husky add .husky/pre-commit "npm run test:noClear" so your pre-commit file could look something like this:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run test:noClear
npx lint-staged

Setup Additional Scripts

Package.json:

    "lint": "clear && next lint",
    "test": "clear && jest",
    "test:noClear": "jest",
    "test:watch": "clear && jest --watchAll",
    "test:v": "clear && jest --verbose",
    "format": "clear && prettier \"src/**/*.{js,jsx,ts,tsx,css,scss}\" --write",
    "lint:fix": "clear && prettier \"src/**/*.{js,jsx,ts,tsx,css,scss}\" --write && eslint src --ext .js,.jsx,.ts,.tsx --fix",
    "lint:all": "clear && prettier \"src/**/*.{js,jsx,ts,tsx,css,scss}\" --write && eslint src --ext .js,.jsx,.ts,.tsx --fix && tsc --noEmit"

That's It!

Not exactly a short process but this will give a really useful base to build quality code with. Don't forget to like / star if you found this useful! If you like, you can also check out my other projects and blogs.

Agile Basics

GLD5000 — Mon, 24 Jul 2023 21:15:35 +0000

Agile vs Waterfall

Two common types of project management are Agile and Waterfall and a good way to understand Agile is to compare it to Waterfall.

Waterfall

The simplest way to explain Waterfall is as a sequence (or sequence of sequences). Tasks are planned and carried out in order.

This works best where there is a defined end goal and firm requirements for your project. It also means that a client may not see the fruits of your labour until close to or at the end when it is all finished.

You will produce what you were told to in the first instance but also your client will have no chance to change their minds along the way.

A good example of this style of project would be building a house. You will have set expectations and immovable regulations you need to adhere to and when changes occur they will be mainly led by unforeseen issues emanating from the project itself e.g. underground obstacles or variations affecting foundations.

You cannot build the roof before the foundations etc. so things will need to be done in a strict sequential order.

Agile

Agile is different. Agile was created for software where the rules about ordering tasks can be more flexible. You can, for example, build a facade or user interface for a product that does not work yet. It may lack foundations but it will be able to look the part and give a client a good idea of what the end product may look like.

In software, your wire-framing and initial design could look exactly like your end product if you wish so there is no problem of a client saying: "I thought it would look bigger in real life" because both the plans and the end product exist in the same space.

This flexibility also means that you can show your client an unfinished product or part of a product and get feedback throughout the process. Any problems you have from the client are better to have earlier in the process - this called Failing Fast i.e. not storing up trouble for later but getting the bad news first so you can avoid wasted efforts.

Agile Values

These are comparative values which state that whilst the traditional project values are still important, these should take precedence. These can be seen as revolving around central tenets of the utmost importance of customer service and the effective application of efforts. Responding to and meeting (or exceeding) the needs of the customer is the top priority and feeds into all aspects of the project and methods of working. The Agile methodology seeks to extract the most value from a team and project and minimise wasted efforts through continuous delivery and feedback from the customer.

Individuals and interactions

over processes and tools

Processes and tooling should be a response to communicated needs. Working methods should fit the brief and most recent feedback whilst also accommodating the individuals in the team and utilising their skills in the most effective way.

Working software

over comprehensive documentation

Getting software in front of your customer is more important than writing documentation. A meeting and demonstration of a working product is more valuable than a delayed product with good documentation.

Customer collaboration

over contract negotiation

Agile works by involving the customer throughout the process, including changes of needs and expectations along the way. This should be a collaborative process where expertise is shared in both directions to arrive at the best outcome.

As a result, the full pathway is not clear in the initial stages and having an overly restrictive contract will only result in a sub-optimal product based on flawed initial predictions.

Responding to change

over following a plan

The reason for short sprints / iterations of production is to allow for change. Products change and expand over time. This could be a customer led change, or a change in technology etc. A good project should be able to leverage any external changes to improve the project outcome.

Also, the less time spent on an unnecessary feature, the better it will be for productivity and morale.

The Twelve Principles

These are derived from the values above and are fairly self-explanatory. They can be further grouped into four areas:

1. Value Delivery

Our highest priority is to satisfy the customer through early and continuous delivery of valuable software.
Deliver working software frequently, from a couple of weeks to a couple of months, with a preference to the shorter timescale.
Working software is the primary measure of progress.
Simplicity--the art of maximising the amount of work not done--is essential.
Continuous attention to technical excellence and good design enhances agility.

2. Business Collaboration

Welcome changing requirements, even late in development. Agile processes harness change for the customer's competitive advantage.
Business people and developers must work together daily throughout the project.

3. Team Dynamics and Culture

Build projects around motivated individuals. Give them the environment and support they need, and trust them to get the job done.
The most efficient and effective method of conveying information to and within a development team is face-to-face conversation.
Agile processes promote sustainable development. The sponsors, developers, and users should be able to maintain a constant pace indefinitely.
The best architectures, requirements, and designs emerge from self-organising teams.

4. Retrospectives and Continuous Learning

At regular intervals, the team reflects on how to become more effective, then tunes and adjusts its behaviour accordingly.

Git & GitHub Basics: Useful CLI Patterns

GLD5000 — Mon, 24 Jul 2023 20:57:55 +0000

TLDR: You can skip to the bottom of the article for cheatsheets of the terminology and the commands I used with all their meanings.

This blog will be more of a reference to common patterns I use on the Command Line Interface (CLI). I use Git CLI and GitHub CLI so if you see gh instead of git that means it is a GitHub command.

Installing GitHub CLI

I would recommend installing the GitHub CLI which you can do on Linux as follows (sorry it is long):

type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y)
curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg \
&& sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg \
&& echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null \
&& sudo apt update \
&& sudo apt install gh -y

Apparently, this script makes sure that curl is available, downloads a GitHub CLI archive keyring, sets the necessary permissions, adds the GitHub CLI repository configuration, updates package lists, and then installs the GitHub CLI package -simple!

Once you have that installed, you may not need to use it often but it will offer real quality of life improvements when interacting with GitHub. Find out more here.

Now that we have that sorted, let's get into some common use cases and patterns you might find useful!

Starting from a Local Repository

If you are using a getting started guide or tutorial, there is a good chance you might be starting on your local machine from scratch using something like create-next-app or create vite (both excellent options in my opinion).

Use your create command e.g. npx create-next-app@latest new-app
Launch a VSCode window for the new directory e.g. code new-app
Initialise the repository using git: git init
Create the repository on GitHub: Once you have completed these steps, you will have a Git repo on your local machine but you will most likely want to hook it up to GitHub which you can do using the GitHub CLI. If it is your first time using the CLI you will need to login:

gh auth login

If you are already logged in, you can create a remote copy of you git repository on GitHub using:

gh repo create

You will then be given series of prompts to interact with, for example:

? What would you like to do? Push an existing local repository to GitHub
? Path to local repository .
? Repository name my-app
? Description testing
? Visibility Public
✓ Created repository USERNAME/my-app on GitHub
? Add a remote? Yes
? What should the new remote be called? origin
✓ Added remote https://github.com/USERNAME/my-app.git

N.B. The dot . for Path to local repository means use current directory- assuming you are in the directory of the repo you wish to add to GitHub.

I really like this method because it is very ergonomic and gives you confidence that you are doing what you intended to do, with helpful confirmations each time it performs an action on your GitHub account.

After you have setup your local repo and create a remote on GitHub, it is time for your first commit:

git add .
git commit . -m "Initial Commit"
git push -u origin main

The above commands:

Add / Stage all files to be committed
Commit all the files
Push the commit and setup a link between the main branch on the local repo and the same on the remote (GitHub)

You should only need to set the upstream branch once and then subsequent pushes can be done simply using git push.

Starting from a Remote Repository

If you are not starting a project locally, you are probably starting remotely. This could mean that you just forked a repo on GitHub or you just created a repo on GitHub using their guided process.

Navigate to the Code section of your repo and find the GitHub CLI command:

gh repo clone USERNAME/my-app

Enter that into your terminal and then use code my-app to open it in VSCode.
Once in the repo and in VSCode you will want to use npm i to install any dependencies.

N.B. If your project is using Husky you may need to add npx husky install to enable the hooks.

Once you have made some sort of change, you can push to the remote using:

git commit . -m "My Message"
git push

Resuming Work on a Shared Repository

If you are going back to work on a shared repository with no local changes it is a good idea to pull any changes from the remote before you get going so you make sure you are working starting with the latest version of the repo:

git pull

Start Working on a Feature Branch

Once you have your local and remote repo working together in harmony, you may want to muddy the waters by creating a new branch or feature branch.

One benefit of having a feature branch is that you can experiment without taking down your running application, usually deployed from your main branch.

Another benefit is that, if you do not have push access for the main branch, you can make a feature branch and push to that to your hearts' delight and before making a pull request on GitHub to have the feature branch merged in.

To create a branch called new-feature and start working on it, you can use one of the following methods:

Copy branch to a new branch and then switch to it

git branch -c new-feature
git switch new-feature

Create and checkout a new branch

git checkout -b new-feature

Create and switch to a new branch

git switch -c new-feature

Basically, the -c flag is for copy or create and the -b flag is for branch but the effects of all these commands are eerily similar. You will end up in your new branch within your editor.

Next, you will want to push your newly created branch to a corresponding branch on the remote (GitHub). Again, there is more than one way to do this:

By naming the branch

This works with or without the -u (set upstream) flag

git push -u origin new-feature

The -u flag is useful if you want to make further pushes after using git push as it will set up tracking for you.

git push origin new-feature

Using the currently checked out branch (HEAD)

git push origin HEAD

Finish Working on a Feature Branch

Create a Pull Request

After you have finished your feature you can go to GitHub and create a pull request or you can use GitHub CLI:

gh pr create

This will give you some prompts:

? Title My First Pull Request
? Body
? What's next? Submit

Delete the branch

Deleting branches can be dangerous so always be sure. Luckily, git will stop you from deleting the branch you are on, so if you switch to the main branch, you will not be able to accidentally delete it. To delete branch new-feature from the local machine and GitHub (origin) do this:

git switch main
git branch -d new-feature
git push origin -d new-feature

These commands:

Switch to the main branch
Delete the local copy of the new-feature branch
Delete the origin (or remote) copy of the new-feature branch using the -d delete flag

N.B. You can also delete upstream branches using a : colon prefix e.g.:

git push origin :new-feature

CheatSheets

Git Terms

repo / repository - Git / Code Directory
branch - Copy of a Repository that can be independently worked on
HEAD - Current Working Branch
origin - Remote repository e.g. GitHub
commit - A saved version of a Git that includes a message and information about what changed
ref - A file containing commit information
pull request - Ask someone to pull changes from your branch into another branch e.g. main

Git Actions

checkout - Start working on a branch
switch - Switch to a different branch
pull - Pull any changes from one branch or place (e.g. Remote / Local) to another
push - Push your changes to another place or branch
add - Add a file to the observed files so Git can track its changes
commit - Add file changes to a new commit that can be pushed to a branch

Commands

gh auth login - Login to GitHub
gh repo create - Create a new remote repo on GitHub
gh repo clone USERNAME/my-app - Create a local clone of the 'my-app' repo from GitHub
gh pr create - Create a pull request for the current branch
git add . - Add all files for Git tracking
git commit . -m "Initial Commit" - Commit All files with a message of "Initial Commit"
git push -u origin main - Set upstream for 'main' branch to same named branch on origin (GitHub)
git push - Push the current branch to origin (GitHub)
git pull - Fetch any changes for the current repo and branch from origin (GitHub)
git branch -c new-feature - Copy current branch to a new branch called 'new-feature'
git switch new-feature - Switch to branch called 'new-feature'
git checkout -b new-feature - Create and checkout a new branch called 'new-feature'
git switch -c new-feature - Create and switch to a new branch called 'new-feature'
git push origin new-feature - Push 'new-feature' branch to origin and create if not present
git push origin HEAD - Push current (HEAD) branch to origin and create if not present
git branch -d new-feature - Delete the 'new-feature' branch locally
git push origin -d new-feature - Delete the 'new-feature' branch on remote / origin / GitHub
git push origin :new-feature - Delete the 'new-feature' branch on remote / origin / GitHub