Skip to content

g0ld3lux/laravel-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Laravel Starter For SPA and REST API

Laravel as Api Back End

Vue and Element For Front END

Implements the Following

  • Uses Laravel Version [5.4]

  • Uses Vue Version [2.2]

  • Uses Various ES6 Presets (.babelrc)

  • ES Lint Ready (.eslintrc and styleint.config.js)

  • Uses Element for UI

  • Vuex State Management Ready

  • SPA Using Vue Router

  • JWT Auth (auth_scaffold : login,signup, recover,reset)

  • Dingo Api (REST API)

  • ACL Ready using Bouncer

  • Webpack / Laravel Mix For Asset Management

  • CORS

  • Vue Server Side Rendering

Dev Machine Requirements :

  • Prefered OS Windows 10/Linux/MacOS

  • Terminal: WSL Bash on Ubuntu or Mintty

  • VSCODE for Various Extension to help us In Our Development

List of VSCODE Extensions

  • Auto Rename Tag

  • Docker

  • ESLint

  • HTML Class Suggestions

  • HTML CSS Support

  • HTML Snippets

  • Instant Markdown

  • ES6 Snippets

  • Laravel 5 Snippets

  • Laravel Blade Snippets

  • Material Theme

  • Vetur

  • VueHelper

  • Windows Docker Native for Easily provisioning Servers

Installation

Install all Dependencies

git clone https://github.com/g0ld3lux/laravel-starter
composer install
npm install
php artisan key:generate
php artisan jwt:generate

Setting Your .env

Note You May Choose 3 types of .env file

  • .env.dev - basic (no need db uses sqlite, logs, filesystem)

    Note: You Only Need to Set Here Your Mail Driver Preferabbly Mailtrap.io

  • .env.production - (all important ENV var is here that you need to set up in your production)

  • .env.docker - if your using laradock or docker RECOMMENDED

Running Using the Basic .env.dev

Add Your Mailtrap Credentials in .env

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=
MAIL_PASSWORD=

Create Database in Sqlite

  • Go to Database folder then
touch database.sqlite

Log in Sqlite

sqlite3 database.sqlite

Migrate and Seed

php artisan migrate --seed

Serve Site on localhost:8000

php artisan serve

Your Api End Point

localhost:8000/api/*

Dev Workflow

  • Note : I Assume you have NODE in your Machine as well as NPM

Enable BrowserSync

npm run watch or npm run watch poll

Enable Hot Reloading & Browserync

npm run hot

Visit Site

localhost:3000 or laravel.dev:3000

Laradock Workflow

Folder Structuring

code
- laradock
- api

Setting Your App Folder

  • Edit docker-compose.yml
 applications:
        image: tianon/true
        volumes:

        - ../api/:/var/www/api //<-- Add Your Site Folder to be Shared

Configuring Nginx

  • Go to laradock/nginx/sites
cp sample.conf.example api.laravel.conf

Edit it to use api and laravel.dev as your Site Domain

server {

    listen 80;
    listen [::]:80;

    server_name api.laravel.dev laravel.dev;  // <-- Our App Domain
    root /var/www/api/public;  //<-- Our App Root Folder
    index index.php index.html index.htm;

    location / {
         try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        try_files $uri /index.php =404;
        fastcgi_pass php-upstream;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.ht {
        deny all;
    }
}

Starting Server

docker-compose up -d nginx redis mysql beanstalkd

Setting ENV

  • Use a .env.docker as your .env

Task Scheduler

  • Go to this folder
workspace/crontab/root

And Add your Cron Job

* * * * * php /var/www/api/artisan schedule:run >> /dev/null 2>&1

Accessing Containers

SSH to Container Name

docker exec -it laradock_workspace_1
docker exec -it laradock_mysql_1
docker exec -it laradock_redis_1

Install PHP Quer Driver Extension at Workspace Container

  • At your App folder
composer require pda/pheanstalk

Install Redis Driver Extension at Workspace Container

  • At your App folder
composer require predis/predis

Migration at Workspace Container

  • At your App folder
php artisan tinker

Extras

Since it is Configure for laravel.dev/api/* for the basic .env.dev

just remove that route

// api/* ->remove this 
  • editing hosts file
127.0.0.1 laravel.dev
127.0.0.1 api.laravel.dev
  • creating DB inside a Docker Container
docker exec -it laradock_mysql_1
mysql -u root -p
password: root
create database api;
exit

Visit Site and Api Endpoints

laravel.dev
api.laravel.dev

Use Post Man To Test Endpoint

  • Open Postman

  • add to header ,where YOUR_SUBTYPE is define in our .env (Use for Accessing Specific Api Version)

Accept: application/vnd.YOUR_SUBTYPE.v1+json
  • Make Post Request to login
http://api.laravel.dev/auth/login
  • Add to Body
email = admin@laravel.dev
password = password
  • You will see Response something like this
{
  "status": "ok",
  "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEsImlzcyI6Imh0dHA6XC9cL2FwaS5sYXJhdmVsLmRldlwvYXV0aFwvbG9naW4iLCJpYXQiOjE0ODkzMzI1OTcsImV4cCI6MTQ4OTM5NzM5NywibmJmIjoxNDg5MzMyNTk3LCJqdGkiOiJjODMxNTMzZjkzMGFiOTkzMGExMzhkMGNkOTI5NGI3ZCJ9.3v-cGtXA-ySmL67pp4kZ4U4Mf3v7ge_CzUEdWIRKSeM"
}
  • Returning a response with cookie

Note: our SESSION_DOMAIN=.laravel.dev


$name = 'samplecookie';
$value = 'my-cookie';
$minutes = 60;
$path = '/';
$domain = 'api.laravel.dev';
$secure = false;
$httpOnly =false;
return response()
->json([
    'status' => 'ok',
    'token' => $token,
    'firstName' => $firstname,
    'lastName' => $lastname,
    'email' => $email
])->header('Authorization','Bearer ' . $token)
->withCookie($name, $value, $minutes, $path, $domain, $secure, $httpOnly);

STATE MANAGEMENT (VUEX)

To Enable Namespacing with Vuex add namespace in store module object

namespaced: true

Maping With Vuex in Components with Module Namespacing

computed: {
  ...mapState('account', {
    firstName: state => state.firstName,
    lastName: state => state.lastName,
    email: state => state.email
  })
},
methods: {
  ...mapActions('account', [
    'login'
  ])
}