laravel + vue on lambda serverless using bref

Question

i have a laravel project which is mainly an API endpoints and i use vue.js for some pages currently it works on AWS EC2 instance perfectly, and i would like to move it to lambda to start working with a serverless architecture, i followed some tutorials and installed bref and deployed with serverless deploy now the APIs works perfectly on lambda but vue is not compiled

of course i tried npm run prod and dev also but still not compiled, when i inspect the page i see the vue component as <login-component/>

the serverless.yml is

service: serverless-test

provider:
  name: aws
  # The AWS region in which to deploy (us-east-1 is the default)
  region: us-east-1
  # The stage of the application, e.g. dev, production, staging… ('dev' is the default)
  stage: dev
  runtime: provided.al2

package:
  # Directories to exclude from deployment
  patterns:
    - '!node_modules/**'
    - '!tests/**'
    - '!README.md'
    - '!.git/**'
    - '!.idea/**'

functions:
  # This function runs the Laravel website/API
  web:
    handler: public/index.php
    timeout: 28 # in seconds (API Gateway has a timeout of 29 seconds)
    layers:
      - ${bref:layer.php-80-fpm}
    events:
      - httpApi: '*'
  # This function lets us run artisan commands in Lambda
  artisan:
    handler: artisan
    timeout: 120 # in seconds
    layers:
      - ${bref:layer.php-80} # PHP
      - ${bref:layer.console} # The "console" layer

plugins:
  # We need to include the Bref plugin
  - ./vendor/bref/bref

Answer 1

was solved by installing the serverless-lift plugin

serverless plugin install -n serverless-lift

as mentioned in the 'bref' Documents then compiling the assets before deploying as

npm run prod

then

serverless deploy

and now the new serverless.yml file looks like that

service: serverless-test


provider:
  name: aws
  # The AWS region in which to deploy (us-east-1 is the default)
  region: us-east-1
  # The stage of the application, e.g. dev, production, staging… ('dev' is the default)
  stage: dev
  runtime: provided.al2
  environment:
    # environment variable for Laravel
    FILESYSTEM_DISK: s3
    AWS_BUCKET: !Ref Storage
    APP_ENV: 'dev'
#    APP_DEBUG: false
  iam:
    role:
      statements:
        # Allow Lambda to read and write files in the S3 buckets
        - Effect: Allow
          Action: s3:*
          Resource:
            - !Sub '${Storage.Arn}' # the storage bucket
            - !Sub '${Storage.Arn}/*' # and everything inside

package:
  # Directories to exclude from deployment
  patterns:
    - '!node_modules/**'
    - '!public/storage'
    - '!resources/assets/**'
    - '!storage/**'
    - '!tests/**'

custom:
  lift:
    assets:
      path: public
      url: /

functions:
  # This function runs the Laravel website/API
  web:
    handler: public/index.php
    timeout: 28 # in seconds (API Gateway has a timeout of 29 seconds)
    layers:
      - ${bref:layer.php-80-fpm}
    events:
      - httpApi: '*'
  # This function lets us run artisan commands in Lambda
  artisan:
    handler: artisan
    timeout: 120 # in seconds
    layers:
      - ${bref:layer.php-80} # PHP
      - ${bref:layer.console} # The "console" layer

plugins:
  # We need to include the Bref plugin
  - ./vendor/bref/bref
  - serverless-lift

constructs:
  website:
    type: server-side-website
    assets:
      '/css/*': public/css
      '/js/*': public/js
      '/images/*': public/images
      # add here any file or directory that needs to be served from S3

resources:
  Resources:
    # Create our S3 storage bucket using CloudFormation
    Storage:
      Type: AWS::S3::Bucket