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

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

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

"polyfills": [
  "zone.js",
  "src/polyfills.ts"
],

{
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
}

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

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

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

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

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.

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;

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

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

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

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

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

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

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

npm install

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

amplify 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

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

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

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

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

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>

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.