For starters let's establish the following:
- Application name for this guide is
Stepz. This can be changed to whatever else, but it should be changed everywhere. - Application should be able to handle the following logic (Subject to change as dev goes on. Should be complex enough to hit a lot of scenarios and specific cases and need a lot of components which could be reused in other projects as well):
- A
User- can have multiple registeredCompanies- can have multipleRoles in the Application - Each
Rolecan have multiplePermissions Companiescan have subsidiary companies or temporary/permanent establishments of their own.- The
Users can CRUD information aboutAssets(equipment, etc.) - App should be able to store information about
Customers andContacts Usershould be able to makeInvoices and registerExpenses- Each
Invoice,Expense,BankStatementto be stored as file in Storage and coresponding model asAttachment - The
Usershould be able to record theTimes, and use the records when making theInvoice - The
Usershould be able to set upProjects
- A
- From the described logic we extract the application Models:
UserRolePermissionContactCustomerExpenseAttachmentInvoiceBankStatementTimerCompanyAssetProject
| Project | Status | Documentation |
|---|---|---|
| vue-router |  |
http://router.vuejs.org/ |
| vuex-router-sync |  |
vuex-router-sync |
First step, install a fresh Laravel instance
This can be done using
laravel new Stepz
or
composer create-project --prefer-dist laravel/laravel Stepz
Note: If we're already inside a folder
stepzwhere we want to install our project, we can simply runlaravel newto proceed with instalation.
Next step is to edit the .env file with the proper values for the application name, the credentials for connecting to the database and the default Mail driver to 'log':
APP_NAME=Stepz
DB_DATABASE=stepz
DB_USERNAME=root
DB_PASSWORD=
MAIL_DRIVER=log
Next step is to clean up the default scaffolding
php artisan preset none
This will clean some of the default package.json dependencies.
Next step is only to be done if needed, based on the development environment.
Laravel 5.4 made a change to the default database character set, and it’s now utf8mb4 which includes support for storing emojis. This only affects new applications and as long as you are running MySQL v5.7.7 and higher you do not need to do anything.
Edit app\Providers\AppServiceProvider.php
use Illuminate\Support\Facades\Schema;
public function boot()
{
// Schema::defaultStringLength(191); //Uncomment if needed
}Next step is to create app\Models folder
After that move app\User inside app\Models\ folder, and edit the namespace in app\Models\User.php to
namespace App\Models;Replace App\User with App\Models\User in:
config/auth.phpdatabase/factories/UserFactory.phpapp/Http/Controllers/Auth/RegisterController.php
Next step is to set up Laravel so that all newly created models go to the Models folder:
For that we run in terminal:
php artisan make:command ModelMakeCommand
This will create a new file in app\Console\Commands\ModelMakeCommand.php where we paste the following code:
<?php
namespace App\Console\Commands;
use Illuminate\Foundation\Console\ModelMakeCommand as Command;
class ModelMakeCommand extends Command
{
/**
* Get the default namespace for the class.
*
* @param string $rootNamespace
* @return string
*/
protected function getDefaultNamespace($rootNamespace)
{
return "{$rootNamespace}\Models";
}
}After that we need to overwrite the existing binding in the Service Container so our AppServiceProvider.php will look like below:
<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;
use App\Console\Commands\ModelMakeCommand;
class AppServiceProvider extends ServiceProvider
{
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
// Schema::defaultStringLength(191); //Uncomment if needed
}
/**
* Register any application services.
*
* @return void
*/
public function register()
{
$this->app->extend('command.model.make', function ($command, $app) {
return new ModelMakeCommand($app['files']);
});
}
}To test things out let's create our first custom model:
php artisan make:model Company -mrc
Note: adding
-mrcflag will create, besides the model, a migration and a resourceful controller.
Next step, because on a fresh installation we will update and rollback the database structure quite often, we need to create a user record to work with:
php artisan make:seeder UsersTableSeeder
This will create database\seeds\UsersTableSeeder.php where we will add the details for our user:
<?php
use Illuminate\Database\Seeder;
use App\Models\User;
class UsersTableSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
$user = new User;
$user->email = '[email protected]';
$user->password = bcrypt('password');
$user->name = 'John Doe';
$user->save();
}
}After that we will uncomment in database\seeds\DatabaseSeeder.php the following line:
$this->call(UsersTableSeeder::class);Note: Always remember to change these user / credentials in production.
Next step is to
- delete resources\views\welcome.blade.php,
- duplicate resources\views\layouts\app.blade.php into resources\views\layouts\guest.blade.php
- replace:
@extends('layouts.app')to
@extends('layouts.guest')in:
resources\views\auth\login.blade.phpresources\views\auth\register.blade.phpresources\views\auth\verify.blade.phpresources\views\auth\passwords\email.blade.phpresources\views\auth\passwords\reset.blade.php
Next step is to pull in the following packages through npm:
npm i vuex --save-dev
npm i vue-i18n --save-dev
# npm i vue-router --save-dev
# npm i vuex-router-sync --save-dev
Before starting structuring our javascript files and components we will configure an alias for webpack which will allow us to use @ instead of multiple ../ in order to properly set the path of some components. We can do that by adding the following to webpack.mix.js:
mix.webpackConfig({
resolve: {
extensions: ['.js', '.vue'],
alias: {
'@': path.resolve(__dirname, 'resources/js/')
}
}
});Let's now set up a basic file structure for the frontend:
In order to consume our laravel lang files also in the frontend and keep a single source of truth for all translations used in the App we will use the following package:
composer require martinlindhe/laravel-vue-i18n-generator
php artisan vendor:publish --provider="MartinLindhe\VueInternationalizationGenerator\GeneratorProvider"
The latest command will generate config\vue-i18n-generator.php where we will update the following line:
'jsFile' => '/resources/js/vue-i18n-locales.generated.js',to
'jsFile' => '/resources/js/plugins/vue-i18n-locales.generated.js',Next, we will need translated files for the laravel default lang files, which we could get from here: https://github.com/caouecs/Laravel-lang and place them in resources\lang\ only for the languages we would like our App to use.
Similarily we would copy the translations for Countries from https://github.com/umpirsky/country-list.
Now, each time we will make changes to the lang files, changes that would need to be reflected in the front side, we will use the following command to re-write the file that will be used by vue-i18n:
php artisan vue-i18n:generate