Set up fullstack project
Use the Angular CLI to bootstrap a new Angular app:
npx -p @angular/cli ng new amplify-app
? Which stylesheet format would you like to use? CSS? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Pre-rendering)? No
This is create your angular app in a folder amplify-app
. Use the following command to switch into that folder:
cd amplify-app
Initialize a new backend
Now that you have a running 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:
For newer versions of Angular, you will have to change the Distribution Directory Path from dist
to dist/amplify-app/browser
to match how Angular will build your project.
? Enter a name for the project: amplifyappThe 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/amplify-app/browser| Build Command: npm run-script build| Start Command: ng serve
? Initialize the project with the above configuration? YesUsing 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 cloud capabilities, such as GraphQL API and web hosting. As you add these features, theamplify
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 your designated Source Directory Path that holds all the configuration for the services you create with Amplify. This is how the Amplify JavaScript client library is able to get the necessary information to connect to your backend services. - It modifies the
.gitignore
file, adding some generated files to the ignore list
Install Amplify Libraries
The aws-amplify
package is the main library for working with Amplify Libraries in your projects:
npm install aws-amplify
Set up frontend
Next, configure the Amplify libraries client-side so it can interact with backend services.
Open main.ts and add the following code below the last import:
import { Amplify } from 'aws-amplify';import amplifyconfig from './amplifyconfiguration.json';Amplify.configure(amplifyconfig);
In order to import amplifyconfiguration.json
files in Typescript, you may need to modify your tsconfig.json and enable resolveJsonModule
and allowSyntheticDefaultImports
in the case that strict
mode is enabled.
{ ... "compilerOptions": { "allowSyntheticDefaultImports": true, "resolveJsonModule": true, ... }}
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 amplifyconfiguration.json will update automatically.
Now that your app is set up and Amplify is initialized, you can add an API in the next step.