aws-amplify / learn

AWS Amplify Learn

Amplify Learn

This is the repo for https://amplify.aws/learn, which is a site containing courses on AWS Amplify created by the Developer Advocacy team working on the product.

The site is hosted on Amplify Hosting and built using these technologies:

• Amplify Studio
• Amplify UI
• Next.js

Prerequisites

• Node.js 14.x or later
• Amplify CLI
  • Install it by running this command in terminal: npm install -g @aws-amplify/cli
• An AWS Account

Getting Started

1. Fork the repo: https://github.com/aws-amplify/learn/fork and clone it.
2. In your terminal, navigate to the root of your local clone.
3. Run npm install
4. Run amplify init
   • This will initialize an Amplify app within your local directory.
   • Follow the steps in the terminal to set up your project.
   • After completing these steps, Amplify CLI will set up the cloud resources needed for the Learn repo.
5. If you want to push up these changes to AWS, run amplify push
   • This will create AWS resources on your account required by the Learn app. More details in the Amplify Backend Environment section.
6. Run npm run dev
7. Navigate to localhost:3000/learn to view the site in your dev environment.

Amplify Backend Environment

The Learn app uses Amplify to create a backend environment consisting of these services:

• AWS AppSync
• AWS DynamoDB

When you run the terminal command amplify push and follow the prompts, Amplify CLI pushes the configurations from the Learn app to create these resources using AWS CloudFormation.

Modifying data for the Learn app

The Learn app uses the CMS from Amplify Studio to manage data for the app. To set this up, follow these steps:

1. First, make sure the backend environment has been pushed up to the cloud.
2. Run amplify console in terminal and choose AWS console as your option.
   • This should open the AWS Amplify Console in your browser.
3. In the left navigation menu, click on "Amplify Studio settings".
4. Enable Amplify Studio by toggling it on.
5. Once it's done setting up, go back to your terminal and run amplify console.
6. Choose Amplify Studio and now a browser window should open up for Amplify Studio
7. Now you can use Amplify Studio to modify the data models and create content.

Learn More

To learn more about AWS Amplify, take a look at the following resources:

• AWS Amplify Documentation - learn about Amplify features such as CLI and the different libraries.

learn's Issues

Broken image on course

https://amplify.aws/learn/courses/Fullstack-for-Frontend-Developers-e7319/lessons/7

Amplify pull image is broken.

additionally, observed the Multi auth is missing as well for datastore in lesson 11

Image download and rendering takes too long

We are building an ios app and are running into problems rendering a number of images directly fetched from S3 using graphql query which fetches the public image url and then displays it on ios client side.

The current flow is as follows:

1. We are uploading images as public to S3 and then storing public url to db.

2. When users login we are simply fetching image url's and rendering in the ui.

When following the above process we are encountering slowness in rendering the images of sometimes up to 3 seconds which is not feasible for our use case. We are wondering if the storage and retrieval of images from S3 directly is not the best way as S3 is meant more for heavy duty data? Is it better to use cloudfront as a layer between S3 and our app? Or is there a better solution. It is also worth noting that when we use other public images where we just take the image url and store it directly into db its much faster than uploading to S3 and then using that image. Is there something we are missing here?

Amplify.API.query(request: .list" throws http error in IOS app

Hi,

I am trying to list some rows from the table.

I did
let todo = Todo.keys let predicate = todo.user_id == user.userId Amplify.API.query(request: .list(Todo.self, where: predicate)) { event in switch event { case .success(let result): switch result { case .success(let todo): print("Successfully retrieved list of todos: \(todo)") case .failure(let error): print("Got failed result with \(error.errorDescription)") } case .failure(let error): print("Got failed event with error \(error)") } }

I got

==HUB== HubPayload(eventName: "Auth.fetchSessionAPI", context: Optional(Amplify.AmplifyOperationContext<Amplify.AuthFetchSessionRequest>(operationId: FC39CCF3-DAFA-4DA9-AC88-1DB3DB378AF3, request: Amplify.AuthFetchSessionRequest(options: Amplify.AuthFetchSessionRequest.Options(pluginOptions: nil)))), data: Optional((Swift.Result<Amplify.AuthSession, Amplify.AuthError>) .success ( .info = AWSAuthCognitoSession(isSignedIn: true, userSubResult: (Swift.Result<Swift.String, Amplify.AuthError>) .success ( .info = "4f576e6f-fae4-41f8-8f62-05e5886c8f67"; ), identityIdResult: (Swift.Result<Swift.String, Amplify.AuthError>) .success ( .info = "us-east-1:<....>"; ), awsCredentialsResult: (Swift.Result<AWSPluginsCore.AuthAWSCredentials, Amplify.AuthError>) .success ( .info = AuthAWSCognitoCredentials(accessKey: "<....>", secretKey: "<....>", sessionKey: "<....>", expiration: 2020-12-29 03:49:16 +0000); ), cognitoTokensResult: (Swift.Result<AWSPluginsCore.AuthCognitoTokens, Amplify.AuthError>) .success ( .info = AWSCognitoUserPoolTokens(idToken: "<....>", accessToken: "<....>", refreshToken: "<....>"); )); ))) Got failed event with error APIError: The HTTP response status code is [500]. Recovery suggestion: The metadata associated with the response is contained in the HTTPURLResponse. For more information on HTTP status codes, take a look at https://en.wikipedia.org/wiki/List_of_HTTP_status_codes

can someone please help ?
this is my first app..
Note: I replaced big string values with <....> in what I posted above.

Here is my schema

type TODO @model @auth ( rules: [ # allow all authenticated users ability to create posts # allow owners ability to update and delete their posts { allow: owner }, # allow all admin users all privileges { allow: groups, groups: ["Admin"] } ] ) @key(name: "todosByYear", fields: ["year"], queryField: "todosByYear") @key(name: "todosByMonth", fields: ["month"], queryField: "todosByMonth") @key(name: "todosByDay", fields: ["day"], queryField: "todosByDay") { id: ID! user_id: ID! day: Int month: Int year: Int updatedAt: AWSDateTime! tasks: [Task] @connection(keyName: "byTodo", fields: ["id"]) name: String! desc: String! }

Application name parsing error

I ran into an error, snsdev-dev already exists, when trying to create a new project. After a bit of digging it appears that root of the problem is the generation of resource names:

RoleName: !If [ShouldNotCreateEnvResources, 'boardg891ab340_sns-role', !Join ['',[ 'sns', !Select [3, !Split ['-', !Ref 'AWS::StackName']], '-', !Ref env]]]

This pattern is present in many location throughout the CloudFormation templates and dictates that there must be a convention followed when naming applications. This convention is not enforced through the CLI when initially creating the project.

A name like example-app breaks this convention and can cause issues.

Can the resource name generation algorithm be changed to support additional conventions?

If not, can restrictions on project names be added to the CLI?

Posts filters url encoding not removing unused group selections

To reproduce:

• Check a platform and uncheck it so no platform is selected
• Check a category and uncheck it so no category is selected

Current:
https://amplify.aws/community/posts?%7B%22platforms%22%3A%5B%5D%2C%22categories%22%3A%5B%5D%7D

Expected:
https://amplify.aws/community/posts

[Bug] Multi auth method missing in Basic tutorial lesson 11

Issue:

https://amplify.aws/learn/courses/Fullstack-for-Frontend-Developers-e7319/lessons/11

I've replicated the tutorial and after enabling owner based authorization, DataStore sync to backend will not work
type Note @model @auth(rules: [{allow: owner}]) {...

The video shows that after enabling this change, no items will appear in the app, unless the user creates a new one. However on Update, the console throws an unauthorized access response. The item is only added locally, but after relogging in, it is erased (thanks to the DataStore.clear() command).

Suggestion/Solution:

What is missing in the tutorial is the following code link to Amplify documentation

import { Amplify, AuthModeStrategyType } from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure({
  ...awsconfig,
  DataStore: {
    authModeStrategyType: AuthModeStrategyType.MULTI_AUTH
  }
})

After this change, the console does not give an error, and the added items are visible in Amplify Studio.

This improvement will significantly reduce the barriers to entry for beginners like me to create an MVP and unblock them.

AuthError : Confirmation code cannot be empty ! - While using Auth.confirmSignUp

Hey Guys,

I am getting following error consistently.

I even converted the verification code in to int before call, still no luck ?

try { 
          console.log("........2.....handleVerificationCode. : ");
          console.log(parseInt(this.state.verificationCode));

          let codeInt = parseInt(this.state.verificationCode);
          const confirmSignUpResponse = await Auth.confirmSignUp(
                    {
                        username:this.state.email,
                        code:codeInt 
                    } 
               );
                console.log(confirmSignUpResponse);
        } catch (error ) {
            console.log("ERROR OCCURRED !!! ! ! !  ! ");
            this.setState({
              errors: { ...this.state.errors,cognito:error }
            });
        }

Would really appreciate any help to resolve this issue.

Thanks

Build a Membership Website with Amplify, Stripe, and Next.js || Setup a Next.js Project - Instructions Need Updating

Issue: Written instructions are not sufficient to continue the lesson. The default options of the create-next-app tool build out the application in such a way that the other lessons do not apply.

For example, create-next-app recommends using page routing. That is the default and indicated with a "(recommended)" in the tool. But, that choice will give you a different folder structure than this demo needs.

Also, create-next-app defaults initially to using TypeScript. The demo lesson uses JavaScript. So mentions of "_app.js" are invalid.

Unable to access stripe checkout page

I am able to go through my flow locally and get redirected to the stripe checkout page, no problems. When my app is deployed on amplify, I receive an error "You did not provide an API key. You need to provide your API key in the Authorization header, using Bearer auth (e.g. 'Authorization: Bearer YOUR_SECRET_KEY'). See https://stripe.com/docs/api#authentication for details, or we can help at https://support.stripe.com/."

Error in Amplify.Storage.list() example

I followed the Storage.list() example, but failed to list public files I uploaded.

Diving into AWS's code, I believe the issue is with the "path" parameter in the example, which should be "" instead of "/".

Amplify.Storage.list(
    "/",  // *** this should be ""
    result -> {
        for (StorageItem item : result.getItems()) {
            Log.i("MyAmplifyApp", "Item: " + item.getKey());
        }
    },
    error -> Log.e("MyAmplifyApp", "List failure", error)
    );

Looking for Help for a discord Channel

I am wondering if there is a current discord channel to help and talk to others regarding aws amplify

Sidebar section - incomplete and incorrectly formatted

Issue:

This section should be set in the margin as a table. Also, the information is incomplete.

[Bug] /Post Router Issue

Issue:
The router for /Post page on the tutorial is not functioning. I've ensured all steps were followed correctly, and all packages up to date.

function index() {
  const router = useRouter();
  return (
    <Layout
      onClick={() => {
        router.push("/post");
      }}
      authText="Sign Up"
      username="none"
    >

Build the Website Pages: Build a Membership Website with Amplify, Stripe, and Next.js

Updates require two refresh in the browser to show changes

Not sure why this would be happening but I've noticed this few times as I was checking events I had added in a PR.

I would expect changes to show after the first refresh not the second.

[Bug] modal class causing issues

Issue:
While going through this video "Using AWS Amplify Studio Components Locally" [https://amplify.aws/learn/courses/Fullstack-for-Frontend-Developers-e7319/lessons/8] and utilizing the code provided in the tutorial the app complies successfully but the display on the web browser is blank. I narrowed it down to adding the modal className for UpdateNote and CreateNote. This could also be operator error. Any ideas on how to resolve this issue would be greatly appreciated.

Constantly failing deploys

The build and deploy pipelines are broken again

aws-amplify/amplify-hosting#541

DataStore - Data won't be synchronized. No GraphQL endpoint configured. Did you forget `Amplify.configure(awsconfig)`?

I have tried every solution but it is not working. Please help me.
@dabit3

Code review feedback, minor

Overall really solid work on this Harry! I don't have any major concerns on any of this after looking through the entire implementation. Great use of useMemo throughout btw.

There are a handful of places throughout where you've still got commented out code hanging out, I'd kill it everywhere since it's always going to be in history if you need it, like I said, minor.

Outside of that, the only optimization I really see is abstracting your template page queries into a "queries" directory with an index providing initialization exports for each page or slug, to enable any potential future reuse, and it keeps the graphql out of each template, but that's just a personal preference and not a necessity, so feel free to close this without that change.

Coming This error after running npm run dev

1 of 1 unhandled error
Server Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
renderElement
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6043:9)
renderNodeDestructiveImpl
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderHostElement
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5642:3)
renderElement
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5952:5)
renderNodeDestructiveImpl
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderForwardRef
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5859:5)
renderElement
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6005:11)
renderNodeDestructiveImpl
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderHostElement
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5642:3)
renderElement
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5952:5)
renderNodeDestructiveImpl
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderContextProvider
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5920:3)
renderElement
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6017:11)
renderNodeDestructiveImpl
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderContextProvider
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5920:3)
renderElement
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6017:11)
renderNodeDestructiveImpl
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
file:///C:/Users/mdala/membership-website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)error npm run dev

How do I filter subscriptions with ids on graphql appsync API?

My problem is more related to a real-time chat application with multiple chat rooms.
I want to filter each message and send it to users who subscribed to the same chatrooms. (not filtering on client-side)

I am a beginner to app sync. How do I do that Please help me?

Please give me relevant links, codes or steps.

Using multiple backends from a single front end

The documentation at https://docs.amplify.aws/cli/teams/multi-frontend does a nice job of explaining how you can have multiple front-end apps share a common back-end. What's less clear is what is the best way to do the opposite - have a single Amplify app make use of multiple backends.

Imagine I was building a mobile app for a truck rental company to facilitate maintenance on their fleet. This company has one micro service for the trucks in the fleet and a separate micro service for the vendors capable of doing maintenance on those trucks. We want to build an app that allows someone to make use of both of those services. That same company probably has many other services (e.g. one for customers, another for sales, another for discounts, etc.) that we don't care about for this particular app.

What's the best way to use Amplify goodness (e.g. GraphQL APIs, DataStore) in this kind of a situation? The examples I see seem designed to help an app talk to a single service (e.g. ToDo app). Having some documentation for this would be great but I'd also be happy to just get pointed to some good resources.

Directory name containing a colon

Hello,

There is a directory in this repo with a name containing a colon.

Windows users will not be able to clone the git repo properly.

bug: Newsletter links are not referencing correct route path

Issue

Newsletter link generation is missing the / prefix, causing broken links in the following areas:

• Footer
• Past/Previous

Add / prefix to the creations/props associated with newsletters/... routes.

[Bug] Wrong auto-generate settings shown in image

Issue:

On this page related to auto-generating Note content, the image showing the reader which options to select is incorrect and results in poor content that doesn't match the author's intent.

The author wants the reader to generate sample content in which each note has 1-3 words in its "title" and 1-5 sentences in its "text". But using the values shown in the image, the user ends up with titles of 1-3 characters and text of 1-5 words.

I've attached a corrected image that can be used in place of the one currently used in the tutorial.

[Bug]Not display value of Title and Text on input fields of UpdateForm

Describe the issue

I added the following code according to the description. But display value of Title and Text on input fields of UpdateForm.

<NoteUICollection overrideItems={({ item, idx }) => {
  return {
    overrides: {
      Vector31472464: {
        as: 'button',
        onClick: () => {
          setShowUpdateModal(true)
          setUpdateNote(item)
        }
      }
    }
  }
}}
/>

https://amplify.aws/learn/courses/Fullstack-for-Frontend-Developers-e7319/lessons/9

Cause

Since the condition titleValue === "" in the following code only holds for the first time, the value of note.note is not reflected in the input field even if props.note in UpdateNote is updated.
If we use the CSS display: none to show and hide, the UpdateNote component will continue to display the value of the first displayed props.note when props.note is updated.

A part of generated src/ui-components/UpdateNote.jsx:

export default function UpdateNote(props) {
  const { note, overrides, ...rest } = props;
  const [titleValue, setTitleValue] = useStateMutationAction("");
  const [noteValue, setNoteValue] = useStateMutationAction("");
  const buttonOnClick = useDataStoreUpdateAction({
    fields: { title: titleValue, text: noteValue },
    id: note?.id,
    model: Note,
    schema: schema,
  });
  useEffect(() => {
    if (titleValue === "" && note !== undefined && note?.title !== undefined)
      setTitleValue(note?.title);
  }, [note]);
  useEffect(() => {
    if (noteValue === "" && note !== undefined && note?.text !== undefined)
      setNoteValue(note?.text);
  }, [note]);
  ...

Amendment

As Is:

<div className='modal' style={{ display: showUpdateModal === false && 'none' }}>
  <UpdateNote
    note={updateNote} overrides={{
      MyIcon: {
        as: 'button',
        onClick: () => setShowUpdateModal(false)
      }
    }}
  />
</div>

To Be:

{showUpdateModal && <div className='modal'>
  <UpdateNote
    note={updateNote} overrides={{
      MyIcon: {
        as: 'button',
        onClick: () => setShowUpdateModal(false)
      }
    }}
  />
</div>}

Refs: #395

Events dates are off by one day when running locally

When running the web site locally, all events are off by one day.
I guess this is a due to a local timezone, my laptop is running in

Central European Summer Time
Time zone in Paris, France (GMT+2) 

Here is a screenshot of the hosted version :

Here is a screenshot of my local version :

Add description for binding `note.title` and `note.text` to each input fields on UpdateNote component

Describe the issue

I think there are points of improvement in the following statements in Connect Data Models to UI Components step of Full Stack for Front-End Developers: Build your first AWS Amplify and React App

UpdateForm
Follow the same process as above for the UpdateNote form. The only difference is that you'll need to select note.id in order to define which note is updated.

https://amplify.aws/learn/courses/Fullstack-for-Frontend-Developers-e7319/lessons/5

Expected contents

In UpdateNote case,I would prefer to add a description that binds note.title and note.text to the Title and Note value prop.

Unable to Run Locally

Howdy, folks!

Awesome resource. I'd love to help with the site and start a meetup.

Have a couple of things I wanted to fix but am still unable to run the site locally with yarn start.

ENTIRE LOG (CLICK TO EXPAND!)

success open and validate gatsby-configs — 0.189 s
success load plugins — 0.284 s
success onPreInit — 0.948 s
success initialize cache — 0.017 s
success copy gatsby files — 0.103 s
success onPreBootstrap — 0.014 s
success source and transform nodes — 0.577 s
success building schema — 0.417 s
success createPages — 0.100 s
success createPagesStatefully — 0.029 s
success onPreExtractQueries — 0.003 s
success update schema — 0.054 s
warning The GraphQL query in the non-page component "/Users/ahmadawais/Documents/Web/Sandbox/awsamplify/src/templates/Event.js" will not be run.
warning The GraphQL query in the non-page component "/Users/ahmadawais/Documents/Web/Sandbox/awsamplify/src/templates/Post.js" will not be run.
Exported queries are only executed for Page components. It's possible you're
trying to create pages in your gatsby-node.js and that's failing for some
reason.

If the failing component(s) is a regular component and not intended to be a page
component, you generally want to use a <StaticQuery> (https://gatsbyjs.org/docs/static-query)
instead of exporting a page query.

If you're more experienced with GraphQL, you can also export GraphQL
fragments from components and compose the fragments in the Page component
query and pass data down into the child component — http://graphql.org/learn/queries/#fragments
success extract queries from components — 0.184 s
success run graphql queries — 7.802 s — 43/43 5.51 queries/second
success write out page data — 0.005 s
success write out redirect data — 0.001 s
Generating image thumbnails [==============================] 422/422 80.6 secs 100%
warning The icon(/Users/ahmadawais/Documents/Web/Sandbox/awsamplify/src/assets/images/icon.png) you provided to 'gatsby-plugin-manifest' is not square.
The icons we generate will be square and for the best results we recommend you provide a square icon.

success onPostBootstrap — 0.431 s

info bootstrap finished - 87.426 s

 ERROR  Failed to compile with 1 errors                                                                                                                                                                   8:41:23 PM

This relative module was not found:

* ../aws-exports in ./src/utilities/track.js
✖ ｢wdm｣:
ERROR in ./src/utilities/track.js
Module not found: Error: Can't resolve '../aws-exports' in '/Users/ahmadawais/Documents/Web/Sandbox/awsamplify/src/utilities'
 @ ./src/utilities/track.js 9:0-39 15:22-31
 @ ./src/utilities/index.js
 @ ./src/templates/Contributor.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
ℹ ｢wdm｣: Failed to compile.

Send halp :)

Error when trying to start locally

When trying to run the web site locally, Gatsby fails to start with error :
Error: Cannot create as TypeComposer the following value: Date.

stormacq:community $ node --version 
v11.14.0
stormacq:community $ gatsby --version 
2.5.14
stormacq:community $ npm --version 
6.9.0

$ npm start

> [email protected] start /Users/stormacq/Documents/amazon/code/amplify/community
> yarn delete-cache && gatsby develop

yarn run v1.15.2
$ rm -rf .cache
✨  Done in 0.08s.
success open and validate gatsby-configs — 0.097 s
warning Plugin gatsby-plugin-manifest is not compatible with your gatsby version 2.3.4 - It requires gatsby@^2.4.0
success load plugins — 0.287 s
success onPreInit — 0.551 s
success initialize cache — 0.022 s
success copy gatsby files — 0.095 s
success onPreBootstrap — 0.009 s
success source and transform nodes — 0.784 s
error UNHANDLED REJECTION


  Error: Cannot create as TypeComposer the following value: Date.
  
  - SchemaComposer.js:365 SchemaComposer.createTempTC
    [community]/[graphql-compose]/lib/SchemaComposer.js:365:11
  
  - SchemaComposer.js:563 SchemaComposer.addAsComposer
    [community]/[graphql-compose]/lib/SchemaComposer.js:563:27
  
  - schema-composer.js:21 createSchemaComposer
    [community]/[gatsby]/dist/schema/schema-composer.js:21:18
  
  - index.js:42 Object.<anonymous>
    [community]/[gatsby]/dist/schema/index.js:42:28
  
  - Generator.next
  
  - new Promise
  
  - index.js:65 Object.build
    [community]/[gatsby]/dist/schema/index.js:65:17
  
  - index.js:344 
    [community]/[gatsby]/dist/bootstrap/index.js:344:32
  
  - Generator.next
  

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `yarn delete-cache && gatsby develop`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/stormacq/.npm/_logs/2019-05-17T07_35_08_877Z-debug.log

Can we get a developer focused chat channel for higher bandwith, real-time communication and collaboration?

Unless I'm missing something, there seems to be a lot of separation between AWS employees developing on AWS Amplify and its open source contributors (the primary common ground being PRs and Issues). It would be nice to have a higher bandwidth communication option like a chat channel where open source contributors to the project can discuss their implementation plans and details in the open with AWS developers. This, I think, would improve collaboration (maybe even increase contributions?), provide mentorship opportunities, and foster a deeper sense of community. We currently have https://gitter.im/AWS-Amplify/Lobby which seems to be more oriented towards user support than active/on-going development. Could we maybe get something development focused?

[Bug] Membership site example figma file can not be synced with Amplify studio

Issue: Hero section renders error when trying to accept all.

Exact error is: "An error occurred saving components. Bad control character in string literal in JSON at position 190".

Believe related to the "money bag" icons to the left of the text "For just $99" but not experienced enough with Figma. Can't remove / replace icon since I don't have editing permissions.

TIA

No answer from [email protected]

Hello,

i've sent an email to [email protected], as mentioned here . But i didn't get an answer.

Could you please check ?

Thanks

Lesson 9 for Fullstack for front-end developers code is causing edit icon to dissapear

Originally from discord

Hi, trying to follow the course (notes app) and when setting the update override, it works but the icon vanishes from the note ui. Any idea why ?

Steps to reproduce:

1. Following Full stack for front-end developers course
2. Step 9 shows to add this code

<NoteUICollection overrideItems={({ item, idx }) => {
  return {
    overrides: {
      Vector31472464: {
        as: 'button',
        onClick: () => {
          setShowUpdateModal(true)
          setUpdateNote(item)
        }
      }
    }
  }
}}
/>

3. Go back into app, edit icon is missing.

Lambda Triggers on New Items

Hello,

In order to perform some actions when a new object is created, can I just hook the DynamoDB table created by Amplify and trigger SNS/Lambda?

Would Amplify run onto issues if I update the objects from Lambda? (Example, I saved the item id=123 value="data" -> value="newData" and it would sync back to the devices?

AWS Amplify CD service don't work with "git push -f <origin> <branch_name>"

The amplify Continuous Deployment service at frontend don't work on following steps:

1. Reset to old commit with git reset --hard <commit_identifier>
2. Force push to remote repository with git push -f <origin> <branch_name>

The AWS Amplify Console don't start a new deployment progress and don't reconize the "new commit"

Markdown files do not accept apostrophes

If your text content has an apostrophe ' the build fails. As an example

description: 'In this workshop **we'll** learn how to build cloud-enabled web applications with Angular & AWS Amplify.'
banner: './banner.png'

This will cause:

error Error processing Markdown file /Users/nsswamin/workspace/documentation/community/content/posts/2019-04-12-angular-workshop/index.md:

      can not read a block mapping entry; a multiline key may not be an implicit key at line 4, column 7:
    banner: './banner.png'
          ^
error Command failed with exit code 1.

Unnecessary trailing characters at posts page

Current:
https://amplify.aws/community/posts?%7B%7D

Expected:
https://amplify.aws/community/posts

Removing the trailing characters will make the url more polished and friendlier. Eg: social media sharing.

re:invent event

Add re:invent event to the events page as well include a guide with all of the sessions that are diving into Amplify/GraphQL.

In the React course, screenshots in part 3 are using incorrect conditions

https://amplify.aws/learn/courses/Fullstack-for-Frontend-Developers-e7319/lessons/3.

The video is correct but the documentation uses a "Word Length" and "Sentence Length" limitation instead of "Sentence Length" and "Paragraph Length".

https://discord.com/channels/705853757799399426/870372272865693747/1030230123720478770

Question: Where is best place to ask questions?

I have an issue specific to no Amplify framework at AWS Beijing and looking for advice. TIA.

[Bug] Text refers to wrong field

Issue:

On page 5 of the intro tutorial, https://amplify.aws/learn/courses/Fullstack-for-Frontend-Developers-e7319/lessons/5

Existing text:
Let's do the same for the note text - select the paragraph below the title and set the label to note.title.

Should be:
Let's do the same for the note text - select the paragraph below the title and set the label to note.text.

Contributors page. Events section is not sorted properly by date

It seems that sorting is not working properly as the event on the 27th Nov (AWS User Group Taiwan) appears before an event on the 23rd (ngChina).

[Bug] EditButton is not displayed in NoteUI

Issue:

I got following error on browser console and icon to edit note is not shown, when I works on step Modify AWS Amplify Studio Generated Components in Code.

Expect the edit icon to appear to the left of the trash icon. But, it not appered.

react-dom.development.js:86 Warning: The tag <path> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
    at path
    at button
    at http://localhost:3000/static/js/bundle.js:38032:11
    at http://localhost:3000/static/js/bundle.js:36719:20
    at div
    at http://localhost:3000/static/js/bundle.js:38032:11
    at div
    at http://localhost:3000/static/js/bundle.js:38032:11
    at http://localhost:3000/static/js/bundle.js:36626:18
    at div
    at http://localhost:3000/static/js/bundle.js:38032:11
    at http://localhost:3000/static/js/bundle.js:36626:18
    at div
    at http://localhost:3000/static/js/bundle.js:38032:11
    at http://localhost:3000/static/js/bundle.js:36626:18
    at div
    at http://localhost:3000/static/js/bundle.js:38032:11
    at http://localhost:3000/static/js/bundle.js:36626:18
    at NoteUI (http://localhost:3000/static/js/bundle.js:1701:5)
    at div
    at http://localhost:3000/static/js/bundle.js:38032:11
    at http://localhost:3000/static/js/bundle.js:36669:18
    at C (http://localhost:3000/static/js/bundle.js:36153:19)
    at div
    at http://localhost:3000/static/js/bundle.js:38032:11
    at http://localhost:3000/static/js/bundle.js:36626:18
    at y (http://localhost:3000/static/js/bundle.js:36170:20)
    at NoteUICollection (http://localhost:3000/static/js/bundle.js:2002:12)
    at div
    at App (http://localhost:3000/static/js/bundle.js:34:96)
    at div
    at $f631663db3294ace$export$c760c09fdd558351 (http://localhost:3000/static/js/bundle.js:73283:10)
    at n (http://localhost:3000/static/js/bundle.js:35421:15)

If you delete the following as 'button' description, the error will not occur. And the edit icon will also appear.

<NoteUICollection overrideItems={({ item, idx }) => {
  return {
    overrides: {
      Vector31472464: {
        as: 'button',
        onClick: () => {
          setShowUpdateModal(true)
          setUpdateNote(item)
        }
      }
    }
  }
}}
/>

in https://amplify.aws/learn/courses/Fullstack-for-Frontend-Developers-e7319/lessons/9

I think that the following modification is advisable.

<NoteUICollection overrideItems={({ item, idx }) => {
  return {
    overrides: {
      EditButton: {
        onClick: () => {
          setShowUpdateModal(true)
          setUpdateNote(item)
        }
      }
    }
  }
}}
/>

Amplify storage - change bucket

Hi,
as described in this tutorial:
https://docs.amplify.aws/lib/storage/getting-started/q/platform/ios#initialize-amplify-storage

I integrated Amplify storage with my iOS app. The thing is that this conf created a new S3 bucket, when what I was looking for was to link to my existing bucket.
Could someone please explain me how to achieve this?

[Bug] TITLE_HERE

Issue: can not use CreateNote to add new note when add Add Owner-based Authorization Rules

I try to change index.js to fix the issue

change code:
Amplify.configure(config);
to:
import { Amplify, AuthModeStrategyType } from 'aws-amplify';
Amplify.configure({ ...config, DataStore: { authModeStrategyType: AuthModeStrategyType.MULTI_AUTH } })

[Bug] Video Three is the wrong one

Issue:
Video three on the amplify page doesn't make sense where it is. It is the project set up however it is showing something that has components imported which is the next section.

Blazor Support

Please add Blazor support
https://dotnet.microsoft.com/apps/aspnet/web-apps/client

I'm not able to checkout or update this repo

I see the above when checking out using GitKraken on windows 10. Seems like there could be an invalid character in the filename? Please advise.

Comment left in text

Issue:

In the "Creating an Amplify Project" section, there's a comment that should be deleted: "I like all the pictures for these steps!"

Profile Posts order should be latest to oldest

https://amplify.aws/community/contributors/gerard-sans

Posts are sorted in reverse from oldest to latest.