Laravel-Vue-EPA

This repository uses Laravel, Vue-CLI, and the OneEPA template alongside the US Web Design System (USWDS).

• Laravel is used for an API against a MySQL database (easily configurable to Postgres or another database)
• Vue-CLI is used for a front-end SPA which includes routing via Vue Router and state management via Vuex
• The development environment makes use of two local servers - one to host the Laravel API via Laragon (or another local PHP-based server), and one to host the Vue front-end via NodeJS
• The development environment enables CORS so the Vue server can successfully call the Laravel API
• The production build enables Laravel to host both the API and front-end, so only one PHP-based server is required for hosting

Pre-requisites

• Laragon or another local LAMP/LAPP/LEMP/LEPP server
  • If installing Laragon, make sure to at least include PHP and MySQL
• Composer
• NodeJS
• npm or yarn

To set up dev environment:

1. Clone this directory inside laragon/www (or your local server's file directory)
   • git clone https://github.com/dpgalloway/laravel-vue-cli new-app
2. Run composer install in the server directory
3. Run npm install in the client directory
4. Connect to your local MySQL server (Laragon comes with HeidiSQL for a MySQL GUI)
5. Create a new database
6. Copy contents of server/.env.example to server/.env
7. Run php artisan key:generate to generate secret key, which is automatically added to APP_KEY in the .env file
8. Set DB_DATABASE to your new database name
9. Run php artisan migrate to migrate the example items table
10. Run php artisan db:seed to seed example items
11. Create a .env file in the client directory
12. Add a VUE_APP_API_URL variable and set to your local Laravel server API URL (e.g., http://laravel.test/api, http://localhost:8000/api)
13. Run npm start to start the front-end development server

To build for production:

1. Run npm run build in the client directory

This builds the Vue front-end into static HTML/JS/CSS files, which Laravel automatically serves. Laravel is set up to automatically use the page routes defined in Vue Router.

Resources

• Laragon Download
• Laravel Docs
• Vue Docs
• US Web Design System Docs