Forem: Laravel Tuts

How to Automatically Generate an XML Sitemap in Laravel

Laravel Tuts — Sun, 11 Dec 2022 09:38:07 +0000

December 11, 2022・Originally published at laraveltuts.com・8 min read

How often should I update my sitemap? What should I include in it? Should I create a new sitemap every time. I add or remove a page from my site?

The sitemap is a file that contains links to all pages on your site. This helps search engines crawl your site better and index your pages faster.

Sitemaps are essential for SEO (search engine optimization). They allow search engines to crawl your entire site and index its contents.

We are going to create a XML Sitemap for our posts using a spatie/laravel-sitemap package.

Follow the below Step-by-Step Guide on how to automatically generate an XML Sitemap in Laravel Application.

How to Automatically Generate an XML Sitemap in Laravel

Step 1: Install Laravel Application
Step 2: Create Database and Configure
Step 3: Installing spatie/laravel-sitemap Package
Step 4: Creating Post Model, Migration and Controller
Step 5: Create Dummy Records for Post
Step 6: Create Sitemap Command
Step 7: Scheduled Command in Console Kernel
Step 8: Testing

Step 1: Install Laravel Application

Firstly, we will install a laravel application. To install a laravel application run the following code in terminal as show in figure.



composer create-project --prefer-dist laravel/laravel laravel-sitemap

cd laravel-sitemap

Step 2: Create Database and Configure

Let create database in phpmyadmin for our project for adding posts and then we will create those posts sitemap later.

We are creating a database with name “laravel-sitemap” as you can see in below image.

After creating database we are going to configure it to our laravel application. To configure the database in laravel. First open .env from our project root directory and enter the database details as show below.



DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel-sitemap
DB_USERNAME=root
DB_PASSWORD=

Now run the migration to create a default tables like users table etc.



php artisan migrate

Step 3: Installing spatie/laravel-sitemap Package

We are using spatie/laravel-sitemap package to generate our posts sitemap. We are going to install the package via composer using a following command in terminal.



composer require spatie/laravel-sitemap

The package will automatically register itself.

Configuration Package

You can override the default options for the crawler. First publish the configuration:



php artisan vendor:publish --provider="Spatie\Sitemap\SitemapServiceProvider" --tag=sitemap-config

This will copy the default config to config/sitemap.php where you can edit it.



use GuzzleHttp\RequestOptions;
use Spatie\Sitemap\Crawler\Profile;
return [
    /*
     * These options will be passed to GuzzleHttp\Client when it is created.
     * For in-depth information on all options see the Guzzle docs:
     *
     * http://docs.guzzlephp.org/en/stable/request-options.html
     */
    'guzzle_options' => [
        /*
         * Whether or not cookies are used in a request.
         */
        RequestOptions::COOKIES => true,
        /*
         * The number of seconds to wait while trying to connect to a server.
         * Use 0 to wait indefinitely.
         */
        RequestOptions::CONNECT_TIMEOUT => 10,
        /*
         * The timeout of the request in seconds. Use 0 to wait indefinitely.
         */
        RequestOptions::TIMEOUT => 10,
        /*
         * Describes the redirect behavior of a request.
         */
        RequestOptions::ALLOW_REDIRECTS => false,
    ],

    /*
     * The sitemap generator can execute JavaScript on each page so it will
     * discover links that are generated by your JS scripts. This feature
     * is powered by headless Chrome.
     */
    'execute_javascript' => false,

    /*
     * The package will make an educated guess as to where Google Chrome is installed. 
     * You can also manually pass it's location here.
     */
    'chrome_binary_path' => '',
    /*
     * The sitemap generator uses a CrawlProfile implementation to determine
     * which urls should be crawled for the sitemap.
     */
    'crawl_profile' => Profile::class,

];

Step 4: Creating Post Model, Migration and Controller

We are going to create posts XML sitemaps. So we are going to create post model, migration and controller for it.

By running the following command its will create all three model migration and model for post.



php artisan make:model Post -mc

-mc will create a migraion and controller.

Now we are going to update it.

app/Models/Post.php



<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
    use HasFactory;
    protected $fillable = [
        'title', 
        'slug', 
        'description'
    ];
}

database/migrations/create_posts_table.php



<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('slug');
            $table->text('description'); 
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
};

We don’t need to update PostController.php file for this tutorial because we are going to add dummy records for posts using faker in our next step.

If you want to add, edit, update or to display posts you can using PostController.php. You can check out our article Laravel 9 Vue JS CRUD App using Vite Example. We had discuss the CRUD in deatils.

Run the migration to create our new post table.



php artisan migrate

Step 5: Create Dummy Records for Post

Now we are going to add some dummy records to the post table so that we can generate a XML sitemap for posts.

You can skip this part if you already create a post.

So, now we are going to create factory for our post model using the following command.



php artisan make:factory PostFactory --model=Post

Update the database/factories/PostFactory.php file.



<?php
namespace Database\Factories;
use App\Models\Post;
use Illuminate\Database\Eloquent\Factories\Factory;
/**
 * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Post>
 */
class PostFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = Post::class;
    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */
    public function definition()
    {
        return [
            'title' => $this->faker->sentence($nbWords = 6, $variableNbWords = true),
            'slug' => $this->faker->randomNumber($nbDigits = NULL, $strict = false),
            'description' => $this->faker->text($maxNbChars = 2000)
        ];
    }
}

Note for slug we are using some random numbers.

Now we are going to generate some random post using tinker.



php artisan tinker
Post::factory()->count(30)->create()

30 is the total number of post we want to generate.

Now you can Exit from tinker using exit command.



exit

Step 6: Creating Sitemap Command

You can easily create an artisan command to create a sitemap and schedule it to run frequently. This will ensure that new pages and content types will be automatically picked up. To create a sitemap command run the following command.



php artisan make:command GenerateSitemap

Update the sitemap command with the following code.

app/Console/Commands/GenerateSitemap.php



<?php
namespace App\Console\Commands;
use Illuminate\Console\Command;
use Spatie\Sitemap\Sitemap;
use Spatie\Sitemap\Tags\Url;
use App\Models\Post;
class GenerateSitemap extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'sitemap:generate';
    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Automatically Generate an XML Sitemap';
    /**
     * Execute the console command.
     *
     * @return int
     */
    public function handle()
    {
        $postsitmap = Sitemap::create();
        Post::get()->each(function (Post $post) use ($postsitmap) {
            $postsitmap->add(
                Url::create("/post/{$post->slug}")
                    ->setPriority(0.9)
                    ->setChangeFrequency(Url::CHANGE_FREQUENCY_MONTHLY)
            );
        });
        $postsitmap->writeToFile(public_path('sitemap.xml'));
    }
}

sitemap:generate is our command to generate the sitemap.
“setPriority” — set the post priority.
“setChangeFrequency” — set the post change frequency with daily, monthly, yearly.

You can read other options at spatie/laravel-sitemap package.

Step 7: Scheduled Command in Console Kernel

Now we nee to register this command to kernel for automatically generate XML sitemap. It can be scheduled in the console kernel to be run daily.

app/Console/Kernel.php



// app/Console/Kernel.php
protected function schedule(Schedule $schedule)
{
    ...
    $schedule->command('sitemap:generate')->daily();
    ...
}

Step 8: Testing

We are all set, the sitemap is automatically set to be run daily. To set for now we are going to run the command to generate our sitemap manually by running the following command.



php artisan sitemap:generate

The above command will generate the sitemap.xml in public directory.

Run the following command to start the Artisan development server for laravel.



php artisan serve

And open the following link in any web browser to open the sitemap.



http://127.0.0.1:8000/sitemap.xml

Conclusion

This concludes our tutorial on How to Automatically Generate an XML Sitemap in Laravel. We hope you found it helpful. If you did, please share this article with your friends or family and leave us a comment to let us know what you think and stay tuned for more tutorials. If you like the tutorial please subscribe our youtube channel and follow us on social network facebook and instagram.

Laravel 9 Vue JS CRUD App using Vite Example

Laravel Tuts — Sun, 24 Jul 2022 06:52:00 +0000

July 24, 2022, Originally published at laraveltuts.com・9 min read

Today, We are going to learn Laravel 9 Vue JS CRUD App using Vite Example. This tutorial will cover on laravel 9 Vue Js CRUD application using Vite latest laravel update with example.

Vite is a modern frontend build tool that provides an extremely fast development environment and bundles your code for production. When building applications with Laravel, you will typically use Vite to bundle your application’s CSS and JavaScript files into production ready assets.

Vue.js is an open-source model–view–view model front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

Steps for Laravel 9 Vue JS CRUD App using Vite Example:

Step 1: Installing fresh new Laravel 9 Application
Step 2: Creating Database and Configuration
Step 3: Creating Auth with Breeze
Step 4: Creating Migration and Model
Step 5: Creating Route
Step 6: Creating Controller
Step 7: Creating Vue Pages
Step 8: Testing
Step 9: Conclusion

Step 1: Installing fresh new Laravel 9 Application

First, we are installing a fresh new laravel 9 application. To install a laravel application run the following command in terminal.



composer create-project laravel/laravel vuejs-crud-vite
cd vuejs-crud-vite

Note: “vuejs-crud-vite” is our laravel application name.

Step 2: Creating Database and Configuration

Now, we will create a database. First open phpmyadmin and create a database with name “vuejs-crud-vite” (you may use anything you like).

Now we are going to add the database details to the laravel application. Open .env file and enter the database details.



DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=vuejs-crud-vite
DB_USERNAME=root
DB_PASSWORD=

Step 3: Creating Auth with Breeze

Now we are going to create auth with breeze. Run the following command in terminal to install breeze library.



composer require laravel/breeze --dev

create authentication with the following command.



php artisan breeze:install vue

Install Node JS package.



npm install

Now run the vite command and make it keep running.



npm run dev

Note: If error occurs then updated node to v16.16.0 and it worked

Now open new terminal and run the migration.



php artisan migrate

Step 4: Creating Migration and Model

Here, We are going to create a migration for Posts table. To create a posts migration run the following command.



php artisan make:migration create_posts_table

add the following fields to posts migration file.



<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
};

Run the migration again to create posts table.



php artisan migrate

So now, We will create Post model. To create a Post model run the following command in terminal.



php artisan make:model Post

And add the following code to Post.php model.



<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
    use HasFactory;
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'title', 'body'
    ];
}

Step 5: Creating Route

Now we will create a resources route for our CRUD application. Add the following route to routes/web.php



<?php
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use App\Http\Controllers\PostController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});
Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');
require __DIR__.'/auth.php';
Route::resource('posts', PostController::class);

Step 6: Creating Controller

In this step, we are going to create a Post Controller. Create a new file PostController.php in app/Http/Controllers folder and add the following code inside.



<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia;
use App\Models\Post;
use Illuminate\Support\Facades\Validator;

class PostController extends Controller
{
    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function index()
    {
        $posts = Post::all();
        return Inertia::render('Posts/Index', ['posts' => $posts]);
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function create()
    {
        return Inertia::render('Posts/Create');
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function store(Request $request)
    {
        Validator::make($request->all(), [
            'title' => ['required'],
            'body' => ['required'],
        ])->validate();

        Post::create($request->all());

        return redirect()->route('posts.index');
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function edit(Post $post)
    {
        return Inertia::render('Posts/Edit', [
            'post' => $post
        ]);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function update($id, Request $request)
    {
        Validator::make($request->all(), [
            'title' => ['required'],
            'body' => ['required'],
        ])->validate();

        Post::find($id)->update($request->all());
        return redirect()->route('posts.index');
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function destroy($id)
    {
        Post::find($id)->delete();
        return redirect()->route('posts.index');
    }
}

Step 7: Creating Vue Pages

In this last step we are create a Vue Js Pages — Index.vue, Create.vue and Edit.vue.

Create a new folder Posts inside resources/js/Pages and create below pages inside Posts folder.

resources/js/Pages/Posts/Index.vue



<script setup>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';
import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
defineProps({
    posts: Array,
});
const form = useForm();
function destroy(id) {
    if (confirm("Are you sure you want to Delete")) {
        form.delete(route('posts.destroy', id));
    }
}
</script>
<template>
    <Head title="Dashboard" />
    <BreezeAuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Laravel 9 Vue JS CRUD App using Vite Example - LaravelTuts.com
            </h2>
        </template>
        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 bg-white border-b border-gray-200">
                        <div className="flex items-center justify-between mb-6">
                            <Link
                                className="px-6 py-2 text-white bg-green-500 rounded-md focus:outline-none"
                                :href="route('posts.create')"
                            >
                                Create Post
                            </Link>
                        </div>
                        <table className="table-fixed w-full">
                            <thead>
                                <tr className="bg-gray-100">
                                    <th className="px-4 py-2 w-20">No.</th>
                                    <th className="px-4 py-2">Title</th>
                                    <th className="px-4 py-2">Body</th>
                                    <th className="px-4 py-2">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="post in posts">
                                    <td className="border px-4 py-2">{{ post.id }}</td>
                                    <td className="border px-4 py-2">{{ post.title }}</td>
                                    <td className="border px-4 py-2">{{ post.body }}</td>
                                    <td className="border px-4 py-2">
                                        <Link
                                            tabIndex="1"
                                            className="px-4 py-2 text-sm text-white bg-blue-500 rounded"
                                            :href="route('posts.edit', post.id)"
                                        >
                                            Edit
                                        </Link>
                                        <button
                                            @click="destroy(post.id)"
                                            tabIndex="-1"
                                            type="button"
                                            className="mx-1 px-4 py-2 text-sm text-white bg-red-500 rounded"
                                        >
                                            Delete
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </BreezeAuthenticatedLayout>
</template>

resources/js/Pages/Posts/Create.vue



<script setup>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';
import BreezeLabel from '@/Components/Label.vue';
import BreezeInput from '@/Components/Input.vue';
import BreezeTextArea from '@/Components/Textarea.vue';
import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
const form = useForm({
    title: '',
    body: ''
});
const submit = () => {
    form.post(route('posts.store'));
};
</script>
<template>
    <Head title="Dashboard" />
    <BreezeAuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Create Post
            </h2>
        </template>
        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 bg-white border-b border-gray-200">
                        <div className="flex items-center justify-between mb-6">
                            <Link
                                className="px-6 py-2 text-white bg-blue-500 rounded-md focus:outline-none"
                                :href="route('posts.index')"
                            >
                                Back
                            </Link>
                        </div>
                        <form name="createForm" @submit.prevent="submit">
                                <div className="flex flex-col">
                                    <div className="mb-4">
                                        <BreezeLabel for="title" value="Title" />

                                        <BreezeInput 
                                            id="title" 
                                            type="text" 
                                            class="mt-1 block w-full" 
                                            v-model="form.title" 
                                            autofocus />
                                        <span className="text-red-600" v-if="form.errors.title">
                                            {{ form.errors.title }}
                                        </span>
                                    </div>
                                    <div className="mb-4">
                                        <BreezeLabel for="body" value="Body" />

                                        <BreezeTextArea 
                                            id="body" 
                                            class="mt-1 block w-full" 
                                            v-model="form.body" 
                                            autofocus />
                                        <span className="text-red-600" v-if="form.errors.body">
                                            {{ form.errors.body }}
                                        </span>
                                    </div>
                                </div>

                                <div className="mt-4">
                                    <button
                                        type="submit"
                                        className="px-6 py-2 font-bold text-white bg-green-500 rounded"
                                    >
                                        Save
                                    </button>
                                </div>
                            </form>
                    </div>
                </div>
            </div>
        </div>
    </BreezeAuthenticatedLayout>
</template>

resources/js/Pages/Posts/Edit.vue



<script setup>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';
import BreezeLabel from '@/Components/Label.vue';
import BreezeInput from '@/Components/Input.vue';
import BreezeTextArea from '@/Components/Textarea.vue';
import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
const props = defineProps({
    post: Object,
});
const form = useForm({
    title: props.post.title,
    body: props.post.body
});
const submit = () => {
    form.put(route('posts.update', props.post.id));
};
</script>
<template>
    <Head title="Dashboard" />
    <BreezeAuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Edit Post
            </h2>
        </template>
        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 bg-white border-b border-gray-200">
                        <div className="flex items-center justify-between mb-6">
                            <Link
                                className="px-6 py-2 text-white bg-blue-500 rounded-md focus:outline-none"
                                :href="route('posts.index')"
                            >
                                Back
                            </Link>
                        </div>
                        <form name="createForm" @submit.prevent="submit">
                                <div className="flex flex-col">
                                    <div className="mb-4">
                                        <BreezeLabel for="title" value="Title" />

                                        <BreezeInput 
                                            id="title" 
                                            type="text" 
                                            class="mt-1 block w-full" 
                                            v-model="form.title" 
                                            autofocus />
                                        <span className="text-red-600" v-if="form.errors.title">
                                            {{ form.errors.title }}
                                        </span>
                                    </div>
                                    <div className="mb-4">
                                        <BreezeLabel for="body" value="Body" />

                                        <BreezeTextArea 
                                            id="body" 
                                            class="mt-1 block w-full" 
                                            v-model="form.body" 
                                            autofocus />
                                        <span className="text-red-600" v-if="form.errors.body">
                                            {{ form.errors.body }}
                                        </span>
                                    </div>
                                </div>

                                <div className="mt-4">
                                    <button
                                        type="submit"
                                        className="px-6 py-2 font-bold text-white bg-green-500 rounded"
                                    >
                                        Save
                                    </button>
                                </div>
                            </form>
                    </div>
                </div>
            </div>
        </div>
    </BreezeAuthenticatedLayout>
</template>

Create a new file Textaarea.vue inside resources/js/Components

resources/js/Components/Textarea.vue



<script setup>
    import { onMounted, ref } from 'vue';
    defineProps(['modelValue']);
    defineEmits(['update:modelValue']);
    const input = ref(null);
    onMounted(() => {
        if (input.value.hasAttribute('autofocus')) {
            input.value.focus();
        }
    });
</script>
<template>
    <textarea class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" ref="input"></textarea>
</template>

Add a Post Navigation in Authenticated.vue inside resources/js/Layouts folder.



<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
  <BreezeNavLink :href="route('dashboard')" :active="route().current('dashboard')">Dashboard</BreezeNavLink>
  <BreezeNavLink :href="route('posts.index')" :active="route().current('posts.index')">Posts</BreezeNavLink>
</div>

Step 8: Testing

Now let’s test our Laravel 9 Vue JS CRUD App using Vite Example. Run the following command to start laravel server.



php artisan serve

Also run Vite in new terminal and keep it running.



npm run dev

or build.



npm run build

Now open any web browser and enter the following link to test the application.



http://127.0.0.1:8000/

Note: Register a new user and then click posts from navigation.

Preview:

Step 9: Conclusion

Today, We had learn Laravel 9 Vue JS CRUD App using Vite Example. Hope this tutorial helped you with learning Laravel 9. If you have any question you can ask us at comment section below. If you like the tutorial please subscribe our YouTube Channel and follow us on social network Facebook and Instagram.