Merge pull request #122 from ubilabs/fix/env-variables-for-windows

fix(package): make environment variables work properly for all platforms

Author: BiniCodes

README.md

@@ -31,6 +31,9 @@ You need to have React [16.8.0](https://reactjs.org/blog/2019/02/06/react-v16.8.
 npm install @ubilabs/google-maps-react-hooks -D
 ```
 
+**NOTE FOR WINDOWS USERS**:
+We are using [cross-env](https://github.com/kentcdodds/cross-env) for environment variables to work on all platforms. There is an issue that `npm` uses `cmd` by default. The workaround is to add `script-shell` to `powershell` in your `.npmrc`. Please follow [this setup](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729) to make it work.
+
 ## Library
 
 The full Google Maps React Hooks library can be found in the [library directory](./library).

examples/basic-google-map/README.md

@@ -29,6 +29,9 @@ GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"
 
 An example can be found in `.env.example`.
 
+**NOTE FOR WINDOWS USERS**:
+We are using [cross-env](https://github.com/kentcdodds/cross-env) for environment variables to work on all platforms. There is an issue that `npm` uses `cmd` by default. The workaround is to add `script-shell` to `powershell` in your `.npmrc`. Please follow [this setup](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729) to make it work.
+
 ## Output
 
 The project will start at [localhost:1234](http://localhost:1234) and show a basic Google Map.

examples/directions-service/README.md

@@ -29,6 +29,9 @@ GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"
 
 An example can be found in `.env.example`.
 
+**NOTE FOR WINDOWS USERS**:
+We are using [cross-env](https://github.com/kentcdodds/cross-env) for environment variables to work on all platforms. There is an issue that `npm` uses `cmd` by default. The workaround is to add `script-shell` to `powershell` in your `.npmrc`. Please follow [this setup](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729) to make it work.
+
 ## Output
 
 The project will start at [localhost:1234](http://localhost:1234) and show a Google Map with a route from Berlin to Munich, retrieved from directions.

examples/distance-matrix-service/README.md

@@ -29,6 +29,9 @@ GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"
 
 An example can be found in `.env.example`.
 
+**NOTE FOR WINDOWS USERS**:
+We are using [cross-env](https://github.com/kentcdodds/cross-env) for environment variables to work on all platforms. There is an issue that `npm` uses `cmd` by default. The workaround is to add `script-shell` to `powershell` in your `.npmrc`. Please follow [this setup](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729) to make it work.
+
 ## Output
 
 The project will start at [localhost:1234](http://localhost:1234) and show Google Map with a origin and different destinations. A side panel will show the different durations and distances to the destinations.

examples/elevation-service/README.md

@@ -27,6 +27,9 @@ To see the examples it is needed to add an `.env` file with a [Google Maps API k
 
 An example can be found in `.env.example`.
 
+**NOTE FOR WINDOWS USERS**:
+We are using [cross-env](https://github.com/kentcdodds/cross-env) for environment variables to work on all platforms. There is an issue that `npm` uses `cmd` by default. The workaround is to add `script-shell` to `powershell` in your `.npmrc`. Please follow [this setup](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729) to make it work.
+
 ## Output
 
 The project will start at [localhost:1234](http://localhost:1234) and show an infowindow on a map asking to click somewhere on the map to see the elevation of that position.

examples/geocoding-service/README.md

@@ -29,6 +29,9 @@ GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"
 
 An example can be found in `.env.example`.
 
+**NOTE FOR WINDOWS USERS**:
+We are using [cross-env](https://github.com/kentcdodds/cross-env) for environment variables to work on all platforms. There is an issue that `npm` uses `cmd` by default. The workaround is to add `script-shell` to `powershell` in your `.npmrc`. Please follow [this setup](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729) to make it work.
+
 ## Output
 
 The project will start at [localhost:1234](http://localhost:1234) and show a Google Map where the user can click on the map and the coordinates will be reversed geocoded into a human readable address.

examples/google-map-with-markers/README.md

@@ -29,6 +29,9 @@ GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"
 
 An example can be found in `.env.example`.
 
+**NOTE FOR WINDOWS USERS**:
+We are using [cross-env](https://github.com/kentcdodds/cross-env) for environment variables to work on all platforms. There is an issue that `npm` uses `cmd` by default. The workaround is to add `script-shell` to `powershell` in your `.npmrc`. Please follow [this setup](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729) to make it work.
+
 ## Output
 
 The project will start at [localhost:1234](http://localhost:1234) and show a Google Map with markers.

examples/max-zoom-service/README.md

@@ -27,6 +27,9 @@ To see the examples it is needed to add an `.env` file with a [Google Maps API k
 
 An example can be found in `.env.example`.
 
+**NOTE FOR WINDOWS USERS**:
+We are using [cross-env](https://github.com/kentcdodds/cross-env) for environment variables to work on all platforms. There is an issue that `npm` uses `cmd` by default. The workaround is to add `script-shell` to `powershell` in your `.npmrc`. Please follow [this setup](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729) to make it work.
+
 ## Output
 
 The project will start at [localhost:1234](http://localhost:1234) and show an infowindow on a map asking to click somewhere on the map to see the max zoom for map type imagery for a position.

examples/multiple-google-maps/README.md

@@ -29,6 +29,9 @@ GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"
 
 An example can be found in `.env.example`.
 
+**NOTE FOR WINDOWS USERS**:
+We are using [cross-env](https://github.com/kentcdodds/cross-env) for environment variables to work on all platforms. There is an issue that `npm` uses `cmd` by default. The workaround is to add `script-shell` to `powershell` in your `.npmrc`. Please follow [this setup](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729) to make it work.
+
 ## Output
 
 The project will start at [localhost:1234](http://localhost:1234) and show multiple Google Map instances.

examples/package.json

@@ -9,20 +9,20 @@
     "test": "npm run linter && npm run typecheck && npm run formatter",
     "clean-examples": "rm -rf ./public ../.parcel-cache",
     "start:example": "npm run clean-examples && cross-env $(cat .env) PARCEL_AUTOINSTALL=false parcel serve $EXAMPLE_ENTRY --dist-dir public --port 1234 --no-cache",
-    "start:map": "EXAMPLE_ENTRY=./basic-google-map/index.html npm run start:example",
-    "start:map-with-markers": "EXAMPLE_ENTRY=./google-map-with-markers/index.html npm run start:example",
-    "start:multiple-maps": "EXAMPLE_ENTRY=./multiple-google-maps/index.html npm run start:example",
-    "start:geocoding-service": "EXAMPLE_ENTRY=./geocoding-service/index.html npm run start:example",
-    "start:places-service": "EXAMPLE_ENTRY=./places-service/index.html npm run start:example",
-    "start:places-service-with-element": "EXAMPLE_ENTRY=./places-service-with-element/index.html npm run start:example",
-    "start:places-autocomplete-widget": "EXAMPLE_ENTRY=./places-autocomplete-widget/index.html npm run start:example",
-    "start:directions-service": "EXAMPLE_ENTRY=./directions-service/index.html npm run start:example",
-    "start:distance-matrix-service": "EXAMPLE_ENTRY=./distance-matrix-service/index.html npm run start:example",
-    "start:elevation-service": "EXAMPLE_ENTRY=./elevation-service/index.html npm run start:example",
-    "start:max-zoom-service": "EXAMPLE_ENTRY=./max-zoom-service/index.html npm run start:example",
-    "start:places-autocomplete-service": "EXAMPLE_ENTRY=./places-autocomplete-service/index.html npm run start:example",
-    "start:street-view-panorama-map": "EXAMPLE_ENTRY=./street-view-panorama-map/index.html npm run start:example",
-    "start:street-view-panorama-element": "EXAMPLE_ENTRY=./street-view-panorama-with-element/index.html npm run start:example",
+    "start:map": "cross-env EXAMPLE_ENTRY=./basic-google-map/index.html npm run start:example",
+    "start:map-with-markers": "cross-env EXAMPLE_ENTRY=./google-map-with-markers/index.html npm run start:example",
+    "start:multiple-maps": "cross-env EXAMPLE_ENTRY=./multiple-google-maps/index.html npm run start:example",
+    "start:geocoding-service": "cross-env EXAMPLE_ENTRY=./geocoding-service/index.html npm run start:example",
+    "start:places-service": "cross-env EXAMPLE_ENTRY=./places-service/index.html npm run start:example",
+    "start:places-service-with-element": "cross-env EXAMPLE_ENTRY=./places-service-with-element/index.html npm run start:example",
+    "start:places-autocomplete-widget": "cross-env EXAMPLE_ENTRY=./places-autocomplete-widget/index.html npm run start:example",
+    "start:directions-service": "cross-env EXAMPLE_ENTRY=./directions-service/index.html npm run start:example",
+    "start:distance-matrix-service": "cross-env EXAMPLE_ENTRY=./distance-matrix-service/index.html npm run start:example",
+    "start:elevation-service": "cross-env EXAMPLE_ENTRY=./elevation-service/index.html npm run start:example",
+    "start:max-zoom-service": "cross-env EXAMPLE_ENTRY=./max-zoom-service/index.html npm run start:example",
+    "start:places-autocomplete-service": "cross-env EXAMPLE_ENTRY=./places-autocomplete-service/index.html npm run start:example",
+    "start:street-view-panorama-map": "cross-env EXAMPLE_ENTRY=./street-view-panorama-map/index.html npm run start:example",
+    "start:street-view-panorama-element": "cross-env EXAMPLE_ENTRY=./street-view-panorama-with-element/index.html npm run start:example",
     "preversion": "echo \"To create a new library version run 'npm version -w library' in the repository root.\""
   },
   "license": "MIT",

examples/places-autocomplete-service/README.md

@@ -29,6 +29,9 @@ GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"
 
 An example can be found in `.env.example`.
 
+**NOTE FOR WINDOWS USERS**:
+We are using [cross-env](https://github.com/kentcdodds/cross-env) for environment variables to work on all platforms. There is an issue that `npm` uses `cmd` by default. The workaround is to add `script-shell` to `powershell` in your `.npmrc`. Please follow [this setup](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729) to make it work.
+
 ## Output
 
 The project will start at [localhost:1234](http://localhost:1234) and show a map with an input field and an autocomplete functionality.

examples/places-autocomplete-widget/README.md

@@ -29,6 +29,9 @@ GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"
 
 An example can be found in `.env.example`.
 
+**NOTE FOR WINDOWS USERS**:
+We are using [cross-env](https://github.com/kentcdodds/cross-env) for environment variables to work on all platforms. There is an issue that `npm` uses `cmd` by default. The workaround is to add `script-shell` to `powershell` in your `.npmrc`. Please follow [this setup](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729) to make it work.
+
 ## Output
 
 The project will start at [localhost:1234](http://localhost:1234) and show a map with an input field and an autocomplete functionality.

examples/places-service-with-element/README.md

@@ -29,6 +29,9 @@ GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"
 
 An example can be found in `.env.example`.
 
+**NOTE FOR WINDOWS USERS**:
+We are using [cross-env](https://github.com/kentcdodds/cross-env) for environment variables to work on all platforms. There is an issue that `npm` uses `cmd` by default. The workaround is to add `script-shell` to `powershell` in your `.npmrc`. Please follow [this setup](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729) to make it work.
+
 ## Output
 
 The project will start at [localhost:1234](http://localhost:1234) and show a list of restaurants and their ratings close to Istanbul. Information is retrieved from Places Service.

examples/places-service/README.md

@@ -29,6 +29,9 @@ GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"
 
 An example can be found in `.env.example`.
 
+**NOTE FOR WINDOWS USERS**:
+We are using [cross-env](https://github.com/kentcdodds/cross-env) for environment variables to work on all platforms. There is an issue that `npm` uses `cmd` by default. The workaround is to add `script-shell` to `powershell` in your `.npmrc`. Please follow [this setup](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729) to make it work.
+
 ## Output
 
 The project will start at [localhost:1234](http://localhost:1234) and show a Google Map that highlights all nearby Cafes to the central station in Hamburg, and their opening hours. Information is retrieved from Places Service.

examples/street-view-panorama-map/README.md

@@ -27,6 +27,9 @@ To see the examples it is needed to add an `.env` file with a [Google Maps API k
 
 An example can be found in `.env.example`.
 
+**NOTE FOR WINDOWS USERS**:
+We are using [cross-env](https://github.com/kentcdodds/cross-env) for environment variables to work on all platforms. There is an issue that `npm` uses `cmd` by default. The workaround is to add `script-shell` to `powershell` in your `.npmrc`. Please follow [this setup](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729) to make it work.
+
 ## Output
 
 The project will start at [localhost:1234](http://localhost:1234) and show a map with street view.

examples/street-view-panorama-with-element/README.md

@@ -27,6 +27,9 @@ To see the examples it is needed to add an `.env` file with a [Google Maps API k
 
 An example can be found in `.env.example`.
 
+**NOTE FOR WINDOWS USERS**:
+We are using [cross-env](https://github.com/kentcdodds/cross-env) for environment variables to work on all platforms. There is an issue that `npm` uses `cmd` by default. The workaround is to add `script-shell` to `powershell` in your `.npmrc`. Please follow [this setup](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729) to make it work.
+
 ## Output
 
 The project will start at [localhost:1234](http://localhost:1234) and show a map with a street view element at the right bottom.

library/README.md

@@ -49,6 +49,9 @@ You need to have React [16.8.0](https://reactjs.org/blog/2019/02/06/react-v16.8.
 npm install @ubilabs/google-maps-react-hooks -D
 ```
 
+**NOTE FOR WINDOWS USERS**:
+We are using [cross-env](https://github.com/kentcdodds/cross-env) for environment variables to work on all platforms. There is an issue that `npm` uses `cmd` by default. The workaround is to add `script-shell` to `powershell` in your `.npmrc`. Please follow [this setup](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729) to make it work.
+
 ## Map Usage
 
 Import the `GoogleMapsProvider` and wrap it around your components.

package.json

@@ -10,20 +10,20 @@
     "test": "npm run test -ws --if-present",
     "start:library": "npm start -w library",
     "start:example": "./start-example.sh",
-    "start:map-example": "EXAMPLE=map run-p start:library start:example",
-    "start:map-with-markers-example": "EXAMPLE=map-with-markers run-p start:library start:example",
-    "start:multiple-maps-example": "EXAMPLE=multiple-maps run-p start:library start:example",
-    "start:geocoding-service-example": "EXAMPLE=geocoding-service run-p start:library start:example",
-    "start:places-service-example": "EXAMPLE=places-service run-p start:library start:example",
-    "start:places-service-with-element-example": "EXAMPLE=places-service-with-element run-p start:library start:example",
-    "start:places-autocomplete-widget-example": "EXAMPLE=places-autocomplete-widget run-p start:library start:example",
-    "start:directions-service-example": "EXAMPLE=directions-service run-p start:library start:example",
-    "start:distance-matrix-service-example": "EXAMPLE=distance-matrix-service run-p start:library start:example",
-    "start:elevation-service-example": "EXAMPLE=elevation-service run-p start:library start:example",
-    "start:max-zoom-service-example": "EXAMPLE=max-zoom-service run-p start:library start:example",
-    "start:places-autocomplete-service-example": "EXAMPLE=places-autocomplete-service run-p start:library start:example",
-    "start:street-view-panorama-map-example": "EXAMPLE=street-view-panorama-map run-p start:library start:example",
-    "start:street-view-panorama-element-example": "EXAMPLE=street-view-panorama-element run-p start:library start:example",
+    "start:map-example": "cross-env EXAMPLE=map run-p start:library start:example",
+    "start:map-with-markers-example": "cross-env EXAMPLE=map-with-markers run-p start:library start:example",
+    "start:multiple-maps-example": "cross-env EXAMPLE=multiple-maps run-p start:library start:example",
+    "start:geocoding-service-example": "cross-env EXAMPLE=geocoding-service run-p start:library start:example",
+    "start:places-service-example": "cross-env EXAMPLE=places-service run-p start:library start:example",
+    "start:places-service-with-element-example": "cross-env EXAMPLE=places-service-with-element run-p start:library start:example",
+    "start:places-autocomplete-widget-example": "cross-env EXAMPLE=places-autocomplete-widget run-p start:library start:example",
+    "start:directions-service-example": "cross-env EXAMPLE=directions-service run-p start:library start:example",
+    "start:distance-matrix-service-example": "cross-env EXAMPLE=distance-matrix-service run-p start:library start:example",
+    "start:elevation-service-example": "cross-env EXAMPLE=elevation-service run-p start:library start:example",
+    "start:max-zoom-service-example": "cross-env EXAMPLE=max-zoom-service run-p start:library start:example",
+    "start:places-autocomplete-service-example": "cross-env EXAMPLE=places-autocomplete-service run-p start:library start:example",
+    "start:street-view-panorama-map-example": "cross-env EXAMPLE=street-view-panorama-map run-p start:library start:example",
+    "start:street-view-panorama-element-example": "cross-env EXAMPLE=street-view-panorama-element run-p start:library start:example",
     "preversion": "echo \"To create a new library version run 'npm version -w library' in the repository root.\""
   },
   "keywords": [