Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 23 additions & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,25 @@
{
"eslint.validate": ["json"]
"eslint.validate": [
"json"
],
"workbench.colorCustomizations": {
"activityBar.activeBackground": "#93e6fc",
"activityBar.background": "#93e6fc",
"activityBar.foreground": "#15202b",
"activityBar.inactiveForeground": "#15202b99",
"activityBarBadge.background": "#fa45d4",
"activityBarBadge.foreground": "#15202b",
"commandCenter.border": "#15202b99",
"sash.hoverBorder": "#93e6fc",
"statusBar.background": "#61dafb",
"statusBar.foreground": "#15202b",
"statusBarItem.hoverBackground": "#2fcefa",
"statusBarItem.remoteBackground": "#61dafb",
"statusBarItem.remoteForeground": "#15202b",
"titleBar.activeBackground": "#61dafb",
"titleBar.activeForeground": "#15202b",
"titleBar.inactiveBackground": "#61dafb99",
"titleBar.inactiveForeground": "#15202b99"
},
"peacock.color": "#61dafb"
}
Binary file modified docs/src/content/docs/assets/dungeon-game-architecture.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 20 additions & 19 deletions docs/src/content/docs/en/get_started/concepts.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Concepts
description: Key concepts.
description: Key concepts
---

import { Image } from 'astro:assets';
Expand All @@ -9,9 +9,9 @@ import typeSafetyGif from '@assets/type-safety.gif';
import websiteGeneratorGif from '@assets/website-generator.gif';
import generatorsJpg from '@assets/generators.png';

The `@aws/nx-plugin` is an [Nx](https://nx.dev/) plugin that provides a toolkit for simplifying the process of building and deploying full-stack applications on AWS. It provides developers with pre-configured templates for both application and IaC code, significantly reducing the time spent on setup and configuration. The plugin handles the complexity of AWS service integration while maintaining flexibility for customization.
The `@aws/nx-plugin` is an [Nx](https://nx.dev/) plugin that provides a toolkit for simplifying the process of building and deploying full-stack applications on AWS. It provides developers with pre-configured templates for both application and Infrastructure-as-Code (IaC) code, significantly reducing the time spent on setup and configuration. The plugin handles the complexity of AWS services integration while maintaining flexibility for customization.

Users simplify pick and choose which components they want from the list of available [Generators](#generators), provide any configuration options and have the `@aws/nx-plugin` generate the required starter code. Several generators exist within this toolkit which can create APIs, websites, infrastructure and even do more sophistacted things like integrated a frontend to a backend (including updating existing files via AST transforms!) with type-safe clients.
Users can pick and choose which components they want from the list of available [generators](#generators), provide any configuration options and have the `@aws/nx-plugin` generate the required starter code. You can use specific generators within this toolkit to create APIs, websites, infrastructure and sophistacted things like integrating a frontend with a backend (including updating existing files via Abstract Syntax Tree (AST) transforms) with type-safe clients.

<Image src={websiteGeneratorGif} alt="generator" width="800" height="600" />

Expand All @@ -27,43 +27,44 @@ Together, these features make Nx particularly effective for managing monorepos a

## Generators

All components available in this plugin as implemented as [Generators](https://nx.dev/features/generate-code) which enable the automation of repetitive tasks and allow consistent scaffolding of both new and existing projects.
All components available in this plugin are implemented as [Generators](https://nx.dev/features/generate-code) which automate repetitive tasks and allow consistent scaffolding of both new and existing projects.

Generators can be invoked via the [Nx CLI](https://nx.dev/features/generate-code#invoke-generators) or the [Nx Console IDE plugin](https://nx.dev/getting-started/editor-setup).
You can invoke generators via the [Nx CLI](https://nx.dev/features/generate-code#invoke-generators) or the [Nx Console IDE plugin](https://nx.dev/getting-started/editor-setup).

<Image src={generatorsJpg} alt="generators" width="800" height="600" />

## Open for modification

All code generated is your code, meaning it is free to be edited as you see fit. This drastically simplifies the developer experience as if you don't like something in the generated code, you are free to modify it.
All code generated is your code, meaning it is free to be edited as you see fit. This drastically simplifies the developer experience, as if you don't like something in the generated code, you are free to modify it.

## Minimal dependencies

The `@aws/nx-plugin` strives to keep the number of dependencies to a minimum and as such the global requirements for getting started boil down to what generators you invoke.
The `@aws/nx-plugin` strives to keep the number of dependencies to a minimum, so the global requirements for getting started depend on the generators you invoke.

As an example, any Typescript based generator will only require [Node](https://nodejs.org/en/download) to be installed. For Python based projects, [UV](https://docs.astral.sh/uv/) is the only requirement.
For example:

- Any Typescript based generator will only require [Node](https://nodejs.org/en/download) to be installed.
- For Python based projects, [UV](https://docs.astral.sh/uv/) is the only requirement.

<Aside>
UV was chosen as the Python package and project manager for a few reasons
including: - Single tool which acts as a drop-in replacement for `pip`,
`pip-tools`, `pipx`, `poetry`, `pyenv`, `twine`, `virtualenv`, and more -
10-100x faster than `pip` - Native
[workspace/monorepo](https://docs.astral.sh/uv/concepts/projects/workspaces/)
support
We chose UV as the Python package and project manager for the following reasons:
- Single tool which acts as a drop-in replacement for `pip`, `pip-tools`, `pipx`, `poetry`, `pyenv`, `twine`, `virtualenv`,
- It is 10-100x faster than `pip`, and
- Native [workspace/monorepo](https://docs.astral.sh/uv/concepts/projects/workspaces/) support
</Aside>

## Single version policy

The default monorepo setup uses a [single version policy](https://nx.dev/concepts/decisions/dependency-management#single-version-policy) for both Node and Python based project.
The default monorepo setup uses a [single version policy](https://nx.dev/concepts/decisions/dependency-management#single-version-policy) for both Node and Python based projects.

This means that all projects within your monorepo will be using the same version of dependencies by default, reducing issues related to packages in the same monorepo running into version mismatch issues.
This means that all projects within your monorepo use the same version of dependencies by default, reducing issues related to packages in the same monorepo running into version mismatch issues.

From a Node perspective this means a single lockfile at the root with a single `node_modules` containing all dependencies. If you need to add a new dependency, you do it in the root `package.json`.
For Node based projects, a single lockfile at the root with a single `node_modules` contains all dependencies. If you need to add a new dependency, add it in the root `package.json`.

From a Python perspective, this means a single `.venv` in the root of the monorepo with all dependencies installed into it. Each Python project however will have it's own `pyproject.toml`, but the versions of those dependencies are managed by the uv workspace and subsequently written out to the `uv.lock` file in the root.
For Python based projects, a single `.venv` in the root of the monorepo contains all dependencies installed into it. Each Python project however will have it's own `pyproject.toml`, but the versions of those dependencies are managed by the uv workspace and subsequently written out to the `uv.lock` file in the root.

## Type safety

The `@aws/nx-plugin` employs type-safety to simplify the developer experience via IDE completions, whilst also eliminating runtime errors which would only occur in a non type-safe implementation. As such, all components that are vended will be type-safe by default.
The `@aws/nx-plugin` uses type-safety to simplify the developer experience via IDE completions, whilst also eliminating runtime errors which would only occur in a non type-safe implementation. By default, all components that are vended are type-safe.

<Image src={typeSafetyGif} alt="generators" width="800" height="600" />
38 changes: 19 additions & 19 deletions docs/src/content/docs/en/get_started/quick-start.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,39 +10,40 @@ import InstallCommand from '@components/install-command.astro';
import RunGenerator from '@components/run-generator.astro';
import NxCommands from '@components/nx-commands.astro';

This guide walks you through the basics of installing and using `@aws/nx-plugin` to rapidly build projects on AWS.
This guide walks you through the basics of installing and using the `@aws/nx-plugin` to rapidly build projects on AWS.

:::tip
For a more in-depth tutorial for building a full-stack application, check out the <Link path="get_started/tutorials/dungeon-game/overview">Dungeon Adventure Tutorial</Link>.
For an in-depth tutorial for building a full-stack application, refer to the <Link path="get_started/tutorials/dungeon-game/overview">Dungeon Adventure Tutorial</Link>.
:::

## Prerequisites

The following global dependencies are needed before proceeding:
Before proceeding, install these global dependencies:

<Snippet name="prerequisites" />

## Step 1: Initialize a New Nx Workspace
## Step 1: Initialize a new Nx Workspace

Run the following command to create an Nx workspace with the package manager of your choice:
To create an Nx workspace with the package manager of your choice, run the following command :

<CreateNxWorkspaceCommand workspace="my-project" />

Once complete, navigate to the project directory:
Navigate to the project directory:

```sh
cd my-project
```

## Step 2: Add the Nx Plugin for AWS

Install the plugin with:
Install the plugin using your package manager.

<InstallCommand dev pkg="@aws/nx-plugin" />

## Step 3: Use Generators to Scaffold your Project

We'll add a tRPC API, React Website, Cognito Authentication, and CDK Infrastructure in this quick-start guide. Depending on the type of project you're building, you can choose any combination of generators to quickly bootstrap your project. Check out the __Guides__ in the navigation bar to the left to see the full list of options.
For the purposes of this quick start guide, we will add a tRPC API, React website, Cognito authentication, and CDK infrastructure to our project.
Depending on the type of project you're building, you can choose any combination of generators to bootstrap your project. To see the full list of options, refer to the __Guides__ section in the navigation bar on the left.

### Add a tRPC API

Expand All @@ -60,7 +61,7 @@ This scaffolds a new React website in `packages/demo-website`.

<RunGenerator generator="ts#cloudscape-website#auth" requiredParameters={{ project: '@my-project/demo-website', cognitoDomain: 'my-demo' }} />

This sets up the necessary infrastructure and React code to add Cognito Authentication to your website.
This sets up the necessary infrastructure and React code to add Cognito authentication to your website.

### Connect Frontend to Backend

Expand All @@ -74,7 +75,7 @@ This configures the necessary providers to ensure your website can call your tRP

This configures a CDK App which you can use to deploy your infrastructure on AWS.

## Step 4: Define Cloud Resources and Deploy to AWS
## Step 4: Define Cloud resources and deploy to AWS

Open `packages/infra/src/stacks/application-stack.ts` and add the following code:

Expand All @@ -95,34 +96,33 @@ export class ApplicationStack extends cdk.Stack {
}
}
```
__Note__: This is all the CDK we need to write to deploy our full stack application.

This is all the CDK we need to write to deploy our full stack application.
### Build and deploy the infrastructure

### Build and Deploy the Infrastructure

Next, run the following command to build your project:
To build your project, run the following command:

<NxCommands commands={['run-many --target build --all']} />

:::tip
If you encounter any lint errors, you can run the following command to automatically fix them.
If you encounter any lint errors, run the following command to automatically fix them.

<NxCommands commands={['run-many --target lint --configuration=fix --all']} />
:::

## Step 5: Run the Frontend Locally
## Step 5: Run the frontend locally

<Steps>
1. Fetch the `runtime-config.json` file:
1. Fetch the `runtime-config.json` file

<NxCommands commands={['run @demo/demo-website:load:runtime-config']} />

2. Start the local website server
2. Start the local web server

<NxCommands commands={['run @demo/demo-website:serve']} />
</Steps>

Your website will be available at `http://localhost:4200`.
You can preview your website at `http://localhost:4200` in a browser.

---

Expand Down
Loading
Loading