{"id":16014,"library":"ember-cli-server-variables","title":"Ember CLI Server Variables","description":"ember-cli-server-variables is an Ember CLI addon designed to inject server-driven variables into the `` section of an Ember application's `index.html` file during the build process. These variables are typically used for dynamic configurations like API tokens, user location, or other environment-specific data provided by the application server. The current stable version is 4.0.0, which requires Ember.js v4.12+ and Node.js v18+. The addon's release cadence is generally tied to Ember CLI and Ember.js major version updates, ensuring compatibility with the latest ecosystem standards. It differentiates itself by providing a convenient service for accessing these variables within the Ember application, abstracting away the parsing of meta tags. Its core functionality involves configuring a list of expected variables in `config/environment.js`, optionally providing development defaults, and then consuming them via an injected service. Since version 2.0.0, it automatically parses JSON string values in the meta tags, simplifying data retrieval for structured configuration.","status":"active","version":"4.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/blimmer/ember-cli-server-variables","tags":["javascript","ember-addon","server-driven-variables"],"install":[{"cmd":"npm install ember-cli-server-variables","lang":"bash","label":"npm"},{"cmd":"yarn add ember-cli-server-variables","lang":"bash","label":"yarn"},{"cmd":"pnpm add ember-cli-server-variables","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Ember application development and runtime compatibility.","package":"ember-source","optional":false}],"imports":[{"note":"This addon provides a service that is consumed via Ember's dependency injection system, not a direct named import from the package itself. For modern Ember (Octane+), you would typically use the `@service` decorator: `import { service } from '@ember/service'; class MyComponent extends Component { @service serverVariablesService; // ... }`","wrong":"import { serverVariablesService } from 'ember-cli-server-variables';","symbol":"serverVariablesService","correct":"import Ember from 'ember';\n\n// In a classic Ember component or controller\nexport default Ember.Component.extend({\n serverVariablesService: Ember.inject.service('serverVariables'),\n // ...\n});"},{"note":"Configuration for this addon is done directly in your Ember app's `config/environment.js` file, within the `ENV.serverVariables` object. There is no direct import for addon configuration. The addon hooks into the Ember CLI build process.","wrong":"import config from 'ember-cli-server-variables/environment';","symbol":"Configuration","correct":"// config/environment.js\nmodule.exports = function(environment) {\n let ENV = { /* ... */ };\n ENV.serverVariables = {\n tagPrefix: 'your-app',\n vars: ['my-variable', 'json-data']\n };\n return ENV;\n};"}],"quickstart":{"code":"/* config/environment.js */\nmodule.exports = function(environment) {\n let ENV = {\n modulePrefix: 'my-ember-app', // Used as default tagPrefix if not explicitly set\n // ... other ENV settings for your Ember application\n serverVariables: {\n tagPrefix: 'my-app',\n vars: ['app-token', 'user-location', 'json-config'] // Define variables expected from server\n }\n };\n\n if (environment === 'development') {\n // Provide default values for development environment\n ENV.serverVariables.defaults = {\n 'app-token': 'dev-secret-token-123',\n 'user-location': 'Localhost, Earth',\n 'json-config': '{\"featureA\":true,\"level\":5}' // JSON strings are auto-parsed\n };\n }\n\n return ENV;\n};\n\n/* app/components/variable-display.js (example modern Ember Octane component) */\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\nimport { tracked } from '@glimmer/tracking';\n\nexport default class VariableDisplayComponent extends Component {\n @service serverVariables; // Inject the service\n\n @tracked token = '';\n @tracked location = '';\n @tracked config = {};\n\n constructor() {\n super(...arguments);\n // Access variables; properties are camelCased from dasherized config\n this.token = this.serverVariables.appToken; \n this.location = this.serverVariables.userLocation;\n this.config = this.serverVariables.jsonConfig; // Automatically parsed JSON\n \n console.log('Server Variables Loaded:', {\n appToken: this.token,\n userLocation: this.location,\n jsonConfig: this.config\n });\n // Render these variables in your component's template (e.g., this.token in {{this.token}})\n }\n}\n","lang":"javascript","description":"This quickstart demonstrates how to configure server variables and their development defaults in `config/environment.js`, and then access them within an Ember Octane component using the `@service` decorator, including both string and automatically parsed JSON variables."},"warnings":[{"fix":"Upgrade your Ember.js and Ember CLI versions to match the addon's peer dependencies: Ember.js v4.12+, Ember CLI v4.12+, and Node.js v18+. Refer to official Ember upgrade guides for detailed migration steps.","message":"Version 4.0.0 introduces breaking changes primarily due to updating Ember to v5.12.0. Your Ember application must meet the updated peer dependency requirements.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Remove any manual `JSON.parse()` calls for variables that are expected to be JSON strings. The `serverVariables` service automatically handles the parsing for you.","message":"Version 2.0.0 introduced automatic JSON parsing for server variables. If you were previously manually calling `JSON.parse()` on variables retrieved from the service that were expected to be JSON strings, this will now lead to errors or double-parsing.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure `{{content-for 'server-variables'}}` is manually added to your `app/index.html` file, typically after `{{content-for 'head'}}` or `{{content-for 'head-footer'}}`.","message":"The `{{content-for 'server-variables'}}` tag is crucial and must be present within the `` section of your `app/index.html` file. If this placeholder is missing, the addon cannot inject the necessary `` tags, and server variables will not be available to your application.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Ensure `ENV.serverVariables.vars` is an array containing the dasherized names of all server variables your application expects to consume, e.g., `vars: ['api-key', 'feature-flags']`.","message":"The `vars` array within the `serverVariables` block in your `config/environment.js` is a required configuration. Without it, the addon will not know which server variables to look for or expose through its service.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Verify the service is correctly injected using `Ember.inject.service('serverVariables')` (classic) or `@service serverVariables;` (modern Octane). Also, confirm the variable's dasherized name is in `ENV.serverVariables.vars` in `config/environment.js`.","cause":"The `serverVariables` service was not properly injected into the component or controller attempting to access it, or the variable name was not defined in `config/environment.js`.","error":"TypeError: Cannot read properties of undefined (reading 'appToken')"},{"fix":"Remove any explicit `JSON.parse()` calls for variables fetched from `serverVariablesService` that are expected to be JSON. The service will return JavaScript objects directly for such variables.","cause":"You are likely attempting to manually `JSON.parse()` a server variable's value after upgrading to version 2.0.0 or later, where the addon automatically handles JSON string parsing.","error":"SyntaxError: Unexpected token 'o' in JSON at position X (or similar JSON parsing error from `JSON.parse`)"},{"fix":"1. Check `app/index.html` for `{{content-for 'server-variables'}}`. 2. Ensure the variable is listed in `ENV.serverVariables.vars`. 3. Confirm your server-side logic correctly inserts the meta tag with the expected name and content into the generated `index.html`.","cause":"This error or similar behavior (variable always being an empty string) indicates either the `{{content-for 'server-variables'}}` placeholder is missing, the variable was not included in the `vars` array in `config/environment.js`, or the server serving `index.html` did not populate the meta tag's `content` attribute.","error":"Meta tag for 'my-app-api-key' not found in index.html, or variable not available in service."}],"ecosystem":"npm"}