Create a Fullstack React App with AWS Amplify: Build in Just 1 Hour! 🚀

[@pitronum]

after days trying to figure out how backend and front end are going to connect to each other in amplify. your 1 hour saved my time.

[@bngdup]

Amazing demo, helping me learn some cool new things and complete a fun project!

[@awsclouddemos]

Glad you enjoyed it!

[@Side-by-sideTech]

Can this deployment work for android apps

[@Photo-Ninja]

Hi. Thanks for the video it helped me a lot to understand the process but I have a question to you. I have a simple node.js and express server that I just need to deploy and run. I have my app frontend app already working on amplify but can't figure how should I add my backend server here. It is simple server not authentication, no database. It is only scraping the date of the website. Can you advice what steps should I take? Many thanks

[@awsclouddemos]

docs.amplify.aws/guides/api-rest/express-server/q/platform/js/#initializing-the-amplify-project

[@Ishuuuuu0]

Amazing video..., learned a lot through it. But i have a doubt. What is the role of authentication if users can see other users notes? I want to update my Database schema that also stores username, can you please give me hint how to fetch username?

[@awsclouddemos]

it's just for a demo purpose you can change it the way you like.. you can use something like import { getCurrentUser } from 'aws-amplify/auth' and then const { username } = await getCurrentUser();

[@SahaSir-nl6mh]

is aws amplify free to use for pet projects like these? or they charge based on API usage?

[@awsclouddemos]

free for 12 months per account - aws.amazon.com/amplify/pricing/

[@atozknit]

I finished building as you told me but I still log in and sign out! I can only see the React logo, not this one. Is there anything I missed? 1. Modifying build specifications 2. 2. ampify cli latest setting 3. Setting the staging branch 4. Creating and Setting Up IAM - Amplify-Backend Deployment 5. Build success with redistribution! But still, the React logo..

[@awsclouddemos]

double check how you added your authentication ?

[@HimankVyas-r4w]

16:59 where you copy the url?

[@StephenBradshaw-j7b]

Well done. Can we get another app with the Blog schema showing connection relations in graphql? Thank you.

[@awsclouddemos]

will try to do that

[@Trust_but_Verify]

This is still very code heavy. Is Amplify supposed to be low code platform?

[@awsclouddemos]

it depends on what type of application you are trying to build. In this case we included backend apis, database, s3 etc..

[@IrfanKhan-ud4gx]

When we run the 'amplify push' command, the GraphQL folder is not created in the 'src' directory. How can this be resolved?

[@awsclouddemos]

Please re-watch the video and follow the steps accordingly. Thanks

[@goutham3663]

Can we use nextjs instead of react here?

[@awsclouddemos]

Yes you should be able to do it

[@lukesullo910]

Is there any way to make this into a chat application?

[@awsclouddemos]

I will try to make another video

[@ranjurave]

Very helpful. Thank you :)

[@worldofgaming7163]

Hi sir I'm facing an error in the build stage that missing frontend definition in buildspec....how to solve it please help me

[@awsclouddemos]

What is the error you are getting ??

[@harshithachitiprolu1070]

Very Helpful😄

[@ubaidraza6712]

explaination very good

[@stereojaxx6888]

Hi, I am not able to pull the backend. It says failed to pull the backend.

[@stereojaxx6888]

Fixed it, never mind.

[@awsclouddemos]

Glad you figured it out

[@mohammedismail6872]

great and conise explanation !

[@awsclouddemos]

Glad you liked it!

[@kumaruv3241]

Thank you 👍

[@awsclouddemos]

You are welcome

[@ubaidraza6712]

very nice video src/graphql forlder not create

[@funjaylee]

Holy speed talking. Hard to follow for a beginner.

[@awsclouddemos]

Sorry for that! Will try to slow down

[@nerrrrrrrrrrrrrd]

i'm up to creating the Graph api 46:44 and after pasting the code i get import errors Attempted import error: 'API' is not exported from 'aws-amplify' (imported as 'API'). ERROR in ./src/App.js 22:26-37 export 'API' (imported as 'API') was not found in 'aws-amplify' (possible exports: Amplify) ERROR in ./src/App.js 28:26-37 export 'Storage' (imported as 'Storage') was not found in 'aws-amplify' (possible exports: Amplify) ERROR in ./src/App.js 44:28-39 export 'Storage' (imported as 'Storage') was not found in 'aws-amplify' (possible exports: Amplify) ERROR in ./src/App.js 45:10-21 export 'API' (imported as 'API') was not found in 'aws-amplify' (possible exports: Amplify) ERROR in ./src/App.js 60:10-24 export 'Storage' (imported as 'Storage') was not found in 'aws-amplify' (possible exports: Amplify) ERROR in ./src/App.js 61:10-21 export 'API' (imported as 'API') was not found in 'aws-amplify' (possible exports: Amplify) webpack compiled with 6 errors

[@awsclouddemos]

try the following 1. install node modules 2. try and build the project 3. if you are still stuck post your github link so I can have a look (meanwhile you can look at the code here github.com/gitmurali/amplify-fullstack/blob/main/src/App.js)

[@blakemcfarlane7830]

Hello, I am having the same issue. Did you manage to figure out what was wrong?

[@nerrrrrrrrrrrrrd]

@@blakemcfarlane7830 I didn't fix it but I believe it is a aws-amplify version error if you are using the newest version it handles exports different than what this tutorial is using older version

[@investwithatul]

Hey! I am getting the exact same error. Let me know if you find a fix. Thanks

[@andrewranck8126]

AWS amplify updated and no longer supports API imports, its now client

[@ryanwest8058]

Well when ever I try amplify con figure, I get this error message :Error fetching release: EPERM: operation not permitted, open 'C:\Users\bluem\.amplify\bin\amplify.exe' I look in to this folder amplify/bin, and it is empty

[@awsclouddemos]

I think it looks like a permission issue..

[@ryanwest8058]

@@awsclouddemos how could i fix it?

[@awsclouddemos]

@@ryanwest8058 1. try clearing cache using amplify clear 2. or try reinstalling your amplify cli tool 3. Ensure that the 'C:\Users\bluem.amplify\bin' directory is added to your system's PATH environment variable.

[@ranjurave]

The code at 44:07 import React, { useState, useEffect } from "react"; import "./App.css"; import "@aws-amplify/ui-react/styles.css"; import { API } from "aws-amplify"; import { Button, Flex, Heading, Text, TextField, View, withAuthenticator, Image, } from "@aws-amplify/ui-react"; import { listNotes } from "./graphql/queries"; import { createNote as createNoteMutation, deleteNote as deleteNoteMutation, } from "./graphql/mutations"; const App = ({ signOut }) => { const [notes, setNotes] = useState([]); useEffect(() => { fetchNotes(); }, []); async function fetchNotes() { const apiData = await API.graphql({ query: listNotes }); const notesFromAPI = apiData.data.listNotes.items; setNotes(notesFromAPI); } async function createNote(event) { event.preventDefault(); const form = new FormData(event.target); const data = { name: form.get("name"), description: form.get("description"), }; await API.graphql({ query: createNoteMutation, variables: { input: data }, }); fetchNotes(); event.target.reset(); } async function deleteNote({ id }) { const newNotes = notes.filter((note) => note.id !== id); setNotes(newNotes); await API.graphql({ query: deleteNoteMutation, variables: { input: { id } }, }); } return ( My Notes App Create Note Current Notes {notes.map((note) => ( {note.name} {note.description} deleteNote(note)}> Delete note ))} Sign Out ); }; export default withAuthenticator(App);

[@awsclouddemos]

github.com/gitmurali/amplify-fullstack