Create your application
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-app2
3? Would you like to add Angular routing? Y4? 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 install2npm 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@32
3Need to install the following packages:4 create-vue@35Ok to proceed? (y) y6
7✔ Project name: … myamplifyproject8✔ Add TypeScript? … No9✔ Add JSX Support? … No10✔ Add Vue Router for Single Page Application development? … No11✔ Add Pinia for state management? … No12✔ Add Vitest for Unit Testing? … No13✔ Add Cypress for both Unit and End-to-End testing? … No14✔ 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 install2npm 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.
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 information5| Name: nextamplified6| Environment: dev7| Default editor: Visual Studio Code8| App type: javascript9| Javascript framework: <detected framework>10| Source Directory Path: src11| Distribution Directory Path: build12| Build Command: npm run-script build13| Start Command: npm run-script start14
15? Initialize the project with the above configuration? Yes16Using default provider awscloudformation17? Select the authentication method you want to use: AWS profile18
19For more information on AWS Profiles, see:20https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html21
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, 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 thesrc
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.