My personal How Did I...?

Table of contents

• General info
• Packages Used
• Let's get it started
• What's next?

General Info

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 registered Companies - can have multiple Roles in the Application
  • Each Role can have multiple Permissions
  • Companies can have subsidiary companies or temporary/permanent establishments of their own.
  • The Users can CRUD information about Assets (equipment, etc.)
  • App should be able to store information about Customers and Contacts
  • User should be able to make Invoices and register Expenses
  • Each Invoice, Expense, BankStatement to be stored as file in Storage and coresponding model as Attachment
  • The User should be able to record the Times, and use the records when making the Invoice
  • The User should be able to set up Projects
• From the described logic we extract the application Models:
  • User
  • Role
  • Permission
  • Contact
  • Customer
  • Expense
  • Attachment
  • Invoice
  • BankStatement
  • Timer
  • Company
  • Asset
  • Project

Packages Used

Project	Status	Documentation
laravel		https://laravel.com/docs
laravel-ui		https://laravel.com/docs/6.x/frontend
vue		https://vuejs.org/
vuex		https://vuex.vuejs.org
laravel-vue-i18n-generator		laravel-vue-i18n-generator

Might get back to using:

Project	Status	Documentation
vue-router		http://router.vuejs.org/
vuex-router-sync		vuex-router-sync

Let's get it started

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 stepz where we want to install our project, we can simply run laravel new to 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.php
• database/factories/UserFactory.php
• app/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 -mrc flag 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 = 'admin@example.com';
        $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.php
• resources\views\auth\register.blade.php
• resources\views\auth\verify.blade.php
• resources\views\auth\passwords\email.blade.php
• resources\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

What's Next?

• https://webpack.js.org/api/module-methods/#magic-comments
• https://medium.com/front-end-weekly/webpack-and-dynamic-imports-doing-it-right-72549ff49234