In this blog post we will go through building a server-rendered realtime collaborative todo list app with Next.js and AWS Amplify.
You can check o...
For further actions, you may consider blocking this person and/or reporting abuse
How to deploy Nextjs frontend (SSR) in amplify console?
You will need to do :
This will generate a static version of your app in the
outdirectoryThen point Amplify Console to the out directory by setting artifacts -> baseDirectory in your amplify config : docs.aws.amazon.com/amplify/latest...
I did same but still access denied error page on my production branch url - master.d1pgdow2brm58j.amplifyapp.com/
Ya I also have access denied when done generate the page. When start SSR build, it go to Access Denied.
I have attached
AdminstratorAccessto the service role, but it still the same.Do you have any fix on this??
Thank you. Can I deploy Nextjs API with this?
No, unfortunately you can't deploy the API directory like this, this is only for your static assets and for the api calls you will need a node server. You can use zeit's now to easily deploy the API, alternatively you can use any provider that supports node apps deployment and then running npm run build && npm run start.
Why is the title of this article "Server-Side Rendered Real-time Web App with Next.js, AWS Amplify" if Amplify doesn't support SSR? 🤔
Amplify Console doesn't support SSR but you can use the Amplify API to populate the data for your page on the server side
ts -v = 3.6.2
reactjs -v = 16.9.2
Line 64 in my file, on the add() method definition (at add.payload.name), was getting a "cannot find name 'currentTodo'" error.
Changed name: currentTodo => name: state.currentTodo
add methodThen, deleted state.currentTodo entirely from
works ok now... I'm brand new to typescript & React Hooks so not sure if those changes will bite me later but so far good project to learn these...
Thanks for reporting that, I updated the post to fix it 👍
I love this. I’ve used prisma.io for graphql a lot before but I want to try amplify appsync. The only thing I think it’s missing is how to handle what the user can or can’t do when using the queries or mutations. Do you know any good read for this?
That's true it doesn't go into how to handle auth and user permissions. I would recommend checking out the chatt app codebase here It's complete and written very clearly and make sure to read the overview post here.
Awesome tutorial! I don't know why but for the subscriptions to work I had to configure PubSub with
PubSub.configure(config);I also think the subscribe function in the observable type should return an object with an unsubscribe function.
Thanks for this... one thing that has gotten immensely confusing as I walk through this is where
src/APIcomes from inimport { GetTodoListQuery } from "../src/API";.Locally, that does not exist.
amplify configure codegen
Awesome, thanks! Noticed your reducer code omits the
set-currentmethod, although this is included in the repo. Really nice writeup, makes me want to learn more about Amplify !Thanks for catching that, I updated the post 👍
I was literally pulling my hair off yesterday to understand how getInitialProps works with AppSync, thank you very much for this step by step.
Same happened to me, that's why I decided to write it :D
Happy it helps
To be clear, you can't actually host full Next.js SSR sites on AWS Amplify - only static exported versions.
Is there any way to deploy it on AWS. if not then what are the good alternatives.
That answer is out of date. You can now. aws.amazon.com/blogs/mobile/host-a...
Thanks for the update. :)