Preview: AWS Amplify's new code-first DX (Gen 2)

The next generation of Amplify's backend building experience with a TypeScript-first DX.

Create your application

NOTE: Amplify JS v6 supports Next.js with the version range: >=13.5.0 <15.0.0. Ensure you have the correct version to integrate with Amplify.

To set up the project, you will need to create a new Next.js app with the create-next-app tool. You'll then add Amplify and initialize a new project.

Run the following command and following the instructions to create a Next.js app.

1npx create-next-app@">=13.5.0 <15.0.0" next-amplified

Then run the following command to enter the root of your Next.js app.

1cd next-amplified

You can now run the app in development mode by using the following command:

1npm run dev

Use the Angular CLI to bootstrap a new Angular app:

1npx -p @angular/cli ng new amplify-app
2
3? Would you like to add Angular routing? Y
4? Which stylesheet format would you like to use? (your preferred stylesheet provider)
5
6cd amplify-app

First, create src/polyfills.ts and add the following:

1(window as any).global = window;
2(window as any).process = {
3  env: { DEBUG: undefined },
4};

Then, open your angular.json file, and add src/polyfills.ts to polyfills array(s) in your angular.json. These arrays are located in projects.<project-name>.architect.<task-name>.options.

1"polyfills": [
2  "zone.js",
3  "src/polyfills.ts"
4],

And finally, make sure to add src/polyfills to files in your tsconfig.app.json:

1{
2  "files": [
3    "src/main.ts",
4    "src/polyfills.ts"
5  ],
6}

Add the following to your src/polyfills.ts file to recreate them:

1(window as any).global = window;
2(window as any).process = {
3  env: { DEBUG: undefined },
4};

To get started, first create a new React app using Vite, and then install and use the Amplify CLI to start adding backend capabilities to your app.

From your projects directory, run the following commands and follow the prompts:

1npm create vite@latest

This creates a new React app in a new directory. Navigate to your new directory and run the app by using the following command:

1cd <your project directory>

Then, install your dependencies and run the development server by running the following command:

1npm install
2npm run dev

This runs a development server and see preview your app locally.

Use the Vue Vite powered create-app to bootstrap a new Vue 3 app (select required configuration, selecting the defaults as an example for this project):

1npm init vue@3
2
3Need to install the following packages:
4  create-vue@3
5Ok to proceed? (y) y
6
7✔ Project name: … myamplifyproject
8✔ Add TypeScript? … No
9✔ Add JSX Support? … No
10✔ Add Vue Router for Single Page Application development? … No
11✔ Add Pinia for state management? … No
12✔ Add Vitest for Unit Testing? … No
13✔ Add Cypress for both Unit and End-to-End testing? … No
14✔ Add ESLint for code quality? … No

This creates a new Vue app in a new directory. Navigate to your new directory and run the app by using the following command:

1cd <your project directory>

Then, install your dependencies and run the development server by running the following command:

1npm install
2npm run dev

This runs a development server and see preview your app locally.

Create a New Amplify Backend

Now that you have a running app, it's time to set up Amplify so that you can set up the backend services you need.

Please ensure the Amplify CLI version in your system is higher than 12.5.1. You can check the CLI version by running amplify --version.

Open a new terminal. From the root of the project, run:

1amplify init

When you initialize Amplify you'll be prompted for some information about the app.

1? Enter a name for the project (nextamplified)
2The following configuration will be applied:
3
4Project information
5| Name: nextamplified
6| Environment: dev
7| Default editor: Visual Studio Code
8| App type: javascript
9| Javascript framework: <detected framework>
10| Source Directory Path: src
11| Distribution Directory Path: build
12| Build Command: npm run-script build
13| Start Command: npm run-script start
14
15? Initialize the project with the above configuration? Yes
16Using default provider  awscloudformation
17? Select the authentication method you want to use: AWS profile
18
19For more information on AWS Profiles, see:
20https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html
21
22? Please choose the profile you want to use default

When you initialize a new Amplify project, a few things happen:

It creates a top level directory called amplify that stores your backend definition. During the tutorial you'll add capabilities such as a GraphQL API and authentication. As you add features, the amplify folder will grow with infrastructure-as-code templates that define your backend stack. Infrastructure-as-code is a best practice way to create a replicable backend stack.
It creates a file called amplifyconfiguration.json in the src directory that holds all the configuration for the services you create with Amplify. This is how the Amplify client is able to get the necessary information about your backend services.
It modifies the .gitignore file, adding some generated files to the ignore list
A cloud project is created for you in the AWS Amplify Console that can be accessed by running amplify console. The Console provides a list of backend environments, deep links to provisioned resources per Amplify category, status of recent deployments, and instructions on how to promote, clone, pull, and delete backend resources.

As you add or remove categories and make updates to your backend configuration using the Amplify CLI, the configuration in amplifyconfiguration.json will update automatically.

Install Amplify libraries

Install required dependencies to your Next.js app to start using Amplify.

1npm install aws-amplify @aws-amplify/adapter-nextjs

The aws-amplify package is the main library for working with Amplify in your apps. The @aws-amplify/adapter-nextjs provides adapter functions to enable use of Amplify APIs on the server side of your Next.js app for use cases such as Server Side Rendering (SSR).

For details of using Amplify with in your Next.js app, see use Amplify with Next.js.

Install required dependencies to your Angular app to start using Amplify.

1npm install aws-amplify

Install required dependencies to your React app to start using Amplify.

1npm install aws-amplify

Install required dependencies to your Vue app to start using Amplify.

1npm install aws-amplify

You are now ready to start adding features to your application. Below are some examples of features you can start adding to your app.

Set up Amplify prerequisites