Serverless SPA

A Serverless v1.x plugin to deploy your website to AWS S3 using Webpack to bundle it.

Install

$ npm install serverless-spa --save-dev

or

$ yarn add -D serverless-spa

Add the plugin to your serverless.yml file:

plugins:
  - serverless-spa

Configure

By default the plugin will look for a webpack.spa.config.js in root directory. Alternatively, you can specify a different file in serverless.yml:

custom:
  spa:
    webpack: "webpack.spa.config.js"

or

custom:
  spa:
    webpack:
      dev: "webpack.spa.dev.config.js"
      prod: "webpack.spa.prod.config.js"

The appFolder and bucket name must be defined. Bucket name can be defined in one parameter, to be used independent of stage, or be one bucket for each stage.

custom:
  spa:
    appFolder: "www"
    bucket: "serverless-site-s3"

or

custom:
  spa:
    appFolder: "www"
    bucket:
      dev: "dev-serverless-site-s3"
      prod: "prod-serverless-site-s3"

GZip

custom:
  spa:
    gzip: true

Bundling

This will create a .spa folder with generated webpack bundle.

$ sls spa bundle

Offline

Start a webpack-dev-server with devServer options in webpack config.

$ sls spa serve

or with serverless-offline

  plugins:
    ...
    - serverless-spa
    ...
    - serverless-offline
    ...

$ sls offline

Hot module replacement

This plugin detects if devServer.hot is true, and puts the entry points necessary to Hot Module Replacement works, even the react-hot-loader is inserted in each entry point, and detects if webpack config contains the necessary plugins added (HotModuleReplacementPlugin, NamedModulesPlugin, NoEmitOnErrorsPlugin), so you don't need to put configuration related to HMR.

Deploy

This will, bundle your website, create a S3 bucket if not exists, update its configuration to work with SPA (index.html for errors) and upload .spa folder to bucket.

$ sls spa deploy

Note

• The variable __dirname have reference to the plugin folder, because webpack and webpack-dev-server are started programmatically, so replace __dirname to process.cwd()