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

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

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

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

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

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:

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.

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:

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

Strictly typing aws-exports

If you have TypeScript strict mode on and see the error

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:

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:

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:

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:

1amplify init

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

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:

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:

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):

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

1npm install

1npm run dev

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:

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

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

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

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:

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:

1npm install aws-amplify@next

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:

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.

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.