diff --git a/public/images/gen2/getting-started/authenticator-localhost-(720p).png b/public/images/gen2/getting-started/authenticator-localhost-(720p).png new file mode 100644 index 00000000000..ee07e8a581c Binary files /dev/null and b/public/images/gen2/getting-started/authenticator-localhost-(720p).png differ diff --git a/src/pages/[platform]/start/quickstart/index.mdx b/src/pages/[platform]/start/quickstart/index.mdx index ae339cb1935..e75e2e0584a 100644 --- a/src/pages/[platform]/start/quickstart/index.mdx +++ b/src/pages/[platform]/start/quickstart/index.mdx @@ -21,11 +21,11 @@ export const meta = { }; -export const getStaticPaths = async () => { +export function getStaticPaths() { return getCustomStaticPath(meta.platforms); -}; +} -export function getStaticProps(context) { +export function getStaticProps() { const childPageNodes = getChildPageNodes(meta.route); return { props: { @@ -39,56 +39,56 @@ export function getStaticProps(context) { 👋 Welcome to AWS Amplify! In this quickstart guide, you will: -1. Deploy a Vanilla JavaScript app with Vite +1. Deploy a Vanilla JavaScript app with [Vite](https://vitejs.dev/) 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. +Create a new Vanilla JavaScript app with Vite using the following commands, create the directory (`amplify-js-app`) and files for the app. -```bash +```bash title="Terminal" showLineNumbers={false} 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 +Use npm to install dependencies and start Vite's local development server. + +```bash title="Terminal" showLineNumbers={false} 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). +The development server 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" - - - + + + Todo App - - + +
-

My todos

- - -
- Try creating a new todo. -
- - Review next step of this tutorial. - -
+

My todos

+ + +
+ Try creating a new todo. +
+ + Review next step of this tutorial. + +
- + ``` @@ -165,11 +165,11 @@ a { ``` {/* cSpell:enable */} -In `main.js` remove the boilerplate code and leave it empty. Then refresh the browser to see the changes. +In `main.ts` 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. +The easiest way to get started with AWS Amplify is through npm with [`create-amplify`](https://www.npmjs.com/package/create-amplify) package. It is recommended to be run from the root of your project's directory. ```bash title="Terminal" showLineNumbers={false} npm create amplify@latest @@ -185,6 +185,7 @@ Running this command will scaffold Amplify backend files in your current project │ ├── data/ │ │ └── resource.ts │ ├── backend.ts +│ ├── tsconfig.json │ └── package.json ├── node_modules/ ├── index.html @@ -197,9 +198,9 @@ Running this command will scaffold Amplify backend files in your current project ### Set up local AWS credentials -To make backend updates, we are going to require AWS credentials to deploy backend updates from our local machine. +To make backend updates, you will need AWS credentials to deploy backend updates from your 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. +**Skip ahead** 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. @@ -215,67 +216,66 @@ Once the sandbox environment is deployed, it will create a GraphQL API, database ## 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. +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.ts` 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'; +```ts title="src/main.ts" +import type { Schema } from '../amplify/data/resource'; +import { generateClient } from 'aws-amplify/data'; import { Amplify } from 'aws-amplify'; import outputs from '../amplify_outputs.json'; +import './style.css'; Amplify.configure(outputs); - const client = generateClient(); -document.addEventListener("DOMContentLoaded", function () { - const todos: Array = []; - const todoList = document.getElementById("todoList") as HTMLUListElement; - const addTodoButton = document.getElementById("addTodo") as HTMLButtonElement; +document.addEventListener('DOMContentLoaded', function () { + const todos: Array = []; + const todoList = document.getElementById('todoList') as HTMLUListElement; + const addTodoButton = document.getElementById('addTodo') as HTMLButtonElement; + + addTodoButton.addEventListener('click', createTodo); - addTodoButton.addEventListener("click", createTodo); + function updateUI() { + todoList.innerHTML = ''; + todos.forEach((todo) => { + const li = document.createElement('li'); + li.textContent = todo.content ?? ''; + todoList.appendChild(li); + }); + } - 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.'); }); } - - 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(); - } - }); + client.models.Todo.observeQuery().subscribe({ + next: (data) => { + todos.splice(0, todos.length, ...data.items); + updateUI(); + } + }); }); ``` - 👋 Welcome to AWS Amplify! In this quickstart guide, you will: @@ -284,247 +284,226 @@ document.addEventListener("DOMContentLoaded", function () { 2. Build and connect to a database with real-time data updates 3. Configure authentication and authorization rules -## Deploy a fullstack app to AWS +## Create your project -We've created a starter "To-do" application to help get started faster. First, you will create a repository in your GitHub account using our starter React template. +To get started, create a Vite app with React using the [`create-vite`](https://www.npmjs.com/package/create-vite) package: -### 1. Create the repository +```bash title="Terminal" showLineNumbers={false} +npm create vite@latest -- --template react-ts +``` -Use our starter template to create a repository in your GitHub account. This template scaffolds `create-vite-app` with Amplify backend capabilities. +Then follow the prompts to generate the boilerplate for your Vite React application. - - -Create repository from template - +Next, scaffold your Amplify backend using the [`create-amplify`](https://www.npmjs.com/package/create-amplify) package: -Use the form in GitHub to finalize your repo's creation. +```bash title="Terminal" showLineNumbers={false} +npm create amplify@latest +``` -### 2. Deploy the starter app +Follow the prompts to scaffold your Amplify backend, which copies template files for auth and data resources, and installs required dependencies to your project. The creation flow is intended to be run from the same directory as your frontend project, however it can be executed from any directory. -Now that the repository has been created, deploy it with Amplify. +This will add the following files to your project's directory: - - -Deploy to AWS - +```text +├── amplify/ +│ ├── auth/ +│ │ └── resource.ts +│ ├── data/ +│ │ └── resource.ts +│ ├── backend.ts +│ ├── tsconfig.json +│ └── package.json +``` -Select **GitHub**. After you give Amplify access to your GitHub account via the popup window, pick the repository and `main` branch to deploy. Make no other changes and click through the flow to **Save and deploy**. +If you prefer setting up your project from scratch, refer to the [documentation for manual installation](https://docs.amplify.aws/react/start/manual-installation/). -