{"library":"serverless-build-client","title":"Serverless Build Client Plugin","description":"serverless-build-client is a Serverless Framework plugin, currently at version 2.5.0. Its release cadence appears to be maintenance-driven rather than rapid feature development, with the last code commit being five years ago, and v2.5.0 itself being two years old. The plugin is designed to streamline the frontend build process within a Serverless project. Its primary function is to inject environment variables defined in `serverless.yml` (either globally at the provider level or specifically for the plugin) directly into the client-side build environment. This addresses a common challenge in serverless architectures where frontend applications often need dynamic values, such as API endpoints or resource identifiers, that are provisioned by the backend Serverless service. It integrates seamlessly with static site hosting plugins like `serverless-finch` by ensuring the frontend is built with correct environment configurations before deployment. Users define their build command and preferred package manager (npm or yarn), and the plugin handles the environment variable injection and execution of the build script in the specified working directory.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install serverless-build-client"],"cli":null},"imports":["plugins:\n  - serverless-build-client","serverless client build","custom:\n  buildClient:\n    packager: npm\n    command: run build"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"/* serverless.yml */\nservice: my-frontend-app\n\nplugins:\n  - serverless-build-client\n\nprovider:\n  name: aws\n  runtime: nodejs18.x\n  environment:\n    # Global environment variables for the provider\n    REACT_APP_GLOBAL_API_URL: https://api.example.com/global\n\ncustom:\n  buildClient:\n    packager: npm # Specify 'npm' as the package manager\n    command: run build # Use 'npm run build' as the build command\n    cwd: frontend # Specify the subdirectory where the client is located\n    verbose: true # Log environment variables during the build\n    environment:\n      # Plugin-specific environment variables (override global if conflict)\n      REACT_APP_BACKEND_ENDPOINT: ${cf:my-backend-service-${sls:stage}.ServiceEndpoint}\n\n# frontend/package.json (example)\n// {\n//   \"name\": \"my-client-app\",\n//   \"version\": \"1.0.0\",\n//   \"scripts\": {\n//     \"start\": \"react-scripts start\",\n//     \"build\": \"react-scripts build\"\n//   },\n//   \"dependencies\": {\n//     \"react\": \"^18.2.0\",\n//     \"react-dom\": \"^18.2.0\"\n//   }\n// }\n\n// frontend/src/App.js (example of consuming env vars)\n// import React from 'react';\n// function App() {\n//   return (\n//     <div>\n//       <h1>Frontend App</h1>\n//       <p>Global API URL: {process.env.REACT_APP_GLOBAL_API_URL}</p>\n//       <p>Backend Endpoint: {process.env.REACT_APP_BACKEND_ENDPOINT}</p>\n//     </div>\n//   );\n// }\n// export default App;\n\n# CLI Command to build the client (run from service root):\nserverless client build --stage dev\n\n# Example of deploying a backend service (from backend service root):\n# serverless deploy --stage dev","lang":"javascript","description":"This example demonstrates how to configure the `serverless-build-client` plugin in `serverless.yml` to inject environment variables into a frontend application build. It shows both global provider environment variables and plugin-specific overrides, using `npm` as the packager and a custom build command from a `frontend` subdirectory. The client build then consumes these injected variables.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}