feat(cli): dot env support and template (#1580)

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",
  ],
  },
  {

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

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)
+:::

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

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",

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 && {

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 && {

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

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"