Full Stack Template: Svelte, Amplify, CDK

Set Up

1. Install the following if they aren't already:

   windows> choco install nodejs
   

   mac> brew install node
   

   npm install -g @aws-amplify/cli aws-cdk typescript
   

2. Clone this repo and run:

   npm install
   

3. Create a GraphQL schema and save it as graphql/base-schema.graphql.
4. Generate AppSync schema and resolvers:

   npm run cdk.diff
   

5. Generate GraphQL statements for client use:

   npm run codegen
   

6. Develop Svelte app:

   npm run dev
   

7. Deploy Svelte app and CDK:

   npm run full.deploy
   

Folder Structure

│   README.md                   -- this
│   .gitignore                  -- ignores modules, build, .js
│   package.json                -- dependencies, npm scripts to build
│   tsconfig.json               -- TS config
│   cdk.json                    -- CDK config
│   aws-exports.json            -- used by frontend to point to backend
│   rollup.config.js            -- builds Svelte
│   
├───cdk
│       cdk.ts                  -- CDK entry point
│       *.stack.ts              -- CDK stack
│       
├───graphql
│   │   .graphqlconfig.yml      -- config for Amplify codegen
│   │   base-schema.graphql     -- GraphQL SDL schema, input
│   │   schema.graphql          -- codegen generated schema, output consumed by AppSync in CDK
│   │   
│   ├───generated-resolvers     -- generated by CDK transformer code
│   │       *.req.vtl  
│   │       *.res.vtl  
│   │       
│   └───statements              -- generated by Amplify codegen
│           mutations.js        
│           queries.js
│           subscriptions.js    
│
├───public                      -- static site output
│       index.html
│       logo.png
│       
└───src                         -- Svelte app
        index.ts                -- Svelte entry point
        store.ts                -- stores shared app state and configurations
        App.svelte              -- root Svelte page
        Header.svelte           -- header component, used to change theme
        Login.svelte            -- login component
        Theme.svelte            -- Carbon theme component
        Read*.svelte            -- sample read component
        Create*.svelte          -- sample create component

Custom Changes

• tsconfig.json taken from Svelte template, with some CDK includes and excludes added.
• rollup.config.js taken from Svelte Rollup template with the addition of:
  • @rollup/plugin-json to enable Rollup to work with Amplify;
  • rollup-plugin-visualizer to analyze bundle size.
• package.json:
  • Moved most dependencies into devDependencies since they're only needed for development.
  • Created codegen and frequently used cdk.* scripts.
    • full.deploy will deploy Amplify backend, then build site, before deploying site onto S3.
    • codegen requires @aws-amplify/cli.
• cdk.json taken from CDK standard template, but changed entry point to cdk/cdk.ts for simplicity.
• aws-exports.json is consumed by Svelte app at index.ts to connect to Cognito and AppSync backend.

Commands (npm scripts)

• Svelte dev server

  npm run dev
  

• Svelte build

  npm run build
  

• TypeScript watch for CDK and Svelte

  npm run watch
  

• Generate GraphQL statements

  npm run codegen
  

• Destroy CDK stack

  npm run cdk.destroy
  

• Deploy CDK stack

  npm run cdk.deploy
  

• See CDK stack change set and generate aws-exports.json

  npm run cdk.diff
  

• Deploy CDK, build Svelte, and deploy website

  npm run full.deploy