Sample Single Page Application using Laravel 5 & Vue2 + Vuex + Vue-Router
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app Optimized imports Feb 23, 2018
bootstrap Upgraded to Laravel 5.4, Vue 2.4.2, other latest packages, fixed mult… Aug 19, 2017
config Upgraded Laravel to 5.6 Jul 24, 2018
cypress Fixed Cypress entries tests Jul 4, 2018
database Added cleaned up database seeder Aug 19, 2017
docker Added Docker support for development May 11, 2018
public Updated some missed files Jun 11, 2018
resources Fixed github menu item Aug 1, 2018
routes Upgraded to Laravel 5.4, Vue 2.4.2, other latest packages, fixed mult… Aug 19, 2017
storage Initial Dec 12, 2016
tests Upgraded Laravel to 5.6 Jul 24, 2018
.babelrc Upgraded to Laravel 5.4, Vue 2.4.2, other latest packages, fixed mult… Aug 19, 2017
.env.docker.example Renamed project Jun 11, 2018
.env.example Renamed project Jun 11, 2018
.env.travis Added Travis integration Oct 24, 2017
.eslintrc.js Integrated Eslint code standard checks, fixed code standard in all JS… Dec 23, 2017
.gitattributes Upgraded to Laravel 5.4, Vue 2.4.2, other latest packages, fixed mult… Aug 19, 2017
.gitignore Added pretty printer to Phpunit May 10, 2018
.travis.yml Added missing passport:install for travis Oct 24, 2017
Dockerfile Added Docker support for development May 11, 2018
LICENSE.md Upgraded to Laravel 5.4, Vue 2.4.2, other latest packages, fixed mult… Aug 19, 2017
_ide_helper.php Upgraded to Laravel 5.5, upgraded NPM dependencies, cleaned up app co… Nov 11, 2017
artisan Initial Dec 12, 2016
composer.json Upgraded Laravel to 5.6 Jul 24, 2018
composer.lock Upgraded Laravel to 5.6 Jul 24, 2018
cypress.json Some fixes for Nightwatch, integrated Cypress tests Sep 29, 2017
docker-compose.yml Renamed project Jun 11, 2018
package.json Upgraded Cypress, removed Nightwatch Jul 4, 2018
phpunit.xml Added pretty printer to Phpunit May 10, 2018
readme.md Upgraded Laravel to 5.6 Jul 24, 2018
server.php Initial Dec 12, 2016
webpack.mix.js Replaced vue-resource with axios Mar 19, 2018
yarn.lock Upgraded npm dependencies Jul 24, 2018

readme.md

Build Status

Laravel 5.6 & Vue.js 2.5 + Vuex Sample Project

Laravel & Vue Sample Project is a tutorial Single Page Application (SPA) for Laravel 5.6 and Vue.js 2.5 Frontend

Demo

Use login: user@gmail.com and password: 123456

Installation

git clone https://github.com/vedmant/running-time.git # To clone repo
cd running-time
composer install # Install php dependencies

# Prepare enviroment variables
cp .env.example .env # Copy configuration file
php artisan key:generate # Generate unique key

# Prepare database
touch database/database.sqlite # Create sqlite database
php artisan migrate --seed # Create DB Schema and seed sample data
php artisan passport:install # Install Passport

# Compile assets
yarn # Install Javascript dependencies
yarn prod # Compile assets

# Start server
php artisan serve # Start server

Open http://localhost:8000 to view site

If you don't have installed yarn, run npm install -g yarn

Main features

  • Fully separate Backend and Frontend
  • Authentication based on Laravel Passport
  • List pages with filters and CRUD editing
  • Backend validation
  • Admin panel
  • Simple widgets
  • Simple reports
  • Full Phpunit test coverage
  • E2E tests with Cypress
  • Continuous integration with Travis CI
  • Development configuration with Docker

Includes

Other Features

  • Front page
  • Authentication (registration, login, logout, throttle)
  • Users roles: administrator (all access), manager (manage records)
  • User dashborad with widgets and charts
  • Entries list with filter by date (list, show, edit, delete, create)
  • Report page with chart
  • User profile page
  • Admin dashboard with widgets
  • Users admin (list, show, edit, delete, create)
  • Entries admin (list, show, edit, delete, create)
  • Global loader overlay for all requests
  • Eslint code standard check
  • Lodash-es to allow tree shaking for bundle size optimization

Development

To run convenient development server with hot reloading:

php artisan serve # Will serve backend on localhost:8000
yarn hot # Will serve frontend on loaclhost:8080 and proxy api requests to localhost:8000

And open http://localhost:8080

Alternatively you can use watch method:

yarn watch

And open http://localhost:8000

To compile assets for production run:

yarn prod

# Or to display bundle analyzer run:
yarn production -- --env.analyzer true

Development with Docker

If you want to use more features like Redis queues, MariaDB database, sending and viewing sent emails you can use Docker setup on this project.

For you you will need Docker installed on your host https://docs.docker.com/install/

To build the image for Docker, run:

docker-compose build

It will build all images and run all needed containers.

Then use ENV variables, prepared specificly for Docker:

cp .env.docker.example .env
docker-compose run php php artisan key:generate

Migrate and seed database, and install Passport:

 docker-compose run php php artisan migrate --seed
 docker-compose run php php artisan passport:install

To run the project in Docker just run:

docker-compose up

And open http://localhost:8080

To run all the Artisan or Test commands you can use docker-compose run php before the command to run it in the container. If you want to run command in currently running container, use docker-compose exec php.

Tests

To run all PHPUnit tests:

./vendor/bin/phpunit 
# Or
yarn test

To run Cypress E2E tests:

php artisan serve
yarn e2e-run
# Or you can open GUI with
yarn e2e

Demo Credentials

For testing application the database is seeded with sample users:

TODO

  • Upgrade Bootstrap to v4
  • Setup Travis to run Cypress tests
  • Add more E2E cypress tests

License

And of course:

MIT