From 4a16d79232a24bc3f6bc5b1709632a3326c5338b Mon Sep 17 00:00:00 2001 From: Thomas Reulen Date: Wed, 30 Oct 2024 13:11:34 +0100 Subject: [PATCH 1/2] Add info for framework and variant / corrected css path / removed sentence about main.js file, which doesnt exist --- src/pages/[platform]/start/quickstart/index.mdx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/pages/[platform]/start/quickstart/index.mdx b/src/pages/[platform]/start/quickstart/index.mdx index 11b5de4a0b1..c0bfca4b352 100644 --- a/src/pages/[platform]/start/quickstart/index.mdx +++ b/src/pages/[platform]/start/quickstart/index.mdx @@ -46,7 +46,7 @@ export function getStaticProps(context) { ## 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. It will create the directory (`amplify-js-app`) and files for the app. Make sure to select the "Vanilla" framework with the "TypeScript" variant to follow along this quickstart guide. ```bash npm create vite@latest @@ -92,11 +92,11 @@ Add the following to the `index.html` file: ``` -Add the following to `style.css` file: +Add the following to `src/style.css` file: {/* cSpell:disable */} -```css title="style.css" +```css title="src/style.css" body { margin: 0; background: linear-gradient(180deg, rgb(117, 81, 194), rgb(255, 255, 255)); @@ -165,8 +165,6 @@ a { ``` {/* 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. From b382787555073670b63d7ee702ef9004562ace67 Mon Sep 17 00:00:00 2001 From: Thomas Reulen Date: Wed, 27 Nov 2024 18:11:22 +0100 Subject: [PATCH 2/2] changed main.js to main.ts --- src/pages/[platform]/start/quickstart/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/[platform]/start/quickstart/index.mdx b/src/pages/[platform]/start/quickstart/index.mdx index b872f78b7c8..73391c95cd2 100644 --- a/src/pages/[platform]/start/quickstart/index.mdx +++ b/src/pages/[platform]/start/quickstart/index.mdx @@ -213,7 +213,7 @@ 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";