Getting Started

Laraspace is an Admin starter template for Laravel 5.7 PHP Framework which includes all the necessary boilerplate for your next web application.

Requirements:

Laraspace has the same requirements that Laravel does but we have mentioned them below anyway for your reference.

Server Requirements:
Optional Requirements:
Suggested Dev Environments:
Directory Structure:

We haven't made any changes to the current directory structure of laravel to make it easier for you to get started with Laraspace.

Blade Views Directory Structure
  • admin : Admin Views
    • dashboard : Dashboard views
    • layouts : All Master layout files and Partials like header, footer , etc
    • pages : Demo view files for Preview
    • sessions : Login & Register views
    • settings : Setting views
    • users : UserList view and show view
  • front : Frontend Views
Installation:
  1. Clone or Download the Laraspace repository from: http://github.com/laraspace/laraspace
  2. Unzip the downloaded folder.
  3. Using your preferred terminal , go to the laraspace folder and run the following command to set a random secure Application Key php artisan key:generate
  4. Open .env file in your favorite text editor and set the database credentials.
  5. Open database/seeds/UsersTableSeeder.php and change the admin's email & password to your preference.
  6. php artisan migrate --seed run this command to migrate & seed the database. ( Make sure that you're inside the app's root directory )
  7. Install NPM globally if you haven't installed that already , for more information please refer this link
  8. After installing NPM globally , run npm install inside your webroot , it will download all the required dependencies.
  9. Laraspace makes use of Laravel Elixir for compiling sass files and js files (browserify). You can use Laraspace without installing npm dependencies but it is recommended for developers to use the suggested workflow for the best performance.
  10. You are ready to launch!

Sass Workflow

All Laraspace Sass files are located in resources/assets/admin/sass folder.
note: You can remove the components which you're not gonna use inside your project to reduce the filesize.

Laraspace css files compiled output location : public/assets/admin/css/laraspace.css

Directory & File Structure for SASS
  • layouts : Styles for Laraspace layout
  • pages : Specific page styles
  • components : styles for components like buttons , cards & tabs
  • partials : styles for layout partials , i.e header , footer & sidebar
  • skins : Specific styles for all the skins
  • laraspace.scss : main entry point of all sass files.
  • variables.scss : main config file
  • base.scss : base styles for Laraspace
  • demo.scss : styles for demo , you can remove the reference to this file.

Vuejs Workflow

Laraspace supports VueJS but if you don't wish to include VueJS in your project then its perfectly fine because its optional. If you haven't heard about VueJS then you learn more about it here

We have used Webpack to bundle up the VueJs files using Laravel Mix. You can check out webpack.mix.js for underlying code.

All Laraspace VueJS files are located in resources/assets/admin/js folder.

Directory & File Structure for VueJS
  • components : Vue Components
  • pages : This directory contains all the files which are supposed to be bundled up for specific pages which require VueJS
Compiling Assets

Laraspace uses Laravel mix for compiling all the plugins & dashboard's assets. Below is a list of commands you can use :

npm run dev :
Compile assets without watch
npm run watch :
Compile assets and watch the files for changes
npm run hot :
Compile assets and watch the files with Hot-Module-Reload enabled
npm run production :
Compile assets for production with code minification & set the NODE_ENV to production

You can read more about Laravel Mix here.

Validation

Laraspace provides an easy way to validate on client side & server side.

Client Side Validation:

You can check public/assets/admin/js/pages/validation.js for information on client side validation. You can copy the above file and edit the rules object according to your needs.

To checkout all the rules available , please visit this link

Server Side Validation:

Laraspace automatically shows the errors on a failed validation. All you need to do is add your validation rules to the Form Request Validation File. laraspace-notifs.blade.php is the file responsible for throwing validation errors by default. If you wish to customize how the validations are displayed or remove them completely, then this is the file you should be looking at.

Notifications

To show notifications to a user from backend, for example : when a user gets registered or a new post has been created. You can just use following functions:

flash()->success('You have Logged in Successfully.');
flash()->warning('Something is wrong.');
flash()->error('Validation Error');
flash()->info('Laraspace is Awesome!');

Laraspace uses Toastr as a default notification driver but if you wish to change then you can edit the following config file : config/laraspace.php

Plugins Custom JS/CSS Files

All the plugins are stored in resources/assets/plugins. You can include any required plugin in your frontend or admin as they are stored on a location which can be accessed easily by both.

To add a plugin into backend you can do the following:

  1. Create a directory in resources/assets/plugins with your plugin name
  2. Add the js files into webpack.mix.js
  3. Add the .scss file to resources/assets/admin/sass/laraspace.scss.
    Note : CSS files cannot be imported in sass files. Thus If the plugin does not contain a sass file then you can just paste the styles into your custom .scss file.
  4. run npm run webpack command to merge the added JS files and compile the SASS files.

Settings API

Laraspace has Site Settings Built-in , thus you can use the Setting Model Facade to get the current settings and set new settings for your site.

Add New Setting
Setting::set('facebook_link','http://facebook.com/laraspace');
Get existing Setting
Setting::get('facebook_link'); // returns "http://facebook.com/laraspace"

You can also use get_setting() helper function to get the setting value inside any of your views.

Helpers

We have provided some helper functions to make your development easier.

Customization

If you're familiar with Laravel then it will be very easy for you to get started with Laraspace because we haven't touched any Laravel vendor file. Laraspace is just built using standard Laravel components like Controllers , Middlewares ,etc thus you can customize it according to your needs.

Skins

Laraspace now ships with 6 different Skins :

To change the skin of your application just add the class "skin-{skin-name}" to the <body> tag inside your specific master layout file.

For example : <body class="skin-tyrell">

Social Auth

Create new Developer App keys for Facebook, Google and Github and paste the required keys in below code to .env file

FACEBOOK_CLIENT_ID=
FACEBOOK_CLIENT_SECRET=
FACEBOOK_REDIRECT_URL=http://{your-app-url}/auth/facebook/callback

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_REDIRECT_URL=http://{your-app-url}/auth/google/callback

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GITHUB_REDIRECT_URL=http://{your-app-url}/auth/github/callback

Starter Kit

Starter Kit does not contain any Preview/Demo view files & routes thus you can easily get started with your own project in no time.

You can convert the project to Starter Kit by running this command : php artisan laraspace:clean

This command deletes the demo files from the project permanently. If you wish to exclude any particular file or folder then you can do that on config/laraspace.php file.