Getting Started

Laraspace is an Admin starter template for Laravel 5.4 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:
Other Requirements:
Suggested Dev Environments:
Installation:
  1. Unzip the downloaded folder.
  2. Now, copy the Application directory to your web root
  3. Using your preferred terminal , go to the copied folder and run the following command to set a random secure Application Key php artisan key:generate
  4. Open database/seeds/UsersTableSeeder.php and change the admin's email & password to your preference.
  5. Open .env file in your favorite text editor and set the database credentials.
  6. php artisan migrate --seed run this command for migrating & seeding the database inside your app folder.
  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. You are ready to launch!

Vuejs Workflow

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/js folder.

Directory & File Structure for VueJS
  • components : All the Vue Components
  • helpers : Helper files provided by default
  • services : Services provided by default
  • views : View components
  • app.js : Main javascript entry file for our App
  • bootstrap.js : JS File to Bootstrap all the required plugins & config
  • router.js : Main Router File
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 webpack :
Compile assets without watch
npm run dev :
Compile assets and watch the files for changes
npm run hmr :
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.

Sass Workflow

All Laraspace Sass files are located in resources/assets/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/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
  • 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.

Notifications

You can use Toastr & Notie Jquery plugins included in Laraspace by default for firing Notifications in your Vue Components. You can check the examples in resources/assets/js/pages/components/Notifications.vue file.

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/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.

Vue :
Laravel :

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 app.blade.php file.

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