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

$ npm install serverless-spa --save-dev

or

$ yarn add -D serverless-spa

Add the plugin to your serverless.yml file:

plugins:
  - serverless-spa

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"

custom:
  spa:
    gzip: true

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

$ sls spa bundle

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

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.

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

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