Skip to content
@aws/nx-plugin
Blog

AI Dungeon Game

Module 1: Monorepo setup

We are going to start by creating a new monorepo. From within your desired directory, run the following command:

Terminal window
npx create-nx-workspace@~20.6.3 dungeon-adventure --pm=pnpm --preset=ts --ci=skip --formatter=prettier

This will set up a NX monorepo within the dungeon-adventure directory which you can then open in vscode. It should look like the following:

  • Directory.nx/
    • …
  • Directory.vscode/
    • …
  • Directorynode_modules/
    • …
  • Directorypackages/ this is where your sub-projects will reside
    • …
  • .gitignore
  • .npmrc
  • .prettierignore
  • .prettierrc
  • nx.json configures the Nx CLI and monorepo defaults
  • package.json all node dependencies are defined here
  • pnpm-lock.yaml or bun.lock, yarn.lock, package-lock.json depending on package manager
  • pnpm-workspace.yaml if using pnpm
  • README.md
  • tsconfig.base.json all node based sub-projects extend this
  • tsconfig.json

In order to start adding components from the @aws/nx-plugin into the monorepo, we need to install it as a dev dependency by running the following command from the root of the dungeon-adventure monorepo:

Terminal window
pnpm add -Dw @aws/nx-plugin

Now we are ready to start creating our different sub-projects using the @aws/nx-plugin.

Game API

First let’s create our Game API. To do this, let’s create a tRPC API called GameApi by following the below steps:

  1. Install the Nx Console VSCode Plugin if you haven't already
  2. Open the Nx Console in VSCode
  3. Click Generate (UI) in the "Common Nx Commands" section
  4. Search for @aws/nx-plugin - ts#trpc-api
  5. Fill in the required parameters
    • apiName: GameApi
  6. Click Generate

You should see some new files have appeared in your file tree.

Click here to examine these files in more detail.

Story API

Now let’s create our Story API. To do this, let’s create a Fast API called StoryApi by following the below steps:

  1. Install the Nx Console VSCode Plugin if you haven't already
  2. Open the Nx Console in VSCode
  3. Click Generate (UI) in the "Common Nx Commands" section
  4. Search for @aws/nx-plugin - py#fast-api
  5. Fill in the required parameters
    • name: StoryApi
  6. Click Generate

You should see some new files have appeared in your file tree.

Click here to examine these files in more detail.

Game UI: Website

Now let’s create the UI which will enable you to interact with the game. To do this, let’s create a website called GameUI by following the below steps:

  1. Install the Nx Console VSCode Plugin if you haven't already
  2. Open the Nx Console in VSCode
  3. Click Generate (UI) in the "Common Nx Commands" section
  4. Search for @aws/nx-plugin - ts#cloudscape-website
  5. Fill in the required parameters
    • name: GameUI
  6. Click Generate

You should see some new files have appeared in your file tree.

Click here to examine these files in more detail.

Game UI: Auth

Now let’s configure our Game UI to require authenticated access via Amazon Cognito by following the below steps:

  1. Install the Nx Console VSCode Plugin if you haven't already
  2. Open the Nx Console in VSCode
  3. Click Generate (UI) in the "Common Nx Commands" section
  4. Search for @aws/nx-plugin - ts#cloudscape-website#auth
  5. Fill in the required parameters
    • cognitoDomain: game-ui
    • project: @dungeon-adventure/game-ui
    • allowSignup: true
  6. Click Generate

You should see some new files have appeared/changed in your file tree.

Click here to examine these files in more detail.

Game UI: Connect to Story API

Now let’s configure our Game UI to connect to our previously created Story API:

  1. Install the Nx Console VSCode Plugin if you haven't already
  2. Open the Nx Console in VSCode
  3. Click Generate (UI) in the "Common Nx Commands" section
  4. Search for @aws/nx-plugin - api-connection
  5. Fill in the required parameters
    • sourceProject: @dungeon-adventure/game-ui
    • targetProject: dungeon_adventure.story_api
  6. Click Generate

You should see some new files have appeared/changed in your file tree.

Click here to examine these files in more detail.

Game UI: Connect to Game API

Now let’s configure our Game UI to connect to our previously created Game API:

  1. Install the Nx Console VSCode Plugin if you haven't already
  2. Open the Nx Console in VSCode
  3. Click Generate (UI) in the "Common Nx Commands" section
  4. Search for @aws/nx-plugin - api-connection
  5. Fill in the required parameters
    • sourceProject: @dungeon-adventure/game-ui
    • targetProject: @dungeon-adventure/game-api-backend
  6. Click Generate

You should see some new files have appeared/changed in your file tree.

Click here to examine these files in more detail.

Game UI: Infrastructure

Now the final sub-project we need to create is for the CDK infrastructure. To create this, follow the below steps:

  1. Install the Nx Console VSCode Plugin if you haven't already
  2. Open the Nx Console in VSCode
  3. Click Generate (UI) in the "Common Nx Commands" section
  4. Search for @aws/nx-plugin - ts#infra
  5. Fill in the required parameters
    • name: infra
  6. Click Generate

You should see some new files have appeared/changed in your file tree.

Click here to examine these files in more detail.

Update our infrastructure

Let’s make an update to our packages/infra/src/stacks/application-stack.ts to instantiate some of our already generated constructs:

import {
  GameApi,
  GameUI,
  StoryApi,
  UserIdentity,
} from ':dungeon-adventure/common-constructs';
import * as cdk from 'aws-cdk-lib';
import { Construct } from 'constructs';


export class ApplicationStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);


    // The code that defines your stack goes here
    const userIdentity = new UserIdentity(this, 'UserIdentity');


    const gameApi = new GameApi(this, 'GameApi');
    const storyApi = new StoryApi(this, 'StoryApi');


    // grant our authenticated role access to invoke our APIs
    [storyApi, gameApi].forEach((api) =>
      api.grantInvokeAccess(userIdentity.identityPool.authenticatedRole),
    );


    // Ensure this is instantiated last so our runtime-config.json can be automatically configured
    new GameUI(this, 'GameUI');
  }
}

Building our code

Now it's time for us to build our code for the first time
Terminal window
pnpm nx run-many --target build --all

You should be prompted with the following:

Terminal window
 NX   The workspace is out of sync


[@nx/js:typescript-sync]: Some TypeScript configuration files are missing project references to the projects they depend on or contain outdated project references.


This will result in an error in CI.


? Would you like to sync the identified changes to get your workspace up to date? …
Yes, sync the changes and run the tasks
No, run the tasks without syncing the changes

This message indicates that NX has detected some files which can be updated automatically for you. In this case, it is referring to the tsconfig.json files which do not have Typescript references set up on references projects. Select the Yes, sync the changes and run the tasks option to proceed. You should notice all of you IDE related import errors get automatically resolved as the sync generator will add the missing typescript references automatically!

All built artifacts are now available within the dist/ folder located at the root of the monorepo. This is a standard practice when using projects generated by the @aws/nx-plugin as it does not pollute your file-tree with generated files. In the event you want to clean yor files, you can simply delete the dist/ folder without having to worry about generated files being littered throughout the file tree.

Congratulations! You’ve created all of the required sub-projects needed to start implementing the core of our Dunegeon Adventure game. 🎉🎉🎉