rltactics-vue

This template should help get you started developing with Vue 3 in Vite.

Initial Setup

Install node + npm
npm install -g @aws-amplify/cli
amplify configure
amplify pull (this is done to create a file at ./aws-exports.js, there may be an easier way).
npm run dev to make sure it's running.
You may get a 401 on the graphql endpoint if you haven't worked on the project for a while. If so,
- Log in to AWS console
- Navigate to AWS AppSync settings. You'll probably see 'All key(s) expired'.
- Edit the API key's expiration to some date in the future.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Development Workflow

Typically you can just run npm run dev which will start a hot-reloading server for the vue frontend. It'll print the localhost url you can visit. This will cause it to hit the real backend in AWS, i.e. the auto-generated lambdas and dynamodb tables designed to service the graphql schema.

If you want to experiment with changes to the schema, you can run amplify mock and then npm run dev concurrently. This will set up a fake backend that persists data to local files. It works pretty well, though there seems to be an issue with mocking the subscriptions (works fine in prod):

Connection failed: {"errors":[{"message":"Unable to convert $extensions.setSubscriptionFilter($util.transform.toSubscriptionFilter($ctx.args.filter))\nnull\n to class com.amazonaws.deepdish.transform.model.lambda.LambdaVersionedConfig.","errorType":"MappingTemplate","data":null,"errorInfo":null,"path":["onUpdateGame"],"locations":[{"line":2,"column":3,"sourceName":"GraphQL request"}]}],"data":{"onUpdateGame":null}}

If you're willing to risk prod, you can do amplify push instead which will update the real prod backend with your new schema changes. Then you can forego the mock and the subscriptions will work.

When you push to the 'main' branch in git, amplify will automatically deploy any remaining changes, both front end and back end.

Schema Development

The heart of the schema lives at /amplify/backend/api/rltactics/schema.graphql. Many things are auto-generated based on this file:

The backend databases and lambdas
Front end queries and data types

One low-consequence way of regenerating is to briefly run amplify mock. There's probably a more direct way.

You can also add your own front end queries. I've established a file at /src/graphql/customQueries.ts that can also drive the auto generation of data types. If it grows too big you can make more files in that same directory and it should automatically work.

Project Evolution

The starting code in this project was generated by various CLI tools:

Vue
AWS Amplify

I followed this tutorial: https://docs.amplify.aws/start/getting-started/installation/q/integration/vue/

I then swapped the Apollo client provided by Amplify with a more canonical apollo client which seems more powerful and easier to find documentation for.

Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint

tarehart/rltactics