Vuejs-Laranuxt: Laravel + Nuxt.js boilerplate @acidjazzLaravel + Nuxt.js boilerplate - by @acidjazz

Laravel + Nuxt.js Boilerplate

What is included

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 [email protected]: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

Comments

  • Error when running yarn dev
    Error when running yarn dev

    Oct 23, 2021

    I've followed the steps to install and run "yarn dev", but shows this error below. Please help:

    ERROR ERROR in client/components/header/HeaderUser.vue:9:7 20:31:13 TS2451: Cannot redeclare block-scoped variable 'ctx'. 7 | 8 |

    ERROR in client/components/header/ModalLogin.vue:75:7 TS2451: Cannot redeclare block-scoped variable 'ctx'. 73 | const emit = defineEmits(['off']) 74 |

    75 | const ctx = useContext() | ^^^ 76 | const email = ref('') 77 | const loading = reactive({ 78 | attempt: false,

    Reply
  • Bump follow-redirects from 1.14.6 to 1.14.7
    Bump follow-redirects from 1.14.6 to 1.14.7

    Jan 13, 2022

    Bumps follow-redirects from 1.14.6 to 1.14.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies javascript 
    Reply
  • css does not load if using production build
    css does not load if using production build

    Sep 13, 2020

    image app.css just returns error css from nuxt.

    Reply
  • nuxt v3 - auth module/plugin middleware
    nuxt v3 - auth module/plugin middleware

    Nov 22, 2021

    move loggedIn to a cookie check and stop there - properly respond to an access denied endpoint with removing the session and redirecting properly - keep the FE simple!

    Reply
  • Static Analyser
    Static Analyser

    Dec 28, 2021

    @acidjazz what's your take on adding phpstan?

    Reply
  • Setup GH Action to annotate Pull Requests with Larastan Code Analysis
    Setup GH Action to annotate Pull Requests with Larastan Code Analysis

    Jan 4, 2022

    In this PR we could prob combine lint-php.yml and the new larastan.yml workflow files but idk what do you think? Plus side of having its own way of identifying which action it came from like below:

    image

    Also added a .nvmrc so the proper node js gets used each time when opening for example iterated terminal in VS Code

    References issue #62

    Reply
  • Suggestion: Dont integrate nuxt code into resources directory
    Suggestion: Dont integrate nuxt code into resources directory

    Jul 17, 2019

    @acidjazz One suggestion here: Dont integrate nuxt code into resources directory Keeping the laravel resources directory kosher allows one to run as separate processes and involve different tech in separate directories - just to make it easier for anybody looking into this code to see where the boundaries are (it also makes managing deployments easier for example).

    Proposed folder structure:

    • laranuxt/ --> root folder, this has all the laravel code (folders like app, bootstrap, config, resources, etc).
    • laranuxt/client --> this has all the nuxt.js code (typically the 'client' folder doesnt exist in a laravel app) See how github.com/cretueusebiu/laravel-nuxt does this (though I dont like that they are using this module: https://github.com/nuxt-community/router-module)

    By extension, the nuxt.config.js and tailwind.config.js shouldn't be in the laravel config/ folder. Better if all front-end (nuxt) assets are in the same (proposed name: "client") directory.

    Reply
  • "Request failed with status code 404" in console

    Jul 17, 2019

    Thank you for this repo @acidjazz This one isn't a blocker in any way, the code still runs, but this is what I see when I run npm run dev (notice "Request failed with status code 404") Thought I would report it!

    $ npm run dev
    
    > [email protected] dev /Users/kunalpunjabi/Code/LARAVEL_WORKING_CODE/NUXT/laranuxt
    > nuxt config/
    
    ℹ postcss-preset-env stage is set to 1 for supporting advanced css features                                                                                                      nuxt:tailwindcss 21:46:07
    start Loading module                                                                                                                                                                nuxt-purgecss 21:46:07
    ℹ PurgeCSS is not enabled because you are in dev mode                                                                                                                               nuxt-purgecss 21:46:07
    
     WARN  Address localhost:3000 is already in use.                                                                                                                                                  21:46:08
    
    ℹ Trying a random port...                                                                                                                                                                         21:46:08
    
       ╭─────────────────────────────────────────────╮
       │                                             │
       │   Nuxt.js v2.8.1                            │
       │   Running in development mode (universal)   │
       │                                             │
       │   Listening on: http://localhost:49373/     │
       │                                             │
       ╰─────────────────────────────────────────────╯
    
    ℹ Preparing project for development                                                                                                                                                               21:46:12
    ℹ Initial build may take a while                                                                                                                                                                  21:46:12
    ✔ Builder initialized                                                                                                                                                                             21:46:12
    ✔ Nuxt files generated                                                                                                                                                                            21:46:12
    
    ✔ Client
      Compiled successfully in 14.42s
    
    ✔ Server
      Compiled successfully in 13.70s
    
    ℹ Waiting for file changes                                                                                                                                                                        21:46:31
    ℹ Memory usage: 241 MB (RSS: 323 MB)                                                                                                                                                              21:46:31
    
     ERROR  Request failed with status code 404                                                                                                                                                       21:46:38
    
      at createError (node_modules/axios/lib/core/createError.js:16:15)
      at settle (node_modules/axios/lib/core/settle.js:17:12)
      at IncomingMessage.handleStreamEnd (node_modules/axios/lib/adapters/http.js:237:11)
      at IncomingMessage.emit (events.js:187:15)
      at IncomingMessage.EventEmitter.emit (domain.js:442:20)
      at endReadableNT (_stream_readable.js:1094:12)
      at process._tickCallback (internal/process/next_tick.js:63:19)
    
    Reply