Client Installation Setup

Installation

This setup uses the s6pack-cloud app that must be installed prior to the client setup. Follow the s6pack-cloud instructions here.
Clone this repository, then cd into the project folder.
run
```
npm install
```
Delete the .git folder
Create a new project in Github (eg: s6pack-example)

Environment Variables Setup

Copy .env.template to .env and replace the dummy values with your own (Use s6pack Cloud app to create these variables or use s6pack Cloud as reference to create your own necessary services). Populate the commented live verson variables as well- they will be used later for copying into git hub secrets for deployment.
```
REACT_APP_AWS_REGION = "{your region here eg: us-west-1}"
```
User pool ids can be found here. Add to the variable in the .env file here:
```
REACT_APP_USER_POOL_ID = "us-west-1_{dev pool id here}"
```
For the blue and green env variables, use the dataStackLive_user_pool

Next populate the User Pool App Client ID. It can be found in the AWS console by clicking the user pool name, then click the App Integration tab, then at the bottom section under App client list you will see a list of App clients called something like dataStackDev-non_generated_secret_client. Copy the Client ID and paste it here:
```
REACT_APP_USER_POOL_WEB_CLIENT_ID="{client id here}"
```
For the blue and green env variables, use the dataStackLive_user_pool.

Next, find the Identity Pool Ids here. Populate the vairable below using the dataStackDev-Identity-pool:
```
REACT_APP_AWS_IDENTITY_POOL_ID = "us-west-1:{dev pool id here}"
```
For the blue and green env variables, use the dataStackLive_identity_pool.

Leave the following as is:
```
REACT_APP_APPSYNC_AUTHENTICATION_TYPE = "AMAZON_COGNITO_USER_POOLS"
```
Add your Graphql endpoints (defaulted to dev, blue, and green subdomains). They can be found here and click the Custom domain names in the left column:
```
REACT_APP_APPSYNC_CUSTOM_GRAPHQL_ENDPOINT = "https://dev.{your-appsync-site}/graphql"
```
IAM Region defaulted to us-west-1
```
REACT_APP_APPSYNC_IAM_REGION = "us-west-1"
```
For the stripe publishable key, log into your stripe dashboard API Keys tab here and click pk_live_... to get the publishable key. Paste that into the blue and green live vars. For the dev site, toggle Test Mode at the top of the page to reveal the test publishable key.
```
REACT_APP_STRIPE_PUBLISHABLE_KEY="pk_test_{test stripe secret key here}"
```
Next, log into you Google ReCAPTCHA account here and select reCAPTCHA v2 checkbox your domain name. Click the Settings icon. Under the reCAPTCHA keys section click the COPY SITE KEY button and paste it into the blue and green section. Leave the dev site key as is since it isd the test key for local testing.
```
REACT_APP_RECAPTCHA_SITE_KEY = "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
```
Leave the default “dev/live_business_plan” for tyhe last env variable:
```
REACT_APP_TRIAL_PERIOD_SUBSCRIPTION_ID = "dev_business_plan"
```

AWS IAM User Setup

For AWS access key and secret, create a new IAM user here (eg: a User named ClientAppGithubWorkfows)
Select Attach policies directly

On the “Specify Permissions” page, click JSON and paste the following limited permissions (replace domain_name with your domain name):

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AccessToGetBucketLocation",
      "Effect": "Allow",
      "Action": [
        "s3:GetBucketLocation"
      ],
      "Resource": [
        "arn:aws:s3:::*"
      ]
    },
    {
      "Sid": "AccessToWebsiteBuckets",
      "Effect": "Allow",
      "Action": [
        "s3:PutBucketWebsite",
        "s3:PutObject",
        "s3:PutObjectAcl",
        "s3:GetObject",
        "s3:ListBucket",
        "s3:DeleteObject"
      ],
      "Resource": [
        "arn:aws:s3:::dev.domain_name.com",
        "arn:aws:s3:::dev.domain_name.com/*",
        "arn:aws:s3:::green.domain_name.com",
        "arn:aws:s3:::green.domain_name.com/*",
        "arn:aws:s3:::blue.domain_name.com",
        "arn:aws:s3:::blue.domain_name.com/*"
      ]
    }
  ]
}

Create a Policy Name (eg. ClientAppGithubWorkfowsPolicy) and click Create Policy.
Click your newly created user and select the Security Credentials tab. Cick the Create Access Key under the Access Keys tab. Select Other. For the Decription you can type GithubWorkflows. Click Create Access Key.