aws-amplify · aspittel · May 2, 2024 · Apr 3, 2024 · Apr 3, 2024 · Apr 3, 2024
@@ -39,7 +39,7 @@ export const directory = {
               path: 'src/pages/[platform]/start/manual-installation/index.mdx'
             },
             {
-              path: 'src/pages/[platform]/start/gen1-gen2/index.mdx'
+              path: 'src/pages/[platform]/start/migrate-to-gen2/index.mdx'
             }
           ]
         },

@@ -35,6 +35,246 @@ export function getStaticProps(context) {
   };
 }
 
+<InlineFilter filters={["javascript"]}>
+
+👋 Welcome to AWS Amplify! In this quickstart guide, you will:
+
+1. Deploy a Vanilla JavaScript app with Vite
+2. Build and connect to a database with real-time data updates
+3. 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.
+
+```bash
+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.
+```bash
+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](http://localhost:5173).
+
+Add the following to the `index.html` file:
+
+```html title="index.html"
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Todo App</title>
+</head>
+<body>
+    <main>
+        <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>
+</body>
+</html>
+```
+
+Add the following to `style.css` file:
+
+{/* cSpell:disable */}
+
+```css title="style.css"
+body {
+  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;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+button {
+  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;
+}
+
+ul {
+  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;
+}
+
+li {
+  background-color: white;
+  padding: 8px;
+}
+
+li:hover {
+  background: #dadbf9;
+}
+
+a {
+  font-weight: 800;
+  text-decoration: none;
+}
+```
+{/* cSpell:enable */}
+
+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.
+
+```bash title="Terminal" showLineNumbers={false}
+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:
+
+```text
+├── 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](/[platform]/start/account-setup/)** that grant Amplify permissions to deploy backend updates from your local machine.
+
+### Deploy cloud sandbox
+
+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:
+
+```bash title="Terminal" showLineNumbers={false}
+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`. However, Xcode won't be able to recognize them. For recognizing the files, you need to drag and drop the generated files to your project.
+
+## 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.
+
+```typescript title="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();
+        }
+    });
+});
+```
+
+</InlineFilter>
 
 <InlineFilter filters={["react"]}>
 
@@ -112,7 +352,7 @@ Let's take a tour of the project structure in this starter repository by opening
 
 In the Amplify Console, navigate to the Data manager to see the data entered in your database.
 
-TK IMAGE
+![data-manager](/images/gen2/getting-started/data-manager.png)
 
 ## Make frontend updates
 
@@ -449,7 +689,7 @@ Let's take a tour of the project structure in this starter repository by opening
 
 In the Amplify Console, navigate to the Data manager to see the data entered in your database.
 
-TK IMAGE
+![Amplify data manager user interface showing the ToDo model with two to do instances](/images/gen2/getting-started/data-manager.png)
 
 ## Make frontend updates
 
@@ -782,7 +1022,7 @@ Let's take a tour of the project structure in this starter repository by opening
 
 In the Amplify Console, navigate to the Data manager to see the data entered in your database.
 
-TK IMAGE
+![data-manager](/images/gen2/getting-started/data-manager.png)
 
 ## Make frontend updates
 
@@ -1074,7 +1314,7 @@ flutter create my_amplify_app
 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.
 
 ```bash title="Terminal" showLineNumbers={false}
-npm create amplify@beta
+npm create amplify@latest
 ? Where should we create your project? (.) # press enter
 ```
 
@@ -1616,7 +1856,7 @@ Run your application in your local environment again. You should be presented wi
 
 ## Adding Data
 
-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.
+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.
 
 Let's modify this to add the following:
 - A boolean `isDone` field.
@@ -2058,7 +2298,7 @@ Now if you run the application on the Android emulator, you should see the authe
 
 ### 6. Read and write data
 
-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.
+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.
 
 Amplify can automatically generate code for interacting with the backend API. The command below generates model classes from the Data schema:
 
@@ -2460,7 +2700,7 @@ Run your application in your local environment again. You should be presented wi
 
 ## Adding Data
 
-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.
+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.
 
 Let's modify this to add the following:
 - A boolean `isDone` field.
@@ -2642,15 +2882,7 @@ For publishing the changes to cloud, you need to create a remote git repository.
 
 </InlineFilter>
 
-<InlineFilter filters={['react-native']
-['android'],
-['angular'],
-['flutter'],
-['javascript'],
-['react'],
-['react-native'],
-['swift'],
-['vue']}>
+<InlineFilter filters={["javascript", "react-native", "angular", "nextjs", "react", "vue", "android", "swift", "flutter"]}>
 
 ## 🥳 Success