diff --git a/docs/.vuepress/sidebar.js b/docs/.vuepress/sidebar.js index dfe044377..1c02f0bcb 100644 --- a/docs/.vuepress/sidebar.js +++ b/docs/.vuepress/sidebar.js @@ -15,6 +15,7 @@ module.exports = { "/landing/getting-started/prepare-shopware", "/landing/project/contribution", "/landing/getting-started/local-environment", + "/landing/getting-started/env-variables", ], }, { diff --git a/docs/assets/env_cli.png b/docs/assets/env_cli.png new file mode 100644 index 000000000..8513eee39 Binary files /dev/null and b/docs/assets/env_cli.png differ diff --git a/docs/guide/FEATURELIST.md b/docs/guide/FEATURELIST.md index 84084ba71..d23529138 100644 --- a/docs/guide/FEATURELIST.md +++ b/docs/guide/FEATURELIST.md @@ -118,3 +118,8 @@ sidebar: auto #### PayPal Checkout - Standard PayPal Checkout (requires Shopware PayPal plugin) + + +### Other + +- Project's .env support for environment variables \ No newline at end of file diff --git a/docs/landing/getting-started/env-variables.md b/docs/landing/getting-started/env-variables.md new file mode 100644 index 000000000..0247813ea --- /dev/null +++ b/docs/landing/getting-started/env-variables.md @@ -0,0 +1,64 @@ +# Environment variables + +This guide will help you to configure your shopware-pwa project using [environment variables](https://en.wikipedia.org/wiki/Environment_variable). + +## Usage + +Environment variables can be used within the application in many places, in the runtime as same as the build time. In nodejs-based application they can be accessed by using `process.env.[VARIABLE_CODE]`, `process.env.NODE_ENV` for instance. Nuxt and shopware-pwa itself uses some predefined variables to customize the application. + +The great example is a helper for getting images with optional image processor (treated like a proxy), the helper contains the piece of code: + +```js + if (!process.env.EXPERIMENTAL_IMAGE_PROCESSING_SERVER) return originalImageSrc + + ... + + let url = `${process.env.EXPERIMENTAL_IMAGE_PROCESSING_SERVER}?url=${mediaUrl}` + +``` + +Shopware-pwa provides the optional way of setting env variables by using `.env` file, instead of setting them up using system environment variables explicitly like: + +`EXPERIMENTAL_IMAGE_PROCESSING_SERVER=https://someserver.com/img/ shopware-pwa dev` or even before running the nodejs process, manually. + + +## Setup + +A generated project contains `.env.template` among other files placed in root directory. + +::: tip +Remember that the `.env` file is listed in `.gitignore` and shouldn't be versioned because it may contain some sensitive data. +::: + + +The `.env.template` file's content may look similar to this one: + +``` +HOST=0.0.0.0 +PORT=3000 +ADMIN_USER=admin +ADMIN_PASSWORD=shopware +ENABLE_DEVTOOLS=false +NODE_ENV=production +EXPERIMENTAL_IMAGE_PROCESSING_SERVER +``` + +**In order to activate the variables from the file, change the template's name to just `.env`** + +## Description + +The default environment variables + +- `HOST` - nuxt server host name (`0.0.0.0` by default) +- `PORT` - nuxt server port number (`3000` by default) +- `ADMIN_USER` - Shopware 6 admin user name (`admin` by default) +- `ADMIN_PASSWORD` - Shopware 6 admin password (`shopware` by default) +- `ENABLE_DEVTOOLS` - config turning on the nuxt dev tools (`true` by default) +- `NODE_ENV` - application mode: dev or production (`dev` by default) +- `EXPERIMENTAL_IMAGE_PROCESSING_SERVER` - URL to the custom image processor (well described [here](https://github.com/vuestorefront/shopware-pwa/blob/master/packages/default-theme/src/helpers/images/getResizedImage.js)) + +::: tip +shopware-pwa CLI tool can also detect the current state of environment variables and use given `ADMIN_USER` and `ADMIN_PASSWORD` values in `plugins` and `domains` commands (suggest credentials). + +![cli](./../../assets/env_cli.png) +::: \ No newline at end of file diff --git a/packages/cli/bin/shopware-pwa b/packages/cli/bin/shopware-pwa index ebfab042e..867d0f742 100755 --- a/packages/cli/bin/shopware-pwa +++ b/packages/cli/bin/shopware-pwa @@ -1,5 +1,5 @@ #!/usr/bin/env node - +require('dotenv').config() /* tslint:disable */ // check if we're running in dev mode diff --git a/packages/cli/package.json b/packages/cli/package.json index bf47de35e..b11faf12b 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -31,6 +31,7 @@ "dependencies": { "@shopware-pwa/shopware-6-client": "0.9.1", "chokidar": "^3.5.2", + "dotenv": "^10.0.0", "gluegun": "^4.6.1", "md5-hex": "^4.0.0", "request": "^2.88.2", diff --git a/packages/cli/src/commands/domains.ts b/packages/cli/src/commands/domains.ts index e034bbcb4..e96e59012 100644 --- a/packages/cli/src/commands/domains.ts +++ b/packages/cli/src/commands/domains.ts @@ -30,12 +30,16 @@ Synchronize the domain's related config from backend (in order to build a domain type: "input", name: "username", message: "Shopware admin username:", + initial: process.env.ADMIN_USER, + footer: process.env.ADMIN_USER && "username is taken from .env", }; const shopwarePasswordQuestion = !inputParameters.password && { type: "password", name: "password", message: "Shopware admin password:", + initial: process.env.ADMIN_PASSWORD, + footer: process.env.ADMIN_PASSWORD && "password from .env is hidden", }; const shopwarePwaHostQuestions = !inputParameters.pwaHost && { diff --git a/packages/cli/src/commands/plugins.ts b/packages/cli/src/commands/plugins.ts index 612bed3a9..cb2fcb4f5 100644 --- a/packages/cli/src/commands/plugins.ts +++ b/packages/cli/src/commands/plugins.ts @@ -20,11 +20,15 @@ module.exports = { type: "input", name: "username", message: "Shopware admin username:", + initial: process.env.ADMIN_USER, + footer: process.env.ADMIN_USER && "username is taken from .env", }; const shopwarePasswordQuestion = !inputParameters.password && { type: "password", name: "password", message: "Shopware admin password:", + initial: process.env.ADMIN_PASSWORD, + footer: process.env.ADMIN_PASSWORD && "password from .env is hidden", }; const devModeQuestion = !inputParameters.devMode && { diff --git a/packages/cli/src/templates/project-template/.env.template b/packages/cli/src/templates/project-template/.env.template new file mode 100644 index 000000000..6e6c2ab10 --- /dev/null +++ b/packages/cli/src/templates/project-template/.env.template @@ -0,0 +1,7 @@ +HOST=0.0.0.0 +PORT=3000 +ADMIN_USER=admin +ADMIN_PASSWORD=shopware +ENABLE_DEVTOOLS=true +NODE_ENV=dev +EXPERIMENTAL_IMAGE_PROCESSING_SERVER \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 4e8e2ee21..cb66d93c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6520,6 +6520,11 @@ dot-prop@^6.0.1: dependencies: is-obj "^2.0.0" +dotenv@^10.0.0: + version "10.0.0" + resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81" + integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q== + duplexer2@~0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"