All Projects β†’ tonyfromundefined β†’ Nuxt Serverless

tonyfromundefined / Nuxt Serverless

Nuxt.js Serverless SSR Starter on AWS (Lambda + API Gateway + S3) with Serverless Framework

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to Nuxt Serverless

Retinal
πŸ™ Retinal is a Serverless AWS Lambda service for resizing images on-demand or event-triggered
Stars: ✭ 208 (-11.49%)
Mutual labels:  aws, aws-lambda, serverless-framework, aws-s3
Serverless Docker Image Resize
Simple serverless image resize on-the-fly - Deploy with one command - Built with AWS Lambda and S3
Stars: ✭ 114 (-51.49%)
Mutual labels:  aws, aws-lambda, serverless-framework, aws-s3
Aws Lambda Typescript
This sample uses the Serverless Application Framework to implement an AWS Lambda function in TypeScript, deploy it via CloudFormation, publish it through API Gateway to a custom domain registered on Route53, and document it with Swagger.
Stars: ✭ 228 (-2.98%)
Mutual labels:  aws, aws-lambda, serverless-framework
Serverless Sam
Serverless framework plugin to export AWS SAM templates for a service
Stars: ✭ 143 (-39.15%)
Mutual labels:  aws, aws-lambda, serverless-framework
Awsmobile Cli
CLI experience for Frontend developers in the JavaScript ecosystem.
Stars: ✭ 147 (-37.45%)
Mutual labels:  aws, aws-lambda, aws-s3
Awesome Layers
Ξ» A curated list of awesome AWS Lambda Layers. Sponsored by https://cloudash.dev
Stars: ✭ 1,655 (+604.26%)
Mutual labels:  aws, aws-lambda, serverless-framework
Serverless Architectures Aws
The code repository for the Serverless Architectures on AWS book
Stars: ✭ 120 (-48.94%)
Mutual labels:  aws, aws-lambda, serverless-framework
Serverless Sentry Plugin
This plugin adds automatic forwarding of errors and exceptions to Sentry (https://sentry.io) and Serverless (https://serverless.com)
Stars: ✭ 146 (-37.87%)
Mutual labels:  aws, aws-lambda, serverless-framework
Smart Security Camera
A Pi Zero and Motion based webcamera that forwards images to Amazon Web Services for Image Processing
Stars: ✭ 103 (-56.17%)
Mutual labels:  aws, aws-lambda, aws-s3
Cartoonify
Deploy and scale serverless machine learning app - in 4 steps.
Stars: ✭ 157 (-33.19%)
Mutual labels:  aws, aws-lambda, serverless-framework
Serverless Next.js
⚑ Deploy your Next.js apps on AWS Lambda@Edge via Serverless Components
Stars: ✭ 2,977 (+1166.81%)
Mutual labels:  aws, aws-lambda, serverless-framework
Serverless Aws Alias
Alias support for Serverless 1.x
Stars: ✭ 171 (-27.23%)
Mutual labels:  aws, aws-lambda, serverless-framework
Serverless
⚑ Serverless Framework – Build web, mobile and IoT applications with serverless architectures using AWS Lambda, Azure Functions, Google CloudFunctions & more! –
Stars: ✭ 41,584 (+17595.32%)
Mutual labels:  aws, aws-lambda, serverless-framework
Shadowreader
Serverless load testing for replaying website traffic. Powered by AWS Lambda.
Stars: ✭ 138 (-41.28%)
Mutual labels:  aws, aws-lambda, aws-s3
Serverless Image Processor
AWS Lambda image processor
Stars: ✭ 106 (-54.89%)
Mutual labels:  aws, aws-lambda, aws-s3
Components
The Serverless Framework's new infrastructure provisioning technology β€” Build, compose, & deploy serverless apps in seconds...
Stars: ✭ 2,259 (+861.28%)
Mutual labels:  aws, aws-lambda, serverless-framework
Serverless Plugin Git Variables
⚑️ Expose git variables to serverless
Stars: ✭ 75 (-68.09%)
Mutual labels:  aws, aws-lambda, serverless-framework
Kinesis Streams Fan Out Kinesis Analytics
Amazon Kinesis Streams fan-out via Kinesis Analytics (powered by the Serverless Framework)
Stars: ✭ 95 (-59.57%)
Mutual labels:  aws, aws-lambda, serverless-framework
0x4447 product s3 email
πŸ“« A serverless email server on AWS using S3 and SES
Stars: ✭ 2,905 (+1136.17%)
Mutual labels:  aws, aws-lambda, aws-s3
Ssm Cache Python
AWS System Manager Parameter Store caching client for Python
Stars: ✭ 177 (-24.68%)
Mutual labels:  aws, aws-lambda, aws-s3

πŸš€ Nuxt.js SSR on AWS Serverless Stack (Lambda + API Gateway + S3)

Nuxt.js Serverless Server-side Rendering Starter on AWS Serverless Stack (Lambda + API Gateway + S3) with Serverless Framework

Pre-Installed

  • Nuxt.js 2.8.1
  • Serverless Framework
  • TypeScript
  • Sass (SCSS)
  • TSLint

If you have a feature request, please create a new issue. And also, pull requests are always welcomeπŸ™

Caution

  • Libraries that are used in the client should be included in the devDependencies for Bundle size optimization. (because of Lambda Limit)
  • If you install a module for nuxt.js, it must be in a the dependencies not devDependencies
  • Auto generated URL https://*.execute-api.{region}.amazonaws.com/{stage}/ will result in a JavaScript error. (routing problem) Please use the Custom Domain.
  • If you encounter Cannot GET / error message, the error log can be founded in the AWS CloudWatch.

Pre-requisites

  • πŸ”‘ IAM Account for Serverless framework (Requires pre-configuration using aws configure)
$ aws configure

Configuration

Edit serverless.yml

service: nuxt-serverless  # 1. Edit whole service name

plugins:
  - serverless-s3-sync
  - serverless-apigw-binary
  - serverless-dotenv-plugin

package:
  individually: true
  excludeDevDependencies: true

provider:
  name: aws
  runtime: nodejs10.x
  stage: ${opt:stage, 'dev'}
  region: us-east-1  # 2. Edit AWS region name

custom:
  #######################################
  # Unique ID included in resource names.
  # Replace it with a random value for every first distribution.
  # https://www.random.org/strings/?num=1&len=6&digits=on&loweralpha=on&unique=on&format=html&rnd=new
  stackId: abcdef  # 3. Update Random Stack ID
  #######################################

  buckets:
    ASSETS_BUCKET_NAME: ${self:service}-${self:custom.stackId}-${self:provider.stage}-assets
    STATIC_BUCKET_NAME: ${self:service}-${self:custom.stackId}-${self:provider.stage}-static
  s3Sync:
    - bucketName: ${self:custom.buckets.ASSETS_BUCKET_NAME}
      localDir: .nuxt/dist/client
    - bucketName: ${self:custom.buckets.STATIC_BUCKET_NAME}
      localDir: static
  apigwBinary:
    types:
      - '*/*'

Build Setup

# Install dependencies
$ yarn

# Serve develop server at localhost:3000 using Nuxt.js
$ yarn dev

# Build
$ yarn build

# Prod server start with built assets
$ yarn start

## SERVERLESS DEPLOYMENT ##
# Build and deploy the function and bundled assets
$ yarn deploy:dev
$ yarn deploy:stage
$ yarn deploy:prod

# Remove Deployment
$ yarn undeploy:dev
$ yarn undeploy:stage
$ yarn undeploy:prod

Environment Variables

  • update .env.development, .env.production.
  • If env variable key started with NUXT_APP, it injected to client in this.$store.state.environments.
  • WARNING!: Untrack the .env.development and the .env.production before commit

Folder Structure

  • /api: You can create a sub-API based on Express.js. dynamic ajax Set-Cookie is mainly used.

    Let the URL be a * .json to distinguish it from the REST API that returns JSON.

  • /pages: File-based page routing. All ts files in /pages are only alias with export {default} to /services/${serviceName}/pages/**. all implementations should be done inside /services.

    export { default } from '~/services/home/pages/index'
    
  • /services: The application is divided into several services and should be implemented in a folder named by service name. (Example: /home, /auth, ...)

    • Inside a Service: /components, /queries, /pages, /helpers, /types, ...
  • /store: One Store that is globally used.

  • /types: Declare only .d.ts. The type used for each service should be stored in `/types' in each service.

To-do

  • [x] optimize the lambda capacity (create SSR bundle with no dependencies)
  • [x] static file serve
  • [ ] gzip Compression
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].