Laravel 10 - Genesis Starter Kit
Laravel 10 - Genesis Starter Kit
In this tutorial, we will see how to implement the Genesis Starter Kit in Laravel 10 and why it's useful for jumpstarting your project with pre-built features.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
This guide takes you through setting up a Laravel 10 application with the Genesis Starter Kit, providing a comprehensive approach to integrating authentication and frontend UI. You’ll start by creating a fresh Laravel 10 project using either the Laravel installer or Composer, whichever you prefer. After accessing the project directory, you'll install the Genesis Starter Kit to set up the front-end UI, which will give you a clean and customizable design for your app. The guide covers publishing the necessary assets, installing dependencies, and running the Vite server to handle frontend asset compilation. Additionally, you'll migrate the database to set up the required tables and structures, ensuring your application’s data is ready for use. Finally, you’ll test the application by running the development server and visiting key authentication pages, such as registration, login, and profile, to verify that everything is working as expected. By the end of this guide, you'll have a fully functional Laravel 10 application with a robust authentication system powered by the Genesis Starter Kit, providing a strong foundation for further customization.
Step # 1 : Set Up New Laravel Project.
Start by setting up a fresh Laravel project. You can use either the Laravel installer or Composer, depending on your preference. If you have Laravel installed globally, simply run.
laravel new genesis
If you prefer using Composer, run the following command.
composer create-project laravel/laravel --prefer-dist genesis
This command will create a new Laravel project named genesis, setting up all the essential files, folders, and configurations required for a standard Laravel application. Composer will handle downloading and organizing everything automatically, ensuring your development environment is properly prepared.
Step # 2 : Access the project.
Open your terminal (e.g., Git Bash, Command Prompt, or any terminal you prefer) and move into the root directory of your newly created Laravel project by running.
cd c:xampp/htdocs/genesis
This command positions you inside the project folder, allowing you to run Laravel commands and start working within your application environment.
Step # 3 : Install the Genesis Starter Kit.
To get started with the Genesis Starter Kit in your Laravel application, you’ll need to install the package. This can be done by running the following command within your project directory.
composer require devdojo/genesis dev-main
This command will download and register the Genesis package, which provides a set of pre-built features and front-end components for building applications quickly. Once the package is installed, you’ll need to publish the Genesis frontend assets to set up the basic UI structure. Run the following command to publish these assets.
php artisan ui genesis
Publishing the assets will generate all the necessary CSS, JavaScript, and view files, providing you with the foundational UI elements from the Genesis Starter Kit, including a ready-to-use authentication interface and other key UI components. Afterward, you'll need to install the required Node.js dependencies to handle these front-end assets. You can do so by running the following command.
npm install
Once the installation is complete, you can start the Vite development server with the following command.
npm run dev
Vite will automatically watch and compile your front-end assets in real-time, making it easier to build and test your application's UI. Keep the Vite server running to ensure that the assets are compiled and updated as you make changes to your front-end code. If you need to run Laravel commands or continue working in the terminal without interrupting the Vite process, open a new terminal window or tab, navigate back to your project directory, and proceed with the next steps in your development process.
Step # 4 : Migrate the Database.
To set up the database schema for your application with the Genesis Starter Kit, run the following migration command.
php artisan migrate
This command will apply the necessary migrations and create the required tables and relationships in your database for the Genesis package. When prompted, type yes to create the database if it hasn't been created already. Once the migration process completes, your database will be properly set up, allowing you to use the authentication and other features provided by Genesis.
Step # 5 : Test Your Application.
Start the Laravel development server by running the following command.
php artisan serve
Once the server is running, you can test the various authentication features of your Laravel application to ensure everything is set up correctly. Open your browser and visit the following URLs to access the authentication pages and verify that each one works as expected.
- Register: Visit /register to test the user registration functionality.
- Login: Go to /login to check if users can log in with the credentials they created.
- Logout: Navigate to /logout to ensure that logging out works properly.
- Forgot Password: Access /forgot-password to test the forgot password flow, making sure users can request a password reset.
- Reset Password: Head to /reset-password to test the process of resetting a password with a valid token.
- Email Verification: Visit /email/verify to check if email verification is triggered and users are directed to the correct page after registration.
- Resend Email Verification: Go to /email/resend to verify the functionality for resending the verification email.
- User Profile: Finally, visit /profile to check the user profile page and ensure it displays the authenticated user’s details.
These URLs represent the core authentication functionality provided by the Genesis Starter Kit in Laravel. Testing each of these pages will confirm that your application is properly set up and ready to handle user authentication, email verification, and profile management. If any issues arise, you’ll have a clear starting point for debugging and refining your application.
Conclusion
By following this guide, you've successfully set up a Laravel 10 application with the Genesis Starter Kit, including all essential authentication features such as registration, login, password reset, and email verification. Your project now includes a fully functional front-end UI, a configured database schema, and necessary authentication pages, all integrated seamlessly with the Genesis package. This setup provides a strong foundation for further customization and enhancement. With the basic structure in place, you can now focus on adding more advanced features, such as user profiles, custom email notifications, and other UI adjustments. As your project evolves, you can explore additional Laravel functionalities to expand the app further.
For more details, please refer to the official Genesis package documentation.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments