serverless-spa-fix
v1.2.6
Published
Serverless plugin to bundle website with webpack and deploy to S3
Downloads
4
Maintainers
Readme
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
toprocess.cwd()