Page updated Mar 6, 2024

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

Set up fullstack project

Create a new Vanilla JavaScript app with vite using the following commands, create the directory (amplify-js-app) and files for the app.

1npm create vite@latest
2✔ Project name: amplify-js-app
3✔ Select a framework: › Vanilla
4✔ Select a variant: › JavaScript

Initialize npm and install dependencies and dev dependencies.

1cd amplify-js-app
2npm install
3npm run dev

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:5173.

Add the following to the index.html file:

index.html
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <title>Amplify</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <link href="style.css" rel="stylesheet" />
8 </head>
9
10 <body>
11 <div class="app">
12 <div class="app-header">
13 <h1>Welcome to Amplify</h1>
14 </div>
15 <div class="app-body">
16 <h1>Mutation Results</h1>
17 <button id="MutationEventButton">Add data</button>
18 <div id="MutationResult"></div>
19 <hr />
20
21 <h1>Query Results</h1>
22 <div id="QueryResult"></div>
23 <hr />
24
25 <h1>Subscription Results</h1>
26 <div id="SubscriptionResult"></div>
27 </div>
28 </div>
29 <script type="module" src="/main.js"></script>
30 </body>
31</html>

Add the following to style.css file:

style.css
1html,
2body {
3 font-family: 'Amazon Ember', 'Helvetica', 'sans-serif';
4 margin: 0;
5}
6a {
7 color: #ff9900;
8}
9h1 {
10 font-weight: 300;
11}
12hr {
13 height: 1px;
14 background: lightgray;
15 border: none;
16}
17.app {
18 width: 100%;
19}
20.app-header {
21 color: white;
22 text-align: center;
23 background: linear-gradient(30deg, #f90 55%, #ffc300);
24 width: 100%;
25 margin: 0 0 1em 0;
26 padding: 3em 0 3em 0;
27 box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
28}
29.app-body {
30 width: 400px;
31 margin: 0 auto;
32 text-align: center;
33}
34.app-body button {
35 background-color: #ff9900;
36 font-size: 14px;
37 color: white;
38 text-transform: uppercase;
39 padding: 1em;
40 border: none;
41}
42.app-body button:hover {
43 opacity: 0.8;
44}

In main.js remove the boilerplate code and leave it empty. Then refresh the browser to see the changes.

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:

1amplify init

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

1? Enter a name for the project: amplifyjsapp
2The following configuration will be applied:
3
4Project information
5| Name: amplifyjsapp
6| Environment: dev
7| Default editor: Visual Studio Code
8| App type: javascript
9| Javascript framework: none
10| Source Directory Path: src
11| Distribution Directory Path: dist
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 cloud capabilities, such as GraphQL API and web hosting. As you add these 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 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:

1npm install aws-amplify

Set up frontend

Next, configure the Amplify libraries client-side so it can interact with backend services.

Open main.js and add the following code:

main.js
1import './style.css'
2import { Amplify } from 'aws-amplify';
3import amplifyconfig from './src/amplifyconfiguration.json';
4Amplify.configure(amplifyconfig);

Make sure you call Amplify.configure as early as possible in your application’s life-cycle. A missing configuration or NoCredentials error is thrown if Amplify.configure has not been called before other Amplify JavaScript APIs. Review the Library Not Configured Troubleshooting guide for possible causes of this issue.

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.