search

aws-samples / aws-amplify-social-network-app-workshop

15 stars 4 forks source link

The version is so old that no one can carry out this tutorial. #5

Open RyousukeUchino opened 2 years ago

RyousukeUchino commented 2 years ago

The Node version, React version, and Amplify version are all too old to proceed with the tutorial at this time

Even if I use the older version, I can't push with an error at the stage of amplify push.

Resource Name: amplify-boyaki-190-UserPoolClientLambda-pgNkRiF0UX4b (AWS::Lambda::Function)
Event Type: create
Reason: Resource handler returned message: "The runtime parameter of nodejs10.x is no longer supported for creating or updating AWS Lambda functions. We recommend you use the new runtime (nodejs14.x) while creating or updating functions. (Service: Lambda, Status Code: 400, Request ID: 29b8f611-0f60-436f-8b29-c2616a2b7e5e)" (RequestToken: 9a2038aa-ba4d-94f0-f47d-f8f8b148f494, HandlerErrorCode: InvalidRequest)

On the other hand, even if I try my best to go through the tutorial with the newer version, I still get stumped by the GraphQL schema definition.

All I could get out of it is that Amplify is not backward compatible at all

isbkch commented 2 years ago

It's unfortunately so outdated that it's frustrating ...

larrycoons commented 2 years ago

Things worked up until tutorial step "3.2 Authenticator":

  1. I linked to the AWS Authenticator Component Docs here 1.a. After attempting to configure the backend (from the link above), I got dependency errors. I re-ran the command like this "npm i --legacy-peer-deps @aws-amplify/ui-react aws-amplify" 1.b. You will get EBADENGINE warnings for Jest, Pretty-Forms and Diff-Sequences, which I assume are ok for this specific tutorial 1.c. I updated the package.json file to the latest version (as of posting this comment that is 18.2.0)

  2. Copy/paste the code from here into app.js file 2.a. I wanted my authenticator to ask for phone numbers and emails at signup so . . . 2.a.1. I wanted my users to login with email and to have the option of using facebook, google, amazon or apple for setting up or logging into their accounts (you can do that here) 2.b. Test the authenticator by "npm start" on CLI, then open a browser tab to go to "localhost.3000/#/"

  3. At this point, I was able to successfully test steps 3.2 through 3.4 from the tutorial. 3.a. I took some time to go over the AWS GraphQL mock as well so I could make sure the DynamoDB data I entered was correct. Also, it seemed good to get familiar with it 3.b. MAYBE SOMEONE COULD TELL ME SOME FYI ABOUT WHAT "aws-exports.js" does or what the const/func awsExports is???

  4. The front end gave me some issues from tutorial step 3.5 4.a. The libraries installed from the CLI seem to be an issue 4.a.1. I ran the command as this: "npm install --save --force @material-ui/core @material-ui/icons moment react-router react-router-dom" 4.b. The following code was pasted over the top of the existing code in the app.js file (this is a hybrid of the tutorial and others so there may be some lines that are unnecessary in there that we can cleanup later): 

     <img width="646" alt="Screen Shot 2022-08-07 at 9 55 25 PM" src="https://user-images.githubusercontent.com/67938621/183342226-f55660e5-032b-4b7d-80da-b029c3cba575.png">

    4 c. The Sidebar.js file seems to work fine, along with the others 4.d. Check works when I load on localhost and when I $ amplify mock api it shows the other posts as well.

  5. Web hosting went fine since it was seriously easy to do (by the time I am done cleaning up, I will have removed the production URL, so I am not posting it here but its good to keep it somewhere in case you need to refer back to it).

  6. <<< I sidetracked on disablePadding but thought I would make a note that the app.js styling is not needed since it will be based on @material MUI stuff and I will come back to that after cleanup >>>>

  7. I followed the instructions for these features:
    7.a. Follow Feature Backend works fine 7.b. Follow Feature Front End works fine 7.c. Timeline Feature Backend works fine 7.d. Timeline Feature @function has some issues: 7.d.1. The graph QL schema file has to be opened with your code/txt editor manually. Extension maybe? 7.d.2 The Lambda Data source fails with errors: 7.d.2.a. When running "amplify mock api" the CLI returns the following message: 7.d.2.a.1. 'Error: Could not load lambda handler function due to Error [ERR_REQUIRE_ESM]: require() of ES Module [~filepath$] ./amplify-sns-shop/boyaki/amplify/backend/function/createPostAndTimeline/src/node_modules/node-fetch/src/index.js from [~filepath$] ./amplify-sns-shop/boyaki/amplify/backend/function/createPostAndTimeline/src/node_modules/node-fetch/src/index.js not supported.\n' [...] 7.d.2.a.2. 'Instead change the require of [~filepath$] ./amplify-sns-shop/boyaki/amplify/backend/function/createPostAndTimeline/src/node_modules/node-fetch/src/index.js in [~filepath$] ./amplify-sns-shop/boyaki/amplify/backend/function/createPostAndTimeline/src/index.js to a dynamic import() which is available in all CommonJS modules.' 7.d.2.a.3. "Be careful when using @auth directives on a field in a root type. @auth directives on field definitions use the source object to perform authorization logic and the source will be an empty object for fields on root types. Static group authorization should perform as expected. Be careful when using @auth directives on a field in a root type. @auth directives on field definitions use the source object to perform authorization logic and the source will be an empty object for fields on root types. Static group authorization should perform as expected." 7.d.2.a.3 I navigated back to [~filepath] ./amplify/backend/function/createPostAndTimeline/src and entered the command "npm install --save aws-appsynck graphql-tag node-fetch@2" in order to not be at the latest release for node (fetch which is v3) 7.e. Timeline feature frontend worked perfectly, no issue there 7.e.1. The only problem I see so far (really with everything) is that the styling is not working when its published online---def going to clean that up afterward, but its functional)

  8. Adding full text search 8.a. Full text search backend issues 8.a.1. PUSHING the update failed with these errors 8.a.1.a. ElasticSearchStreamingLambdaFunction AWS::Lambda::Function Tue Aug 09 2022 15:46:00 GMT-0700 (Pacific Daylight Time) Resource handler returned message: "The runtime parameter of python3.6 is no longer supported for creating or updating AWS Lambda functions. We recommend you use the new runtime (python3.9) while creating or updating functions. (Service: Lambda, Status Code: 400, Request ID: f5a53544-ff30-41a5-94d9-f99b4d9f4333)" (RequestToken: cf183227-9d01-4244-9e6a-964ed7b34dd1, HandlerErrorCode: InvalidRequest) 8.a.1.b. amplify-boyaki-production-203237-apiBoyakiGql-RCU0M4XN100I-SearchableStack-LHAZWQVLZFGE AWS::CloudFormation::Stack Tue Aug 09 2022 15:46:07 GMT-0700 (Pacific Daylight Time) The following resource(s) failed to create: [ElasticSearchStreamingLambdaFunction]. 8.a.1.c. SearchableStack[...]AWS::CloudFormation::Stack Tue Aug 09 2022 15:46:28 GMT-0700 (Pacific Daylight Time) Embedded stack arn:aws:cloudformation:us-east-1:688573982126:stack/amplify-boyaki-production-203237-apiBoyakiGql-RCU0M4XN100I-SearchableStack-LHAZWQVLZFGE/d4595890-1832-11ed-b812-0ab60a03f8e3 was not successfully created: The following resource(s) failed to create: [ElasticSearchStreamingLambdaFunction]. 8.a.1.d. apiBoyakiGql AWS::CloudFormation::Stack Tue Aug 09 2022 15:46:32 GMT-0700 (Pacific Daylight Time) Embedded stack arn:aws:cloudformation:us-east-1:688573982126:stack/amplify-boyaki-production-203237-apiBoyakiGql-RCU0M4XN100I/889ac8a0-1547-11ed-99f8-0aa41c82fc5d was not successfully updated. Currently in UPDATE_ROLLBACK_IN_PROGRESS with reason: The following resource(s) failed to create: [SearchableStack].

    8.a.2. At first it looked like I needed to update the runtime environment, but as I researched the "Functions" in Lambda, I realized I was using Node instead of Python so I realized that there was some kind of issue with the push processes. Therefore, I ran a command to update the Amplify CLI: $ sudo npm i -g @aws-amplify/cli 8.a.4. Just re-push using this command: $ amplify push 8.a.4.x . . . I mean you could go to [filepath] ./boyaki/amplify/backend/auth/[whatever your boyaki subfolder is named]/[whatever your "cloudformation" file is named] and change the rundtime to "Runtime: nodejs14.x" but I don't think it is necessary so I kept mine the same since you can change the runtime to nodejs14 from the lambda console in AWS (which is what I did)

    8.b. You have to enter the command [$ amplify status] so that you can get the endpoint URL for the app and post some phrases that you can remember. Then, using APPsync you can search for that phrase in posts so you can verify that the backend for searching works. 8.c. FRONT END!!! looks like the styling on the search selection is a little off but the function works so we can address that styling stuff at cleanup time.

    1. Time to work with a team and create a github repository 9.1. Creating a staging environment works because no users are found on the backend where I am working. 9.2 CI/CD on github so my team can contribute but I kept getting this error: git@github.com: Permission denied (publickey). fatal: Could not read from remote repository. ... Please make sure you have the correct access rights and the repository exists. 9.2.a. SO, I had to learn about SSH and then setup CLI SSH and then setup github SSH key 9.2.b. ALSO NOTE: Before I retire I just wanted to note that the "Main" and "master" branches may some how get misconstrued if you are exploring errors and such. 9.3. CONNECTING WITH YOUR GITHUB TO BUILD A CI/CD ENVIRONMENT #2 is tomorrow or the next day (got other tasks for now)