Category: Workshop

Git Commands to Remove Merged or Nonexistent Local Branches

Discover git commands to delete local branches that have been removed from remote or merged into the main branch.

Over time, your local git branches list can become overwhelming, particularly if you develop on a single branch, generate a pull request, merge it into the main branch, and then remove the remote git branch once it has been merged. After the branch is removed from the remote repository, there is no need to keep it on your local machine.

The following git command will delete all local branches that have been merged into the main branch. If your git trunk branch is not named main or you wish to remove all branches that have been merged into a branch other than main, simply modify the two instances of the word main in the command to reflect the name of your branch.

List of git commands to remove local merged git branches

To remove all the local branches, which are merged into the main branch, navigate to the root of the repository and run the following git commands,

  • Fetch the latest updates from the git repository
git fetch
  • See the list of local branches available in the repository
git branch
  • Delete all local branches that have been merged to main branch 
git branch --merged main | grep -v "^\* main" | xargs -n 1 -r git branch -d

Explanation:

This command is a combination of several Git commands and shell commands that work together to delete all the local Git branches that have been merged into the main branch, except for the main branch itself.

Here’s a breakdown of the individual commands and what they do:

  1. git branch --merged main: This command lists all the local branches that have been merged into the main branch. The --merged option tells Git to only list branches that have been fully merged into main.
  2. grep -v "^\* main": This command filters out the main branch from the list of branches. The -v option tells grep to invert the match, i.e., show only the lines that do not match the pattern. The pattern in this case is "^\* main", which matches lines that start with an asterisk (\*) followed by the text main.
  3. xargs -n 1 -r git branch -d: This command passes the list of merged branches (excluding main) to the git branch -d command, which deletes each branch. The -n 1 option tells xargs to pass one branch name at a time to the git branch -d command. The -r option tells xargs to only run the git branch -d command if there is at least one branch name to pass to it. The -d option tells Git to delete the branches, but only if they have been fully merged into the current branch (in this case, main). Note that this option will fail if the branch has unmerged changes, in which case the -D option could be used instead to force-delete the branch.

Want to learn such useful commands? Get a Mastering Git book from https://amzn.to/3Hp527B

List of git commands to remove local nonexistent git branches

Similarly, run the following git commands to remove all the deleted branches from the local computer:

  • Fetch the latest updates from the git repository
git fetch
  • See the list of local branches available in the repository
git branch
  • Delete all local branches that have been merged to main branch 
git branch -vv | grep ': gone]' | grep -v '\*' | awk '{ print $1; }' | xargs -r git branch -d

Explanation:

This command is a combination of several commands in a shell pipeline that work together to delete Git branches that are marked as "gone".

Here’s a breakdown of the individual commands and what they do:

  1. git branch -vv: This command lists all the Git branches in the local repository, with additional information about their upstream branches (if any). The -vv option adds more information about whether each branch is “up to date”, “behind”, or “ahead” of its upstream branch.
  2. grep ': gone]': This command filters the output of the git branch -vv command to only show the branches that are marked as "gone". The grep command searches for lines that contain the text ": gone]", which indicates that a branch is gone.
  3. grep -v '\*': This command further filters the output to exclude any branches that are currently checked out (indicated by the asterisk symbol). The -v option tells grep to invert the match, i.e., show only the lines that do not contain an asterisk.
  4. awk '{ print $1; }': This command extracts only the branch names from the filtered output. The awk command splits each line of input into fields and prints only the first field, which is the branch name.
  5. xargs -r git branch -d: This command passes the branch names to the git branch -d command, which deletes each branch. The -r option tells xargs to only run the git branch -d command if there is at least one branch name to pass to it. The -d option tells Git to delete the branches. Note that this option will fail if the branch has unmerged changes, in which case the -D option could be used instead to force-delete the branch.

Note: you can test these git commands by creating temporary repository on any git platform like, GitHub, GitLab or Bitbucket.

Disclaimer: This post contains affiliate links. If you use these links to buy something, I may earn a commission at no extra cost to you.

Install React JS with Laravel Breeze

Guide to installing Laravel Breeze with React JS scaffolding via Inertia for building modern applications.

In this React JS tutorial, we learn to install Laravel Breeze with React JS over Laravel Application. Laravel Breeze come equipped with out-of-the-box scaffolding for new Inertia applications, making them the quickest and easiest way to get your Inertia project off the ground with React Js.

For this post, we are using Laravel Breeze. This minimal implementation includes login, registration, password reset, email verification, password confirmation, and a basic “profile” page for updating user information.

Laravel Breeze comes equipped with simple Blade templates styled with Tailwind CSS. However, if you prefer to scaffold your application using React JS and Inertia JS, Laravel Breeze can do that too.

In addition to being an excellent starting point for a new Laravel project, Laravel Breeze is also a great choice for projects that want to elevate their Blade templates using Laravel Livewire.

Install laravel project and setup database

First install a fresh new Laravel application from the composer using the following command,

composer create-project laravel/laravel inertia-react

It will create the laravel project folder named inertia-react .

Now, you have to connect the laravel app to the database. Go inside this folder and open .env to change the database connection details as follows,

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_username
DB_PASSWORD=database_password

After changing the connection details, run all migrations for the project using the following command,

php artisan migrate

Install Laravel Breeze over Laravel

Once you ready with the Laravel installation, you can proceed with Laravel Breeze installation using Composer using the following command,

composer require laravel/breeze --dev

Once you’ve installed the Laravel Breeze package using Composer, it’s time to run the breeze:install Artisan command as follows, 

php artisan breeze:install

This command will publish all the necessary authentication resources, including views, routes, controllers, and more, directly to your application.

Laravel Breeze publishes its code directly to your application, giving you complete control and visibility over its features and implementation. This allows you to easily customize and tailor the authentication experience to fit your unique needs.

If you want to use an Inertia stack with React JS in your Laravel Breeze application, simply specify “react” as your desired stack when running the breeze:install Artisan command as follows, 

php artisan breeze:install -react

Once the scaffolding is installed, be sure to compile your application’s frontend assets to ensure proper functionality:

npm install && npm run dev

With the initial setup complete, it’s time to test your application’s authentication functionality. Simply navigate to the /login or /register URLs in your web browser to get started.

All of Laravel Breeze‘s routes are defined in the routes/auth.php file, making it easy to modify or customize the authentication routes as needed.

Using Laravel to upload a file

Learn how to handle file uploads in Laravel, including validations and best practices.

Uploading a file in any programming is a challenge. In this post, we focus on uploading a file and some validations to use with file upload using Laravel.

To upload a file using Laravel, you can follow these steps:

Create a new form in your Laravel view with an input field for the file:

<form method="POST" action="{{ route('file.upload') }}" enctype="multipart/form-data">
    @csrf

    <input type="file" name="file">

    <button type="submit">Upload</button>
</form>

In above code, we have added file.upload route as an action of the form. So, we need to define this route in routes/web.php file. This route should point to the controller method that will handle the file upload.

The following code will define a new route in your routes/web.php file:

Route::post('/file/upload', [App\Http\Controllers\FileController::class, 'upload'])->name('file.upload');

Above code has defined a route, which points to the upload method of the FileController. So, create a new controller FileController and method upload inside that to handle the file upload as follows:

class FileController
{
    public function upload(Request $request)
    {
        // Validate the uploaded file
        $request->validate([
            'file' => 'required|file|max:1024', // limit file size to 1 MB
        ]);

        // Store the uploaded file in the storage/app/public directory
        $path = $request->file('file')->store('public');

        // Generate a URL for the uploaded file
        $url = Storage::url($path);

        // Redirect back with a success message
        return back()->with('success', 'File uploaded successfully: ' . $url);
    }
}

In the upload() method, we first validate that the uploaded file meets our requirements. So, we have added some validations for our file. These validations are as follows:

required:

The field under this validation must be present in the input data and must not empty. A field is “empty” if it meets one of the following criteria:

  • The value is null.
  • The value is an empty string.
  • The value is an empty array or empty Countable object.
  • The value is an uploaded file with no path.

file:

The field under this validation must be a successfully uploaded file.

max:1024:

The field under this validation must be less than or equal to a 1024 bytes. Here, 1024 is value of file size. You can change it according to your requirements.

We then use the store() method on the uploaded file to store it in the storage/app/public directory. This directory is publicly accessible, so we can generate a URL for the file using the url() method on the Storage facade. Finally, we redirect back to the form with a success message that includes the URL of the uploaded file.

You can now test the file upload functionality by navigating to the form and selecting a file to upload. If the file meets the validation requirements, it will be uploaded and a success message will be displayed. You can then access the uploaded file at the generated URL.

Getting started with ReactJS

Set up a local environment and learn the fundamentals of ReactJS for modern web development.

Setting up a local environment is recommended way to learn ReactJS because the local setup allows you to complete the tutorial using your choice of editor, use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

Let’s start with creating a new ReactJS application.

Create React App

Creating React App is a comfortable environment for learning and building an application in React.

There are few prerequisites for creating a React app as follows,

  • Node.js >= 14.0.0
  • npm >= 5.6

If above requirements are satisfied, you can run the following command to create a new react application,

npx create-react-app my-react-app

You can change my-react-app to anything you want to name your app.

The create-react-app command will set up everything you need to run a React application. Now you are ready to run your first real React application! Go to your application directory using the following command,

cd my-react-app

Now, run the following command inside your application directory to run your application,

npm start

It will compile your application and open it in the new browser window or tab. If not, you can open your browser and write localhost:3000 in the address bar. Your application will look like screenshot below,

React App

If you check your command window, it will show the following output,

compiled react app

You can see that command window is also providing command to create a production build for your application.

Using React JS in the HTML File

Learn how to use ReactJS directly in HTML files, including prerequisites and setup steps.

Now that we know what React JS is, we can start with different usage of ReactJS. If you don’t know what React JS is, read the Getting Started with ReactJS.

In this article, we will learn to use React JS directly in the HTML file. There are some prerequisites to adding React JS script inside the HTML code. We need to include the following three javascript in the head section of the HTML file.

The first two allow us to write ReactJS code in our JavaScripts, and Babel Js will allow to write JSX syntax and ES6 in older browsers.

Follow the below steps to add react JS compnent to the HTML file.

Add the DOM container to mount ReactJS Component

Embedding React JS in HTML differs slightly from what we have done with React Js App. In a standard React Js app, the root element in the index.html is the container that mounts the React Js app. Similarly, we need any element to mount our react JS component in HTML file as below,

<div id="example"></div>

In above code, we have added an element with id example in HTML file.

Add required JS files to run ReactJS

We want to run a React app in an HTML file, where no node_modules to provide React Js dependencies. Therefore, we must add React dependencies by including React script tags in the HTML document as below,

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

In above code, we have included the required React JS scripts, which are required to execute the React JS code.

React Js code returns JSX. So, we also need Babel JS to transform that JSX as below,

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Write ReactJS code in HTML

Now, our HTML file is ready for react JS code. But, we have to add our react JS code in text/babel script tag as babel can transpile our react JS code as below,

<script type="text/babel">
  function Hello() {
    return <h1>Hello World!</h1>;
  }
  ReactDOM.render(<Hello />, document.getElementById('example'))
</script>

Example

The complete code of using React JS in the HTML file is as follows,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      function Hello() {
        return <h1>Hello World!</h1>;
      }
      ReactDOM.render(<Hello />, document.getElementById('example'))
    </script>
  </body>
</html>

This way, we can use ReactJS for testing purposes. But for production use, we have to set up a React environment.