README

This is a simple extension that is able to expose environment variables to your JavaScript code.

A word on security

Accidentally exposing sensitive information is a big security risk. You certainly don't want secret information exposed to the client. However, there are a lot of cases where you need to expose environment specific information to your JavaScript (e.g. a Sentry token, API endpoints, etc.). To avoid exposing variables that are not meant to be accessible to the public, this extension will only expose environment variables that are prefixed with PUBLIC_. That way you have a very specific indication that are variable is safe to be exposed.

How does it work?

Define your environment variables the way you are used to. We recommend using a .env file in combination with dotenv-connector by Helmut Hummel.

But you can choose any method you like. Just make sure that the env variables you need are exposed to PHP. All variables you define prefixed with PUBLIC_ will then be exposed to your JavaScript and made available under window._gloabls.

Example

# file: .env

API_KEY=a69f73cca23a9ac5c8b567dc185a756e97c982164fe25859e0d1d # -> this will not be exposed
PUBLIC_SENTRY_DSN=https://XXXXXXXXXXXXX.ingest.us.sentry.io/XXXXXXX

// file: main.js

import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: window._globals.PUBLIC_SENTRY_DSN,
  // [...]
});

Installation

Install the extension via composer:

composer req pnodev/pno-js-globals

Import the TypoScript in your sitepackage:

// file: setup.typoscript

@import 'EXT:pno_js_globals/Configuration/TypoScript/setup.typoscript'

Roadmap / Planned features

TypeScript support

pnodev / pno-js-globals

Maintainers

Details