Quickstart

👋 Welcome to AWS Amplify! In this quickstart guide, you will:

Deploy a Vanilla JavaScript app with Vite
Build and connect to a database with real-time data updates
Configure authentication and authorization rules

Create project

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

npm create vite@latest
✔ Project name: amplify-js-app
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript

Initialize npm and install dependencies and dev dependencies.

cd amplify-js-app
npm install
npm 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
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo App</title>
        <h1>My todos</h1>
        <button id="addTodo">+ new</button>
        <ul id="todoList"></ul>
        <div>
            Try creating a new todo.
            <br>
            <a href="https://docs.amplify.aws/javascript/start/quickstart/">
                Review next step of this tutorial.
            </a>
        </div>
    </main>
    <script type="module" src="src/main.ts"></script>

Add the following to style.css file:

style.css
  margin: 0;
  background: linear-gradient(180deg, rgb(117, 81, 194), rgb(255, 255, 255));
  display: flex;
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
  color: white;
button:hover {
  border-color: #646cff;
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  margin: 8px 0;
  border: 1px solid black;
  gap: 1px;
  background-color: black;
  border-radius: 8px;
  overflow: auto;
  background-color: white;
  padding: 8px;
  background: #dadbf9;
  font-weight: 800;
  text-decoration: none;

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

Create Backend

The easiest way to get started with AWS Amplify is through npm with create-amplify command. You can run it from your base project directory.

Terminal

npm create amplify@latest
? Where should we create your project? (.) # press enter

Running this command will scaffold Amplify backend files in your current project with the following files added:

├── amplify/
│   ├── auth/
│   │   └── resource.ts
│   ├── data/
│   │   └── resource.ts
│   ├── backend.ts
│   └── package.json
├── node_modules/
├── index.html
├── style.css
├── .gitignore
├── package-lock.json
├── package.json
└── tsconfig.json

Set up local AWS credentials

To make backend updates, we are going to require AWS credentials to deploy backend updates from our local machine.

Skip ahead to step 8, if you already have an AWS profile with credentials on your local machine, and your AWS profile has the AmplifyBackendDeployFullAccess permission policy.

Otherwise, set up local AWS credentials that grant Amplify permissions to deploy backend updates from your local machine.

To deploy your backend use Amplify's per-developer cloud sandbox. This feature provides a separate backend environment for every developer on a team, ideal for local development and testing. To run your application with a sandbox environment, you can run the following command:

Terminal

npx ampx sandbox

Once the sandbox environment is deployed, it will create a GraphQL API, database, and auth service. All the deployed resources will be available in the amplify_outputs.json.

Connect frontend to backend

The initial scaffolding already has a pre-configured data backend defined in the amplify/data/resource.ts file. The default example will create a Todo model with content field. Update your main.js file to create new to-do items.

src/main.ts
import { generateClient } from "aws-amplify/data";
import type { Schema } from "../amplify/data/resource";
import './style.css';
import { Amplify } from 'aws-amplify';
import outputs from '../amplify_outputs.json';
Amplify.configure(outputs);
const client = generateClient<Schema>();
document.addEventListener("DOMContentLoaded", function () {
    const todos: Array<Schema["Todo"]["type"]> = [];
    const todoList = document.getElementById("todoList") as HTMLUListElement;
    const addTodoButton = document.getElementById("addTodo") as HTMLButtonElement;
    addTodoButton.addEventListener("click", createTodo);
    function updateUI() {
        todoList.innerHTML = '';
        todos.forEach(todo => {
            const li = document.createElement('li');
            li.textContent = todo.content ?? '';
            todoList.appendChild(li);
        });
    function createTodo() {
      console.log('createTodo');
      const content = window.prompt("Todo content");
      if (content) {
          client.models.Todo.create({ content }).then(response => {
              if (response.data && !response.errors) {
                  todos.push(response.data);
                  updateUI();
              } else {
                  console.error('Error creating todo:', response.errors);
                  alert('Failed to create todo.');
          }).catch(error => {
              console.error('Network or other error:', error);
              alert('Failed to create todo due to a network or other error.');
          });
    client.models.Todo.observeQuery().subscribe({
        next: (data) => {
            todos.splice(0, todos.length, ...data.items);
            updateUI();

🥳 Success

That's it! You have successfully built a fullstack app on AWS Amplify. If you want to learn more about how to work with Amplify, here's the conceptual guide for how Amplify works.