Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

framework and variant explanation + corrected wrong infos #8058

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

framework and variant explanation + corrected wrong infos #8058

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4a16d79
Add info for framework and variant / corrected css path / removed sen…
Oct 30, 2024
60163b3
Merge branch 'aws-amplify:main' into main
ThomasReulen Nov 27, 2024
b382787
changed main.js to main.ts
Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions src/pages/[platform]/start/quickstart/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -92,11 +92,11 @@ Add the following to the `index.html` file:
</html>
```

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));
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -215,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";
Expand Down