bugfix(): dotenv creates lowercase values

README.md

@@ -9,7 +9,7 @@ The React web application is using [NextJS](https://nextjs.org/), [GraphQL Codeg
 
 ## INSTALL
 1. `yarn`
-2. `bash setup.sh` sets correct local .env file with _mock mode as default_ (possible to set your bol.com api key there as well (then set MOCK_API=OFF), the only difference will be using a real datasource or not)
+2. `bash setup.sh` sets correct local .env file with _mock mode as default_ (possible to set your bol.com api key there as well (then set MOCK_API=off), the only difference will be using a real datasource or not)
 3. Apollo [vsc extension](https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo) (optional)
 
 ## STRUCTURE
@@ -26,7 +26,7 @@ The React web application is using [NextJS](https://nextjs.org/), [GraphQL Codeg
 **Now when you followed the install part (and looked at point 2) you can simply run `yarn start`. It will spin up the GraphQL server and the React application.**
 Please look at the VSC plugins below for editor happiness.
 
-It is also possible to just play with only the server part with `MOCK_API=ON yarn start:dev:server`, which spins up the graphql server in mocked mode.
+It is also possible to just play with only the server part with `MOCK_API=on yarn start:dev:server`, which spins up the graphql server in mocked mode.
 Or `BOL_API_KEY=*** yarn start:dev:server` which spins it up in non mocked mode when you have an open api bol.com key.
 
 ## PLAYGROUND
@@ -64,12 +64,12 @@ Environment vars for development (set them in CI for production).
 
 ### '.env' file inside './packages/server':
 
-*Important: You can set MOCK_API to ON in case you don't have access to bol.com api. Then the server will use stub data*
+*Important: You can set MOCK_API to 'on' in case you don't have access to bol.com api. Then the server will use stub data*
 
 ```
 BOL_API_KEY=***
 NODE_ENV=development
-MOCK_API=ON|OFF
+MOCK_API=on|off
 ENGINE_KEY=optional-apollo-engine-key-overhere REMOVE WHEN NOT AVAILABLE
 ALLOWED_ORIGIN=optional-not-needed-dev-mode REMOVE
 ```

dev.sh

@@ -1,5 +1,5 @@
 ./node_modules/.bin/concurrently --names "REACT, REACT-COMPONENTS, GRAPHQL, GRAPHQL-TYPES" \
- -c "bgBlue.bold,bgGreen,bgMagenta.bold,bgGreen" \
+ -c "blue.bold,gray,cyan.bold,gray" \
  "cd packages/app && yarn dev" \
  "cd packages/app && yarn generate:graphqlcodegen -w" \
  "cd packages/server && yarn dev" \

package.json

@@ -10,14 +10,14 @@
   "scripts": {
     "postinstall": "lerna exec -- yarn install && lerna run prepare",
     "audit": "lerna run audit",
-    "start": "./node_modules/.bin/concurrently --names 'REACT, react-autogen, GRAPHQL, graphql-autogen' -c 'blue.bold,gray,cyan.bold,gray' 'cd packages/app && yarn dev' 'cd packages/app && yarn generate:graphqlcodegen -w' 'cd packages/server && yarn dev' 'cd packages/server && yarn generate:graphqlcodegen -w'",
+    "start": "./node_modules/.bin/concurrently --names 'REACT, react-autogen, GRAPHQL, graphql-autogen' -c 'blue.bold,gray,cyan.bold,gray' 'NODE_ENV=development yarn workspace graphql-app dev' 'cd packages/app && yarn generate:graphqlcodegen -w' 'NODE_ENV=development yarn workspace graphql-server start' 'cd packages/server && yarn generate:graphqlcodegen -w'",
     "dev": "yarn start",
     "build": "lerna run build",
     "lint": "lerna run lint",
     "test": "lerna run test",
     "clean": "find . -name \"node_modules\" -exec rm -rf '{}' + && find . -name \"dist\" -exec rm -rf '{}' +",
     "------ playground ------": "----------------------",
-    "start:mock-prod": "yarn build && ./node_modules/.bin/concurrently --names 'REACT, GRAPHQL' -c 'blue.bold,cyan.bold' 'NODE_ENV=production cd packages/app && yarn start' 'NODE_ENV=production MOCK_API=ON cd packages/server && yarn start' ",
+    "start:mock-prod": "yarn build && ./node_modules/.bin/concurrently --names 'REACT, GRAPHQL' -c 'blue.bold,cyan.bold' 'NODE_ENV=production cd packages/app && yarn start' 'NODE_ENV=production MOCK_API=on cd packages/server && yarn start' ",
     "test:coverage": "lerna run test:coverage",
     "outdated": "yarn outdated",
     "upgrade": "yarn upgrade-interactive --latest",

packages/app/src/modules/product/elements/product-details/product-details.tsx

@@ -14,10 +14,11 @@ interface Props {
 
 export const ProductDetails = ({ data, short = false }: Props) => {
     const product: ProductFragment = data && data.getProduct;
-    const image =
+    const foundImage =
         product &&
         product.images &&
-        product.images.filter((i: any) => i.key === 'L')[0].url;
+        product.images.filter((i: any) => i.key === 'L');
+    const image = foundImage && foundImage.length && foundImage[0].url;
     const description = (product && product.shortDescription) || '';
     const desc = short ? `${description.substring(0, 720)} ` : description;
 
@@ -27,7 +28,7 @@ export const ProductDetails = ({ data, short = false }: Props) => {
             lang="nl-NL"
             data-testid="product-details"
         >
-            <Image url={image} />
+            {Boolean(image) && <Image url={image} />}
             <h1>
                 {product.title} ({product.rating})
             </h1>

packages/server/README.md

@@ -10,7 +10,7 @@
 ### Development
 
 1. tab 1: `generate:graphqlcodegen -w`
-2. tab 2: `yarn dev` (no mock mode, bol open api key mandetory), or `MOCK_API=ON yarn dev` (mock mode)
+2. tab 2: `yarn dev` (no mock mode, bol open api key mandetory), or `MOCK_API=on yarn dev` (mock mode)
 3. open: [http://localhost:4000/graphql](http://localhost:4000/graphql)
 
 ### Production

packages/server/src/index.ts

@@ -2,9 +2,8 @@ import 'reflect-metadata';
 import dotenv from 'dotenv';
 
 if (process.env.NODE_ENV === 'development') {
-    dotenv.config({ path: `${__dirname}/../.env` });
+    dotenv.config({ path: `${process.cwd()}/.env` });
 }
-
 import { bootstrap } from './server';
 import { appModule } from './app';
 

packages/server/src/server.ts

@@ -41,7 +41,7 @@ export async function bootstrap(appModule: GraphQLModule) {
         engine: {
             apiKey: process.env.ENGINE_KEY,
         },
-        mocks: process.env.NODE_ENV === 'production' ? false : process.env.MOCK_API && process.env.MOCK_API === 'ON' ? MOCKS : false
+        mocks: process.env.NODE_ENV === 'production' ? false : process.env.MOCK_API && process.env.MOCK_API === 'on' ? MOCKS : false
     });
 
     const app = express();
@@ -70,7 +70,7 @@ export async function bootstrap(appModule: GraphQLModule) {
         () => {
             console.log(
                 `🚀 APOLLO GRAPHQL at http://localhost:${port}${server.graphqlPath}`,
-                process.env.MOCK_API && process.env.MOCK_API === "ON" ? "\n✨ Running Apollo server with mocks on" : "",
+                process.env.MOCK_API && process.env.MOCK_API === "on" ? "\n✨ Running Apollo server with mocks on" : "",
             );
         },
     );

setup.sh

@@ -4,7 +4,7 @@
 if [ ! -e ./packages/server/.env ]; then
     echo "BOL_API_KEY=
 NODE_ENV=development
-MOCK_API=ON" > "./packages/server/.env"
+MOCK_API=on" > "./packages/server/.env"
     echo "⚡ Created a mock .env inside server packages, 
-    turn mock off by placing your bol open api key and set MOCK_API to OFF"
+    turn mock off by placing your bol open api key and set MOCK_API to off"
 fi