gerchavarin/laranuxt

laravel and nuxt.js boilerplate

Laravel + Nuxt.js Boilerplate

What is included

• NUXT for our PWA front end, a progressive Vue.js framework

  • @nuxtjs/axios to communicate with our API
  • @nuxtjs/proxy sending /api to Laravel
  • @nuxtjs/tailwindcss a utility-first framework
  • pug - high-performance template engine
  • mdi - material design icons with a ton of contributed ones as well

• Laravel - for our API

  • metapi - API helpers and utilities
  • debugbar - awesome debugbar for our API

Installation

• clone from github
• run composer storage to create all the needed storage folders
• run yarn and composer install to install all of your deps
• copy .env.example to .env and configure it to your likings
  • i do this to speed up reactivity and compilation time
• running yarn mdi will copy all the fonts and css to resources/static/
• run yarn logs to create laravels needed storage logs folders
• TL;DR git clone git@github.com:acidjazz/laranuxt.git; cd laranuxt; yarn; composer install; yarn mdi; cp .env.example .env; yarn logs;

Local environment

• run yarn api (alias for ./artisan serve) in another terminal for our laravel API
• run yarn dev in one terminal for our nuxt dev setup
• I've also included a simple byobu script that starts everything up, just change PROJECT to your project folder name

AWS configuration (WIP)

This boilerplate also includes scripts to help you use it as an Auto Scaling Group with a Launch Configuration

• You can find cloudinit-ami.sh in config/ which when configured and used as user-data will fire up an instance w/ the latest and all its dependencies to make an AMI
• You can find cloudinit-delploy.sh in config/ which when configured can be used with a Launch Configuration to spin up more instances when needed
• The following are stipulations for these scripts to work functionality
  • You start with the Amazon Linux 2 AMI
  • You have an s3 bucket holding your deploy keys and .env files, default to ${PROJECT}-vault
    • key would be in s3://${project}-vault/keys/ as id_rsa
    • envs would be in s3://${project}-vault/envs/ as env-${branch} (env-staging, env-master, etc)
• Using these configs nuxt.js will run on port 3000 and then Laravel will run on port 8000, you can make a Target Group for each of these sending 80 and/or 443 to 3000

CircleCI Testing and Deployment

This boilerplate also includes a sample starter script to run tests and then deploy to your group of instances

• This configuration works assuming your setup matches the above AWS config
• Your EC2 group must have a tag key of ssm and value of your branch/environment, either staging or master
• You can find, tweak, and use config/circleci-config.yml and move it to .circleci/config.yml when ready
• Upon successful tests, this will use the AWS SSM Agent to run yarn ${branch} on each instance which will:
  • Grab the latest code
  • Re-download your .env from the s3 bucket
  • Refresh the icons file
  • Re-generate the nuxt.js static files
  • Restart the pm2 server with the newer static files
  • Via composer, run artisn migrate, artisan config:clear, artisan cache:clear and composer install