Closes #672

Populated .env.template files with references to a 1password vault so that .env files can be easily generated on new dev machines using `npm run env:dev`. Also added a checklist to aid in managing env vars.

ENV.md

@@ -0,0 +1,31 @@
+# Configuration Management
+
+Each module in SeaSketch has it's own configuration that needs to be managed. Things like API keys, connection strings for the database, and other secrets that cannot be committed to source code or may be changed for different deployments.
+
+These secrets are managed using environment variables. On production, these env vars are injected into the environment during deployment using a combination of GitHub Actions Secrets and outputs from CDK Stacks. When setting up a development machine this is done primarily through dotenv files (`.env`).
+
+## Setting Env Vars in Development
+
+The api and client modules each use [dotenv](https://github.com/motdotla/dotenv) to load environment variables from a `.env` file at startup. `.env` can't be checked into source control with all our secrets but `.env.template` is a starting point. Just `cp .env.template .env` and fill in the required details for both the api and client packages.
+
+#### Using 1password to populate `.env` files
+
+Instead of manually filling in values, if you have access to the team's 1Password vault it can be used to copy `.env.template` to `.env` with up-to-date
+values. To do so, install the [1password cli](https://developer.1password.com/docs/cli/get-started/) and then run the following:
+
+```
+npm run env:dev
+```
+
+Contact [Chad](mailto:[email protected]) to request access to our 1password vault.
+
+## Adding new configuration vars
+
+If you have configuration that needs to be added to SeaSketch in order to support new features, make sure to complete the following checklist.
+
+- [] Add the new var with a jsdoc describing what it does to [process-env.d.ts](https://github.com/seasketch/next/blob/master/packages/api/process-env.d.ts) for the api or [react-app-env.d.ts](https://github.com/seasketch/next/blob/master/packages/client/react-app-env.d.ts) for the client.
+- [] Add the env var to the `env.template` of the respective package so that other developers know that value needs to be set.
+- [] Add a default value to the SeaSketch dev 1password value so that it can be easily populated on other dev machines and reference that item in `.env.template`.
+- [] Add an appropriate value to GitHub Actions Secrets in the production environment
+- [] Make sure the appropriate deployment GitHub Actions workflow references the secret and loads it into the environment
+- [] If setting an env var for the api package, the [GraphQL Server CDK Stack](https://github.com/seasketch/next/blob/master/packages/infra/lib/GraphQLStack.ts#L113) needs to be updated to inject that variable into the server. It may also be appropriate to add validation code to the top of that stack to assert that the new variable is set to a valid value.

README.md

@@ -28,6 +28,8 @@ There are a lot of build scripts and dev servers needed to run the entire stack.
 
 <img src="https://user-images.githubusercontent.com/511063/93515779-ff207700-f8dd-11ea-8ceb-e9e663161e4f.png" width="300">
 
+Follow [this guide](https://github.com/seasketch/next/blob/master/ENV.md) in order to setup appropriate environment variables for development.
+
 ## Deployments
 
 This project is managed using the [GitHub Flow pattern](https://guides.github.com/introduction/flow/) and GitHub Actions. To make changes...

packages/api/.env.template

@@ -3,14 +3,24 @@ ADMIN_DATABASE_URL=postgres://postgres:password@localhost:54321/seasketch
 JWKS_URI=https://seasketch.auth0.com/.well-known/jwks.json
 JWT_AUD=https://api.seasketch.org
 JWT_ISS=https://seasketch.auth0.com/
-AUTH0_CLIENT_ID=
-AUTH0_CLIENT_SECRET=
-AUTH0_DOMAIN=seasketch.auth0.com
+AUTH0_CLIENT_ID="op://SeaSketch/dev/Auth0/ClientId"
+AUTH0_CLIENT_SECRET="op://SeaSketch/dev/Auth0/ClientSecret"
+AUTH0_DOMAIN="op://SeaSketch/dev/Auth0/Domain"
 PUBLIC_S3_BUCKET=seasketch-next-public-uploads
 PUBLIC_UPLOADS_DOMAIN=d17krkm4g5m2af.cloudfront.net
 SES_EMAIL_SOURCE='"SeaSketch" <[email protected]>'
 GRAPHILE_WORKER_CONCURRENCY=5
-TILE_PACKAGES_BUCKET=
-MAPBOX_ACCESS_TOKEN=
-CLOUDFLARE_IMAGES_TOKEN=
-CLOUDFLARE_IMAGES_ACCOUNT=
+TILE_PACKAGES_BUCKET="op://SeaSketch/dev/TilePackagesBucket"
+MAPBOX_ACCESS_TOKEN="op://SeaSketch/dev/Mapbox/AccessToken"
+CLOUDFLARE_IMAGES_TOKEN="op://SeaSketch/dev/CloudFlareImages/Token"
+CLOUDFLARE_IMAGES_ACCOUNT="op://SeaSketch/dev/CloudFlareImages/Account"
+CLOUDFLARE_IMAGES_ACCOUNT_HASH="op://SeaSketch/dev/CloudFlareImages/AccountHash"
+R2_FILE_UPLOADS_BUCKET="op://SeaSketch/dev/R2/FileUploadsBucket"
+R2_ENDPOINT="op://SeaSketch/dev/R2/Endpoint"
+R2_ACCESS_KEY_ID="op://SeaSketch/dev/R2/AccessKeyId"
+R2_SECRET_ACCESS_KEY="op://SeaSketch/dev/R2/SecretAccessKey"
+SCREENSHOTTER_FUNCTION_ARN="op://SeaSketch/dev/ScreenshotterFunctionArn"
+POEDITOR_API_TOKEN="op://SeaSketch/dev/POEditor/APIToken"
+POEDITOR_PROJECT="op://SeaSketch/dev/POEditor/Project"
+REDIS_PASSWORD="op://SeaSketch/dev/Redis/Password"
+CLIENT_DOMAIN="op://SeaSketch/dev/ClientDomain"

packages/api/package.json

@@ -30,7 +30,8 @@
     "db:down": "docker-compose down",
     "db:drift": "diff -w generated-schema.gql generated-schema-clean.gql",
     "db:schema": "docker exec seasketch_db pg_dump --no-sync --schema-only --no-owner --exclude-schema=graphile_migrate --exclude-schema=postgraphile_watch -U postgres seasketch > ./schema.sql",
-    "db:logs": "docker-compose logs -f --tail=100 db"
+    "db:logs": "docker-compose logs -f --tail=100 db",
+    "env:dev": "op inject -i .env.template > .env"
   },
   "bugs": {
     "url": "https://github.com/seasketch/next/issues"

packages/api/process-env.d.ts

@@ -24,7 +24,9 @@ declare namespace NodeJS {
     AWS_SECRET_ACCESS_KEY: string;
     PUBLIC_UPLOADS_DOMAIN: string;
     UNSPLASH_KEY: string;
+    /** s3 bucket where offline tile packages are stored */
     TILE_PACKAGES_BUCKET: string;
+    /* Used when generating various links. Include protocol */
     CLIENT_DOMAIN: string;
     SPATIAL_UPLOADS_BUCKET: string;
     NORMALIZED_SPATIAL_UPLOADS_BUCKET: string;
@@ -38,8 +40,11 @@ declare namespace NodeJS {
     CLOUDFLARE_IMAGES_ACCOUNT_HASH: string;
     /** May be comma seperated list. First issuer should be the primary host */
     ISSUER?: string;
+    /* Used for generating email verification links */
     API_ROOT: string;
+    /* Lambda used for taking screenshots of map bookmakrs */
     SCREENSHOTTER_FUNCTION_ARN: string;
+    /* For discussion forum and survey file uploads */
     R2_FILE_UPLOADS_BUCKET: string;
   }
 }

packages/client/.env.template

@@ -1,5 +1,10 @@
-REACT_APP_AUTH0_CLIENT_ID=
-REACT_APP_AUTH0_DOMAIN=
+REACT_APP_AUTH0_CLIENT_ID="op://SeaSketch/dev/Auth0/ClientId"
+REACT_APP_AUTH0_DOMAIN="op://SeaSketch/dev/Auth0/Domain"
+REACT_APP_AUTH0_SCOPE="openid profile email"
+REACT_APP_AUTH0_AUDIENCE=https://api.seasketch.org
 REACT_APP_GRAPHQL_ENDPOINT=http://localhost:3857/graphql
-REACT_APP_MAPBOX_ACCESS_TOKEN=
-REACT_APP_CLOUDFRONT_DOCS_DISTRO=
+REACT_APP_MAPBOX_ACCESS_TOKEN="op://SeaSketch/dev/Mapbox/AccessToken"
+REACT_APP_AUTH0_SCOPE="openid profile email offline_access"
+REACT_APP_CLOUDFRONT_DOCS_DISTRO="op://SeaSketch/dev/Cloudfront/DocsDistro"
+REACT_APP_CLOUDFLARE_IMAGES_ENDPOINT="op://SeaSketch/dev/CloudflareImages/Endpoint"
+REACT_APP_ARCGIS_DEVELOPER_API_KEY="op://SeaSketch/dev/ArcGIS/DeveloperAPIKey"

packages/client/package.json

@@ -252,7 +252,8 @@
     "deploy": "bin/deploy.sh",
     "cypress": "cypress open",
     "cypress:run": "cypress run",
-    "generate-api-helpers": "node bin/buildApiHelpers.js && cp src/formElements/ExportUtils.d.ts ../api/src/"
+    "generate-api-helpers": "node bin/buildApiHelpers.js && cp src/formElements/ExportUtils.d.ts ../api/src/",
+    "env:dev": "op inject -i .env.template > .env"
   },
   "eslintConfig": {
     "extends": "react-app"