{"id":16348395,"url":"https://github.com/7rulnik/isomorphic-env-webpack-plugin","last_synced_at":"2025-08-02T17:12:31.186Z","repository":{"id":41957009,"uuid":"334937128","full_name":"7rulnik/isomorphic-env-webpack-plugin","owner":"7rulnik","description":"Webpack plugin and utilities to pass environment variables from server to client","archived":false,"fork":false,"pushed_at":"2025-03-19T13:22:58.000Z","size":95187,"stargazers_count":17,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-12T14:06:19.484Z","etag":null,"topics":["env","environment-variables","isomorphic","server-side","server-side-rendering","ssr","variables","webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":"https://github.com/7rulnik/isomorphic-env-webpack-plugin","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/7rulnik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-01T12:07:28.000Z","updated_at":"2025-04-09T10:17:45.000Z","dependencies_parsed_at":"2022-08-12T00:40:16.333Z","dependency_job_id":null,"html_url":"https://github.com/7rulnik/isomorphic-env-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/7rulnik/isomorphic-env-webpack-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7rulnik%2Fisomorphic-env-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7rulnik%2Fisomorphic-env-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7rulnik%2Fisomorphic-env-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7rulnik%2Fisomorphic-env-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/7rulnik","download_url":"https://codeload.github.com/7rulnik/isomorphic-env-webpack-plugin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7rulnik%2Fisomorphic-env-webpack-plugin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268424029,"owners_count":24248119,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["env","environment-variables","isomorphic","server-side","server-side-rendering","ssr","variables","webpack","webpack-plugin"],"created_at":"2024-10-11T00:51:38.511Z","updated_at":"2025-08-02T17:12:31.163Z","avatar_url":"https://github.com/7rulnik.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# isomorphic-env-webpack-plugin\n\nWebpack plugin and utilities to pass environment variables from server to client via server-side rendering.\n\n## Installation\n\n```sh\n# yarn\nyarn add isomorphic-env-webpack-plugin\n\n# or npm\nnpm install isomorphic-env-webpack-plugin\n```\n\n## Credits\n\nIt was built in [alfabank.com](https://alfabank.com) by [@aapolkovsky](https://github.com/aapolkovsky) and later rewritten in [aviasales.com](https://aviasales.com) by [@7rulnik](https://github.com/@7rulnik). Thanks to these awesome companies to make it open source.\n\n\u003cp align=\"center\"\u003e\n  \u003cbr/\u003e\n  \u003ca href=\"https://alfabank.com\"\u003e\n    \u003cimg src=\"/media/alfabank.svg\" alt=\"Sponsored by Alfa Bank\" width=\"30%\"\u003e\n  \u003c/a\u003e\n  \u003cbr/\u003e\n  \u003cbr/\u003e\n  \u003ca href=\"https://aviasales.com\"\u003e\n    \u003cimg src=\"/media/aviasales.svg\" alt=\"Sponsored by Aviasales\" width=\"30%\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Motivation\n\nSometimes you want to change frontend configuration without rebuilding it.\n\nFor example, you need to change hostname time to time.\n\nSo you will have something like this in source code\n\n```js\nfetch(process.env.GOOGLE_HOST)\n```\n\nBut if you will use [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) or [EnvironmentPlugin](https://webpack.js.org/plugins/environment-plugin/) you will get hardcoded values into bundle. Like this:\n\n```js\n// After run GOOGLE_HOST=http://google.com webpack\nfetch('http://google.com')\n```\n\nAnd later, if you need to change `GOOGLE_HOST` you need build your app again.\n\nWith this plugin you can set environment variables on a server and pass it to client without rebuilding entire frontend.\n\n## Configuration\n\n### 1. Setup webpack plugin for client config\n\n```js\nconst {\n\tIsomorphicEnvWebpackPlugin,\n} = require('isomorphic-env-webpack-plugin/dist/plugin')\nmodule.exports = {\n\t// ...\n\tplugins: [new IsomorphicEnvWebpackPlugin()],\n}\n```\n\n\u003e Note that you can't use `DefinePlugin` after `IsomorphicEnvWebpackPlugin`.\n\nIt will replace your env variables from this:\n\n```js\nconsole.log(process.env.GOOGLE_HOST)\n```\n\nto this:\n\n```js\nconsole.log(self.__ISOMORPHIC_ENV.GOOGLE_HOST)\n```\n\n### 2. Inject variables into HTML before your script tags\n\n```js\nimport { getScriptTag } from 'isomorphic-env-webpack-plugin/dist'\n\nconst scriptTag = getScriptTag()\n\nfunction render() {\n\treturn `\n    \u003c!doctype html\u003e\n    \u003chtml\u003e\n      \u003chead\u003e\n        ...\n      \u003c/head\u003e\n      \u003cbody\u003e\n        ...\n        ${scriptTag}\n        \u003cscript src=\"./main.js\"\u003e\u003c/script\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  `\n}\n```\n\nIt will inject script tag with variables for client-side:\n\n```html\n\u003c!-- ... --\u003e\n\u003cscript\u003e\n\tself.__ISOMORPHIC_ENV__ = {\n\t\tGOOGLE_HOST: 'https://google.com',\n\t}\n\u003c/script\u003e\n\u003cscript src=\"./main.js\"\u003e\u003c/script\u003e\n```\n\n### 3. Add server runtime\n\n\u003e It's optional, but without it you can't use server prefixes: `S_`, `SC_`, `CS_`.\n\n```js\n// Note, that import should be before any process.env usage\nimport 'isomorphic-env-webpack-plugin/dist/runtime'\n\nimport express from 'express'\n// ...\n```\n\nIt will add aliases for server-side variables. So you can access it without prefix:\n\n```js\n// S_GOOGLE_HOST=\"https://google.com\" node server.js\nprocess.env.S_GOOGLE_HOST === process.env.GOOGLE_HOST // true\n```\n\n## Usage\n\nWe have 4 prefixes for env variables:\n\n- `S_` — variable for server-side and will not be exposed to client-side. For example: `S_YOUR_SERVER_ENV`. It works only with server runtime and exists just for more obvious separataion. If you don't want to use runtime you can use just normal `YOUR_SERVER_ENV`.\n- `C_` — variable for client-side. For example: `C_YOUR_CLIENT_ENV`.\n- `CS_` — same variable for server-side and client-side. For example: `CS_BOTH_CLIENT_AND_SERVER_ENV`. Works only with server runtime.\n- `SC_` — same as `CS_`. The only reason to have it that you don't need to remember which variant is correct: `SC_` or `CS_`.\n\nIn code you should access them without prefix:\n\n```js\n// S_YOUR_SERVER_ENV\nprocess.env.YOUR_SERVER_ENV\n\n// C_YOUR_CLIENT_ENV\nprocess.env.YOUR_CLIENT_ENV\n\n// CS_BOTH_CLIENT_AND_SERVER_ENV or SC_BOTH_CLIENT_AND_SERVER_ENV\nprocess.env.BOTH_CLIENT_AND_SERVER_ENV\n```\n\n### Diferent values on client and server\n\nIf you want to use different values on server and client you need to set both `C_` and `S_` variables:\n\n```sh\nC_SOME_ENV=\"I'm client env\" S_SOME_ENV=\"I'm server env\" node server.js\n```\n\n```js\n// server.js\nprocess.env.SOME_ENV // I'm server env\n```\n\n```js\n// client.js\nprocess.env.SOME_ENV // I'm client env\n```\n\n### Same value on client and server\n\nIf you want to use same value on server and client you need to set `CS_` or `SC_` variable\n\n\u003e It requires server runtime\n\n```sh\nCS_SOME_ENV=\"I'm equal on server and client\" node server.js\n```\n\n```js\n// server.js\nprocess.env.SOME_ENV // I'm equal on server and client\n```\n\n```js\n// client.js\nprocess.env.SOME_ENV // I'm equal on server and client\n```\n\n## Options\n\nIf you don't comfortable with `self.__ISOMORPHIC_ENV__` you can change it:\n\n```js\n// Pass variableName into plugin\nnew IsomorphicEnvWebpackPlugin({ variableName: '__SOME_CUSTOM_VARIABLE__' })\n\n// And don't forget to pass same value into getScriptTag\ngetScriptTag('__SOME_CUSTOM_VARIABLE__')\n```\n\nAfter that you will have this script tag in your HTML:\n\n```html\n\u003cscript\u003e\n\tself.__SOME_CUSTOM_VARIABLE__ = {\n\t\tGOOGLE_HOST: 'https://google.com',\n\t}\n\u003c/script\u003e\n```\n\n### `filter`\n\nAny of getter-functions (`getClientEnvs`, `getServerEnvs`, `getScriptContent`, `getScriptTag`) accepts optional `filter` to exclude some variables from the result.\n\n```js\nimport { getScriptTag } from 'isomorphic-env-webpack-plugin/dist'\n\nconst scriptTag = getScriptTag('__ISOMORPHIC_ENV__', {\n\tfilter: (key, value) =\u003e key.includes('ALLOW'),\n})\n\nfunction render() {\n\treturn `\n    \u003c!doctype html\u003e\n    \u003chtml\u003e\n      \u003chead\u003e\n        ...\n      \u003c/head\u003e\n      \u003cbody\u003e\n        ...\n        ${scriptTag}\n        \u003cscript src=\"./main.js\"\u003e\u003c/script\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  `\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F7rulnik%2Fisomorphic-env-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F7rulnik%2Fisomorphic-env-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F7rulnik%2Fisomorphic-env-webpack-plugin/lists"}