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

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

Get started

Amplify project setup

Create a New Next.js App

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.

npx create-next-app@">=13.5.0 <15.0.0" next-amplified
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.

cd next-amplified
1cd next-amplified

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

npm run dev
1npm run dev

Create a New Amplify Backend

Now that you have a running Next.js app, it's time to set up Amplify so that you can create the necessary backend services needed to support the app.

To use Amplify JS V6 with the Next.js, 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:

amplify init
1amplify init

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

? Enter a name for the project (nextamplified) The following configuration will be applied: Project information | Name: nextamplified | Environment: dev | Default editor: Visual Studio Code | App type: javascript | Javascript framework: react | Source Directory Path: src | Distribution Directory Path: build | Build Command: npm run-script build | Start Command: npm run-script start ? Initialize the project with the above configuration? Yes Using default provider awscloudformation ? Select the authentication method you want to use: AWS profile For more information on AWS Profiles, see: https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html ? Please choose the profile you want to use default
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: react
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.

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

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.

Use the Angular CLI to bootstrap a new Angular app:

npx -p @angular/cli ng new amplify-app ? Would you like to add Angular routing? Y ? Which stylesheet format would you like to use? (your preferred stylesheet provider) cd amplify-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

Angular 6+ does not include shims for 'global' or 'process'.

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

(window as any).global = window; (window as any).process = { env: { DEBUG: undefined }, };
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.

"polyfills": [ "zone.js", "src/polyfills.ts" ],
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:

{ "files": [ "src/main.ts", "src/polyfills.ts" ], }
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:

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

Create a new Amplify backend

Now that you have a running Angular app, it's time to set up Amplify for this app so that you can create the necessary backend services needed to support the app.

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

amplify init
1amplify init

When you initialize Amplify you'll be prompted for some information about the app. For newer versions of Angular, you will have to change the Distribution Directory Path from dist to dist/amplify-app to match how Angular will build your project.

? Enter a name for the project: amplifyapp The following configuration will be applied: Project information | Name: amplifyapp | Environment: dev | Default editor: Visual Studio Code | App type: javascript | Javascript framework: angular | Source Directory Path: src | Distribution Directory Path: dist | Build Command: npm run-script build | Start Command: ng serve ? Initialize the project with the above configuration? Yes Using default provider awscloudformation ? Select the authentication method you want to use: AWS profile For more information on AWS Profiles, see: https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html ? Please choose the profile you want to use: default
1? Enter a name for the project: amplifyapp
2The following configuration will be applied:
3
4Project information
5| Name: amplifyapp
6| Environment: dev
7| Default editor: Visual Studio Code
8| App type: javascript
9| Javascript framework: angular
10| Source Directory Path: src
11| Distribution Directory Path: dist
12| Build Command: npm run-script build
13| Start Command: ng serve
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 authentication, GraphQL API, storage, and set up authorization rules for the API. 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 aws-exports.js 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.

Install Amplify libraries

Inside the amplify-app directory, install the Amplify Angular library and run your app:

npm install --save aws-amplify@next npm start
1npm install --save aws-amplify@next
2
3npm start

Angular CLI output warnings: if you see CommonJS or AMD dependencies optimization bailouts warnings using Angular 9+, you can use this gist to remove them. More details about these here.

The UI library and components used in this example aren't compatible with the developer preview V6 interfaces yet. These library updates will be released with the V6 general availability release.

Strictly typing aws-exports

If you have TypeScript strict mode on and see the error

Could not find a declaration file for module './aws-exports'. 'aws-exports.js' implicitly has an 'any' type.
1Could not find a declaration file for module './aws-exports'. 'aws-exports.js' implicitly has an 'any' type.

Create a aws-exports.d.ts file on the same level as aws-exports with the following content:

declare const awsmobile: Record<string, any> export default awsmobile;
1declare const awsmobile: Record<string, any>
2export default awsmobile;

Create a new React App

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

From your projects directory, run the following commands:

npx create-react-app react-amplified cd react-amplified
1npx create-react-app react-amplified
2cd react-amplified

This creates a new React app in a directory called react-amplified and then switches into the new directory.

From the react-amplified directory, run the app by using the following command:

npm start
1npm start

This runs a development server and allows you to see the output generated by the build. You can see the running app by navigating to http://localhost:3000.

Initialize a new backend

With the app running, it's time to set up Amplify and create the backend services to support the app.

Open a new terminal. From the react-amplified directory, run:

amplify init
1amplify init

When you initialize Amplify you'll be prompted for some information about the app, with the option to accept recommended values:

? Enter a name for the project reactamplified The following configuration will be applied: ?Project information | Name: reactamplified | Environment: dev | Default editor: Visual Studio Code | App type: javascript | Javascript framework: react | Source Directory Path: src | Distribution Directory Path: build | Build Command: npm run-script build | Start Command: npm run-script start ? Initialize the project with the above configuration? Yes Using default provider awscloudformation ? Select the authentication method you want to use: AWS profile ... ? Please choose the profile you want to use default
1? Enter a name for the project reactamplified
2The following configuration will be applied:
3
4?Project information
5| Name: reactamplified
6| Environment: dev
7| Default editor: Visual Studio Code
8| App type: javascript
9| Javascript framework: react
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
19...
20
21? Please choose the profile you want to use default

Amplify CLI will infer the proper configuration based on the type of project Amplify is being initialized in where possible. Here it detected Create React App and provided the proper configuration for type of app, framework, source, distribution, build, and start options.

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 aws-exports.js 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

Install Amplify Libraries

The aws-amplify package is the main library for working with Amplify Libraries in your projects:

npm install aws-amplify@next
1npm install aws-amplify@next

Set up frontend

Next, configure Amplify so it can interact with backend services.

Open src/index.js and add the following code below the last import:

import { Amplify } from 'aws-amplify'; import awsExports from './aws-exports'; Amplify.configure(awsExports);
1import { Amplify } from 'aws-amplify';
2import awsExports from './aws-exports';
3Amplify.configure(awsExports);

And that's all it takes to configure Amplify. As you add or remove categories and make updates to your backend configuration using the Amplify CLI, the configuration in aws-exports.js will update automatically.

Now that your React app is set up and Amplify is initialized, you can add an API in the next step.

Use the Vue Vite powered create-app to bootstrap a new Vue 3 app (selecting the defaults will work for this project):

npm init vue@3 Need to install the following packages: create-vue@3 Ok to proceed? (y) y ✔ Project name: … myamplifyproject ✔ Add TypeScript? … No ✔ Add JSX Support? … No ✔ Add Vue Router for Single Page Application development? … No ✔ Add Pinia for state management? … No ✔ Add Vitest for Unit Testing? … No ✔ Add Cypress for both Unit and End-to-End testing? … No ✔ Add ESLint for code quality? … No cd myamplifyproject
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
15
16cd myamplifyproject

Install required modules:

npm install
1npm install

Run your app:

npm run dev
1npm run dev

Press Ctrl + C to stop the server

Initialize a new backend

Now that you have a running Vue app, it's time to set up Amplify so that you can create the necessary backend services needed to support the app.

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

amplify init
1amplify init

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

Your backend needs a project name to use when creating resources. Give your backend project the name todo

? Enter a name for the project (myamplifyproject) todo
1? Enter a name for the project (myamplifyproject) todo

You'll then be asked to accept some recommended values:

The following configuration will be applied: Project information | Name: todo | Environment: dev | Default editor: Visual Studio Code | App type: javascript | Javascript framework: vue | Source Directory Path: src | Distribution Directory Path: dist | Build Command: npm run-script build | Start Command: npm run-script serve ? Initialize the project with the above configuration? Yes
1The following configuration will be applied:
2
3Project information
4| Name: todo
5| Environment: dev
6| Default editor: Visual Studio Code
7| App type: javascript
8| Javascript framework: vue
9| Source Directory Path: src
10| Distribution Directory Path: dist
11| Build Command: npm run-script build
12| Start Command: npm run-script serve
13
14? Initialize the project with the above configuration? Yes

Where possible the CLI will infer the proper configuration based on the type of project Amplify is being initialized in. In this case it knew you are using Vue and provided the proper configuration for type of app, framework, source, distribution, build, and start options.

Next, you will need to select the authentication method you want to use to work on your project locally:

? Select the authentication method you want to use: (Use arrow keys) > AWS profile AWS access keys
1? Select the authentication method you want to use: (Use arrow keys)
2> AWS profile
3 AWS access keys

Select AWS profile and then choose the profile you configured in the Prerequisites.

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 authentication, GraphQL API, storage, and set up authorization rules for the API. 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 aws-exports.js 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

Install Amplify libraries

The first step to using Amplify in the client is to install the necessary dependencies:

npm install aws-amplify@next
1npm install aws-amplify@next

If you are using Vue 2, please check out our legacy documentation. For Vite installs check out this documentation.

The UI library and components used in this example aren't compatible with the developer preview V6 interfaces yet. These library updates will be released with the V6 general availability release.

Set up frontend

Next, you need to configure Amplify on the client so that you can use it to interact with your backend services.

Open src/main.js and add the following code below the last import:

import { Amplify } from 'aws-amplify'; import awsExports from './aws-exports'; Amplify.configure(awsExports);
1import { Amplify } from 'aws-amplify';
2import awsExports from './aws-exports';
3Amplify.configure(awsExports);

Vue Vite Config

When working with a Vue create-app that uses Vite you must make a few additional modifications. Please follow the steps below.

1. Add the following script tag to the index.html file at the bottom of the <body> tag.

... <script> window.global = window; var exports = {}; </script> </body>
1...
2 <script>
3 window.global = window;
4 var exports = {};
5 </script>
6</body>

And that's all it takes to configure Amplify with Vue and create-app. As you add or remove categories and make updates to your backend configuration using the Amplify CLI, the configuration in aws-exports.js will update automatically.

Now that your Vue app is set up and Amplify is initialized, you're ready to add an API in the next step.