🚀 Nuxt.js 2.0 SSR with Firebase Authentication on AWS Serverless (Lambda + API Gateway + S3)

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

Blog post

https://blog.morizyun.com/javascript/typescript-tutorial-nuxt-firebase-bulma-navbar-vue.html

Pre-Installed

• Nuxt.js 2.0 (nuxt-edge)
• Serverless Framework
• TypeScript
• Firebase Authentication
• Sass (SCSS)
• ESLint
• TSLint
• @nuxtjs/axios
• @nuxtjs/apollo
• @nuxtjs/bulma
• @nuxtjs/dotenv

If you have a feature request, please create a new issue. And also, pull requests are always welcome🙏

Caution

• Libraries that are used only by the server or that are used by both the server and the client should be included in the dependencies. To optimize the lambda capacity, make sure that the library used only by the client is included in dev-dependencies.
• If you install a module for nuxt.js, it must be in a the dependencies not dev-dependencies
• Auto generated URL https://*.execute-api.aws-region-name.amazonaws.com/* 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

Set Environment Variable

Add .env file and set as follows:

FIREBASE_SERVER_CLIENT_EMAIL=xxx
FIREBASE_SERVER_DATABASE_URL=xxx
FIREBASE_SERVER_PRIVATE_KEY=xxx
FIREBASE_SERVER_PROJECT_ID=xxx

FIREBASE_CLIENT_API_KEY=xxx
FIREBASE_CLIENT_AUTH_DOMAIN=xxx
FIREBASE_CLIENT_DATABASE_URL=xxx
FIREBASE_CLIENT_MESSAGING_SENDER_ID=xxx
FIREBASE_CLIENT_PROJECT_ID=xxx
FIREBASE_CLIENT_STORAGE_BUCKET=xxx

Configuration

Edit serverless.yml

service: "nuxt-edge-serverless-template" # Edit service name

provider:
  name: aws
  runtime: nodejs8.10
  stage: develop
  region: ap-northeast-2  # Edit region name
  environment:
    NODE_ENV: production

resources:
  Resources:
    AssetsBucket:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: "my-s3-bucket" # Specify a new bucket name for client assets

custom:
  ...
  s3Sync:
    - bucketName: "my-s3-bucket" # Retype the bucket name specified above
      localDir: .nuxt/dist
  customDomain:
    domainName: "nuxt.mydomain.com" # Specify a new domain name to be created
    stage: develop
    certificateName: "*.mydomain.com" # Enter the Certicate name with that domain
    createRoute53Record: true

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 ##
# You must run `yarn sls:create` before `yarn sls:deploy`
# Build assets, Create Domain and S3 Bucket, Deploy the function and bundled assets
$ yarn sls:create

# launch local server with bundled assets and 'serverless-offline' plugin
$ yarn sls:local

# Re-build and deploy the function and bundled assets
$ yarn sls:deploy

# Remove all stacks
# Please do not delete it separately and use this script
$ yarn sls:remove