New Project

Install Laravel

Terminal

laravel new {project-name}

Configure Homestead

Homestead.yaml

folders: 
    - map: ~/code/laravel/{project-name}
      to: /home/vagrant/code/{project-name}
      
sites:
    - map: {project-name}.test
      to: /home/vagrant/code/{project-name}/public
      
databases:
    - {project-name}_db

Terminal

sudo nano /etc/hosts

...
192.168.10.10 {project-name}.test

homestead up --provision

cd ~/code/laravel/{project-name}

composer install

Mailtrap

.env

Add mailtrap config info to .env file

Front-end Scaffolding

Terminal

composer require laravel/ui

php artisan ui vue --auth

npm install && npm run dev

Add API Auth

database/migrations/**_create_users_table.php

...
$table->string('api_token', 80)
    ->unique()
    ->nullable()
    ->default(null);
...

database/factories/UserFactory.php

...
'api_token' => str_random(80),

app/Http/Controllers/Auth/RegisterController.php

...
'api_token' => Str::random(80),

First Migration

Terminal on vm

php artisan migrate

Set Up Testing

phpunit.xml

...
<env name="DB_CONNECTION" value="sqlite"/>
<env name="DB_DATABASE" value=":memory:"/>

tests/TestCase.php

public function setUp(): void
{
    parent::setUp();

    $this->artisan('migrate:fresh');
    $this->artisan('db:seed');
}

protected function signIn($user = null)
{
    $user = $user ?: factory('App\User')->create();

    $this->actingAs($user);

    return $user;
}

Tailwindcss

Terminal

npm install tailwindcss

npm install tailwindcss-plugins

npm install laravel-mix-purgecss

npm tailwind init --full

resources/sass/app.scss

// Tailwind
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind screens;

webpack.mix.js

...
const glob = require('glob-all');
require('laravel-mix-purgecss');

let tailwind = require('tailwindcss');

...

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
    processCssUrls: false,
    postCss: [ tailwindcss('tailwind.config.js') ],
})
.purgeCss({
    paths: glob.sync([
        path.join(__dirname, "resources/views/**/*.blade.php"),
        path.join(__dirname, "resources/assets/js/**/*.vue")
      ]),
      extractors: [
        {
          extractor: TailwindExtractor,
          extensions: ["html", "js", "php", "vue"]
        }
      ],
      whitelist: [],
});

if (mix.inProduction()) {
   mix.sourceMaps().version();
}

Terminal

npm run dev

Fontawesome

Terminal

npm install @fortawesome/fontawesome-free

resources/sass/app.scss

// Font Awesome
$fa-font-path: '/fonts/font-awesome';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

webpack.mix.js

...
mix.copy('./node_modules/@fortawesome/fontawesome-free/webfonts/**', 'public/fonts/font-awesome');
...

Terminal

npm run production

resources/views/layouts/app.blade.php

...
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
...