Genesis is a Laravel Starter Kit that utilizes the TALL Stack as well as single-file Volt and Folio files. This starter kit contains Authentication, User Dashboard, Edit Profile, and a set of UI Components.
It will be beneficial to have a good understanding of the following technologies (which Genesis is built upon):
Learn how to install and configure Geneses below.
This preset is intended to be installed into a fresh Laravel application.
Currently Folio, Volt, and Livewire are still in Beta, so for that reason you'll need to set your minimum-stability to dev, by finding the following line inside of your
composer.json
file"minimum-stability": "stable",
and replace with"minimum-stability": "dev",
After creating a new Laravel application (and updating the minimum-stability) you can install Genesis with the following commands:
composer require devdojo/genesis dev-main
php artisan ui genesis
npm install
npm run dev
Finally, you'll want to connect a database inside of your application .env
file and run the following migrations:
php artisan migrate
Visit your application homepage and you should be good to go 🤘
Currently Genesis creates 10 routes including the homepage, authentication, dashboard view, and a few others. You can see all the routes currently in your application by using the php artisan folio:list
command:
GET / ................................................ index.blade.php
GET /auth/login ................................. auth/login.blade.php
GET /auth/password/confirm ........... auth/password/confirm.blade.php
GET /auth/password/reset ............... auth/password/reset.blade.php
GET /auth/password/{token} ........... auth/password/[token].blade.php
GET /auth/register ........................... auth/register.blade.php
GET /auth/verify ............................... auth/verify.blade.php
GET /dashboard ............................. dashboard/index.blade.php
GET /learn ..................................... learn/index.blade.php
GET /profile/edit ............................. profile/edit.blade.php
Showing [10] routes
Let's cover each of the pages provided by Genesis.
The homepage (screenshot shown above 👆) is located at resources/views/pages/index.blade.php
. This file as well as all the other pages are utilizing Page-based routing thanks to Folio.
This file contains a middleware redirect-to-dashboard
which is registered at the top of the file:
middleware(['redirect-to-dashboard']);
This will redirect an authenticated user to the dashboard when they try and visit the homepage. You can simply remove this line if you do not wich to redirect the authenticated user.
All the authentication files are located inside of the resources/views/pages/auth
folder. These files are mapped to routes thanks to Folio. Here are the current authentication routes:
- login.blade.php
- register.blade.php
- verify.blade.php
- password/confirm.blade.php
- password/reset.blade.php
- password/[token].blade.php
The dashboard page is very minimal which makes it very easy for you to customize. You'll notice that this page has the following middleware:
middleware(['auth', 'verified']);
You will probably want to add this middleware to many of your application pages where you want to make sure that the user is authenticated and verified.
The edit profile page is located at resources/views/profile/edit
, and it can also be loaded by visiting url.com/profile/edit
. This file contains the same middleware as the dashboard page, which means that users must be authenticated and verified before visiting.
This page has three different sections
- Update profile section where users can update the name and email in their profile.
- Update password section where users can update their password.
- Delete profile section where users can delete their profile.
To learn more about this file, visit the documentation in the Wiki here.
This page displays the Genesis Readme file. It simply fetches the README.md file that you are reading right now and displays it in the dashboard.
Currently there are two layouts which are located inside of resources/views/components/layouts
:
- app.blade.php - This is the main layout for your application
- dashboard.blade.php - This is the dashboard layout which also extends the app layout.
You can use these layouts as follows:
<!-- App Layout -->
<x-layouts.app>
<!-- content here... -->
</x-layouts.app>
<!-- Dashboard Layout -->
<x-layouts.dashboard>
<!-- content here... -->
</x-layouts.dashboard>
We are also providing a handful of Blade Components that you can use in your new application which are located inside of resources/views/components/ui
. These components include:
- button.blade.php
- checkbox.blade.php
- input.blade.php
- link.blade.php
- logo.blade.php
- modal.blade.php
- nav.blade.php
- placeholder.blade.php
- text-link.blade.php
These elements are pretty self-explanatory; however, you may want to look into how each one works so that way you can get the most out of it.
Updating the logo throughout your application is as easy as updating the logo.blade.php component with your logo SVG or image.
Genesis has some basic tests to test out the authentication functionality. You can check those tests by running the following command:
./vendor/bin/pest
Every test inside the tests/Feature
folder has a test file that corresponds to each page in the resources/views/pages
folder.
There may be times where you'll see Line numbers printed out in the view causing a weird layout and output. You'll want to run php artisan view:clear
. This is probably due to the fact that Folio and Volt are still in Beta 😉
If you are seeing an error on http://localhost:5173 try:
npm upgrade
APP_URL will be set differently according to how you install laravel. Some might use the laravel installer some may use composer. Vite will is serving on http://localhost:5173 while other parts of the app are using http://[::1]:5173.
For best results try this:
composer create-project --prefer-dist laravel/laravel genesis-app
then change your APP_URL in your .env:
APP_URL=http://127.0.0.1:8000
then start the npm server and laravel servers:
npm run dev
php artisan serve
The MIT License (MIT). Please see License File for more information.