mlabate / laravel6-vuejs-kickstarter

A Laravel 6 Single Page Application boilerplate using Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass, Pug and Jest

Laravel6 Vuejs Kickstarter

A Laravel 6 Single Page Application boilerplate using Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass and Pug with:

• A users CRUD if the current user is an admin written in RESTful and GraphQL.
• i18n for English, Portuguese and Spanish, based on browser language settings.
• Authentication using JWT.
• WebSockets with Laravel Echo and Pusher.
• Vue component tests using Jest and API tests using PHPUnit.
• Dockerfile configured with PHP 7.2, Node.js 12 and Composer, with MySQL and phpMyAdmin on Docker Compose.

Main dependencies

Front-end:

• Vue
• VueRouter
• Vuex
• vue-apollo
• Vue Auth
• vuex-i18n
• vue-awesome
• Bootstrap 4
• BootstrapVue
• TypeScript
• Pug
• Sass
• Laravel Echo
• Laravel Mix
• Jest

The TypeScript code tries to follow the Airbnb JavaScript Style Guide, the linters are already included and configured.

Back-end:

• Laravel
• Laravel GraphQL
• jwt-auth
• laravel-vue-i18n-generator
• PHPUnit
• Laravel Envoy

Steps to run it

Docker

Run:

docker-compose up --build

Just on the first time, after it starts run on another terminal:

docker exec laravel6-vuejs-kickstarter bash -c "composer update && composer start"
docker exec laravel6-vuejs-kickstarter bash -c "npm update && npm start"

The application will be available on http://localhost:8080 and the phpMyAdmin on http://localhost:8081

Manual

Rename the .env.example file to .env, and fill it with your local info, then:

Install PHP and JavaScript dependencies:

composer install
npm install

Generate Laravel keys:

php artisan key:generate

Generate JWT keys

php artisan jwt:secret

Generate i18n string for Vue, based on Laravel i18n files:

php artisan vue-i18n:generate

Migrate and seed the database:

php artisan migrate --seed

Compile all the front-end stuff:

npm run prod

Test:

composer test
npm test