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