spa starter kit
Version 1.0.3
A highly opinionated Single Page Application starter kit built on top of Vue.js and Laravel.
This package contains two separate projects to act as a starting point for a Single Page Application: a Vue.js project (created with vue-cli + webpack template) and a Laravel 5.3 project.
They're not just freshly created projects but a fully working application that can be modified and expanded to become your own application.
The live demo can be found in https://spa.codecasts.rocks/.
Make sure you have installed Node and Yarn (latest versions) as well as PHP 7 and MySQL.
These commands will download the repository and prepare it for you.
git clone --depth 1 -b master [email protected]:codecasts/spa-starter-kit.git
cd spa-starter-kit
rm -rf ./.git/
git init
git add --all
git commit -m "init"
cd client && yarn && yarn run dev.composer install to install Laravel and third party packagestouch database/database.sqlite to create an empty database filecp .env.example .env to configure installationphp artisan key:generate to generate unique key for the projectphp artisan jwt:secret to generate unique key for the projectphp artisan migrate to create all the tablesphp artisan db:seed to fill the tables with fake dataphp artisan serve to serve application on localhost:8000Navigate to webservice folder and run the composer test script
$ composer testError handling is done globally by making use of Axios' interceptors. But you can still .catch() errors within components to perform actions related to that scope. See /client/src/plugins/http.js;
The same way error messages lives in one single component (/client/src/modules/general/alerts.vue) and their visibility is controlled by a Vuex property. So to show/hide messages it is just a matter of dispaching a Vuex action from within any component;
The spinner displayed during server requests (see top right close to user indentification) is also controlled by a Vuex property. The procedure to show/hide it is the same as outlined in the item 2 above;
routes and Vuex modules live close to the modules they work for. Always look for routes.js and store.js inside a module directory. See /client/src/modules/categories;
Important: Laravel project found in the directory webservice was modified beyond adding routes and controllers. For instance: the webservice/app/Exceptions/Handler.php was modified from its original version to return all exceptions to the client, not only HttpExceptions. Other changes are also in place. So our recommendation is to always use this project to build your own, instead of copying controllers and routes to a new project.
git checkout -b feature/my-new-featuregit commit -am 'Add some feature'git push origin feature/my-new-featureFábio Vedovelli and dedicated contributors.
Licensed under the MIT license.
