A Serverless Framework plugin for building a client with environment variables
Switch branches/tags
Nothing to show
Clone or download
Latest commit c4b2d84 Nov 17, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Added more badges to README Jul 4, 2018
src Added packager and command options Jul 24, 2018
.eslintrc Added tests Jul 3, 2018
.gitignore v2.1.3 Nov 17, 2018
LICENSE Updated License file Jul 3, 2018
README.md Added packager and command options Jul 24, 2018
package.json v2.1.3 Nov 17, 2018
yarn.lock Bumped up versions Nov 17, 2018


Serverless Build Client

npm CircleCI GitHub license Coverage Status

A Serverless Framework plugin for building the frontend with environment variables defined in serverless.yml


Plugins such as serverless-finch make it easy to host static websites in S3. These websites usually need to be built before being uploaded. Without this plugin, environment variables defined in serverless.yml will not be included in the build.


First, install the package to your dev dependencies

$ yarn add --dev serverless-build-client

Then add the plugin to your serverless.yml file


  - serverless-build-client



In your command prompt, run the following command to build the client

serverless client build

This will add all of the environment variables in your serverless.yml file to process.env, and then it will execute yarn build to build the frontend


--packager, -p

The packager that should be used to build the client. Valid options are yarn and npm. Default value is yarn

$ serverless client build --packager yarn

--command, -c

The command that will build the client. Default value is build

$ serverless client build --packager yarn --command build
$ serverless client build --packager npm --command "run build"


Let's say you have two separate Serverless Framework projects: one for the frontend, and one for the backend. When you deploy the backend service, a ServiceEndpoint is automatically outputted in the CloudFormation stack.

In order to avoid hardcoding this value, the frontend should reference an environment variable containing the endpoint. In your frontend's serverless.yml file, you would have something similar to


    REACT_APP_BACKEND_ENDPOINT: ${cf:<backend service name>.ServiceEndpoint}


To deploy your front end, you need to run a series of commands (in this example, I am using serverless-finch)

$ serverless deploy
$ serverless client build
$ serverless client deploy --no-confirm

These commands will first deploy your application to AWS. Then it will build the front end with the environment variable defined above. Then it will upload the built website to S3.