Move optional mocking behind flag #29
Conversation
shanejearley
changed the title
|
Will need to make a few more changes for cleanup. |
Just to clarify, "we pass in environment variables" should be "the script passes environment variables" as a result of the
I will wait for you @ccali11 to pull down and try/confirm/tear-apart before merging. |
Otherwise - dude - this is so clean and well done. Nothing to tear to shreds. I set it up and it worked perfectly for me, although I already had my aws user and SAM cli installed. May be worth having Hawyar take try to run it (purposely didn't tag him so that I don't bias his experience). |
|
Going to skim through your code now before approving. |
There was a problem hiding this comment.
So nicely done, @shanejearley. Feel free to ignore my questions if it's more trouble than it's worth answering them. Otherwise down to review whenever. Everything built nicely and was able to use the form and receive an email.
| * | ||
| * @returns {string} The base URL for the users API | ||
| */ | ||
| function getUsersBaseUrl(): string { |
| @@ -13,8 +13,8 @@ declare module '*.vue' { | |||
| export default component | |||
| } | |||
|
|
|||
| declare type SignupResponse = { | |||
There was a problem hiding this comment.
Is this file autogenerated?
| @@ -6,6 +6,9 @@ import '@/index.css' | |||
| import { createRouter, createWebHistory } from 'vue-router' | |||
| import routes from '~pages' | |||
|
|
|||
| console.log('Creating app...', import.meta.env) | |||
There was a problem hiding this comment.
I'm not familiar with this import.meta.env syntax. What is that?
There was a problem hiding this comment.
| @@ -1,69 +1,47 @@ | |||
| <script lang="ts" setup> | |||
| import { ArrowRightIcon } from '@heroicons/vue/solid' | |||
| import { ref, onMounted } from 'vue' | |||
| import { ref, Ref } from 'vue' | |||
There was a problem hiding this comment.
Nice refactors / cleanup. Can you point me to where I can learn more about this syntax? (Ref = ref<HTMLDivElement>())
I take it that lines 9 and 10 are enabled with Ref and html tag attributes such as ref="successMessage" below.
| @@ -1,14 +1,22 @@ | |||
| #!/usr/bin/env node | |||
| import 'source-map-support/register' | |||
| import * as cdk from 'aws-cdk-lib' | |||
| import { pascalCase } from '@casimir/lib' | |||
There was a problem hiding this comment.
How long did it take to familiarize yourself with the SAM/CDK? This all looks great.
| /** | ||
| * WebsiteStack class constructor. | ||
| * | ||
| * Shortest name: {@link (WebsiteStack:constructor)} | ||
| * Full name: {@link (WebsiteStack:constructor)} | ||
| */ | ||
| constructor(scope: Construct, id: string, props?: StackProps) { |
There was a problem hiding this comment.
what's the difference between WebsiteStackProps and StackProps?
| @@ -1,40 +1,43 @@ | |||
| #!/bin/sh | |||
There was a problem hiding this comment.
Did you write all of these scripts in the scripts directory from scratch? V impressive.
| @@ -5,7 +5,7 @@ import { | |||
| } from '@aws-sdk/client-pinpoint' | |||
| import { APIGatewayEvent } from 'aws-lambda' | |||
| import { pascalCase } from '@casimir/lib' | |||
There was a problem hiding this comment.
Where is this @casimir/lib?
| @@ -5,7 +5,7 @@ import { | |||
| } from '@aws-sdk/client-pinpoint' | |||
| import { APIGatewayEvent } from 'aws-lambda' | |||
| import { pascalCase } from '@casimir/lib' | |||
| import { SignupResponse } from '../env' | |||
| import { APIGatewayResponse } from '../env' | |||
There was a problem hiding this comment.
What's the need/rationale for this change?
| body: { | ||
| message: 'pong' |
Makes the basic setup unreliant on any externally-installed CLI tool and moves mocking behind a flag.
Basic setup
Run
npm run devfrom project root. Uses the AWS-deployeddevstage endpoints service endpoints by default in the Vue app, so no upfront config is necessary. This stage can be overridden in .env with STAGE variable.Mocking setup
Install the SAM CLI on your machine and then run
npm run dev --mock. Uses the localdevstage endpoints (which you may even prefer to override withprodto do things like reference production static resources (email templates, for example) and pass them into your local development for testing. SAM CLI can crawl our AWS CDK stacks to find and serve API Gateway endpoints. We pass in environment variables to the frontend development server (process.env.PUBLIC_MOCK, process.env.PUBLIC_{"api-name")_URL to switch to local endpoint URLs.Wrote more about the setup in the README.md. More about the SAM/CDK mocking integration here, and our script using the CLI is here.
Lastly just moved AWS-deployed API endpoints behind our custom domain for clean reference based on the current environment's stage.