Hands on Workshop - Building a Serverless Multi-user Blogging Platform with Next.js, Tailwind, & AWS

Поделиться
HTML-код
  • Опубликовано: 5 окт 2024

Комментарии • 92

  • @jarrodwatts9646
    @jarrodwatts9646 3 года назад +8

    Thanks Nader, I really like these type of videos where you put multiple AWS tools together!

    • @naderdabit
      @naderdabit  3 года назад +1

      Thanks Jarod, I'm planning to do more of them.

    • @khandoor7228
      @khandoor7228 3 года назад +1

      100% agree

    • @sincitycyclops
      @sincitycyclops 3 года назад

      @@naderdabit Would love a gatsby version of this, and also, would be cool to share links of documentation on items like Auth Schema Rules, for example. Maybe can just drop comments in the git repo. I have had a hard time finding the exact documentation I am looking for.
      Love the video(s)!

  • @eliasmoreno4672
    @eliasmoreno4672 3 года назад +2

    Found this on twitter, this is awesome 👏🏽

  • @adrianescalante1357
    @adrianescalante1357 3 года назад +8

    Awesome! I really like your videos because you are doing things with the stack I like!

    • @naderdabit
      @naderdabit  3 года назад +2

      That's great to hear! If you have anything you'd like me to showcase in the future, please let me know. Appreciate the positive words!

  • @khandoor7228
    @khandoor7228 3 года назад +3

    Awesome Nader! I really needed this as well. I didn't think to ask for this but I am very glad others asked and you delivered. I benefit greatly from the longer form videos. I am not trying to learn this stuff in 7 minutes. It is important enough to me to spend the time. Thanks again!!

    • @naderdabit
      @naderdabit  3 года назад +1

      Thanks KhanDoor, appreciate the feedback. It helps to know what I should focus on next

  • @jonathanprozzi
    @jonathanprozzi 3 года назад +2

    Thanks Nader! Your videos are so clear and helpful. Loving the Nextjs and Amplify content!

    • @naderdabit
      @naderdabit  3 года назад +1

      Thanks Jonathan, appreciate the feedback!

  • @nathancng
    @nathancng 3 года назад +2

    Love these. Really great tutorial! Thanks Nader!

    • @naderdabit
      @naderdabit  3 года назад

      Thanks Nathan, happy you enjoyed it!

  • @jacobdubail
    @jacobdubail 3 года назад +2

    This was fantastic! Thank you for the in-depth look at the interplay between these tools. I'd love to see a deeper dive on @auth directives similar to your data access patterns video.

    • @naderdabit
      @naderdabit  3 года назад +1

      Sounds good, thanks for the recommendation!

  • @StephenRayner
    @StephenRayner 3 года назад +1

    Amazing! Thank you, love watching these.

  • @haticeedis5032
    @haticeedis5032 3 года назад +1

    Thank you so much Nader for your efforts. Your videos are so educational , I learned a lot things from them 🥳

    • @naderdabit
      @naderdabit  3 года назад +1

      Thank you Hatice, I really appreciate the kind words 💙

  • @ApoorvMote
    @ApoorvMote 3 года назад +7

    Amplify Datastore is great but would like to see tutorial with react query + graphql.

  • @rajatm
    @rajatm 3 года назад +3

    You rock!!!! I'd love if you could make one video for caching with Appsync and situations in which it is efficient and useful.

    • @dravenzachariah8454
      @dravenzachariah8454 3 года назад

      you all probably dont give a shit but does any of you know of a trick to get back into an instagram account?
      I somehow forgot the password. I appreciate any tricks you can give me!

    • @duncanbeckham3453
      @duncanbeckham3453 3 года назад

      @Draven Zachariah instablaster =)

    • @dravenzachariah8454
      @dravenzachariah8454 3 года назад

      @Duncan Beckham thanks so much for your reply. I got to the site through google and im in the hacking process now.
      Seems to take quite some time so I will reply here later with my results.

    • @dravenzachariah8454
      @dravenzachariah8454 3 года назад

      @Duncan Beckham It worked and I finally got access to my account again. I'm so happy!
      Thanks so much, you saved my account :D

    • @duncanbeckham3453
      @duncanbeckham3453 3 года назад

      @Draven Zachariah You are welcome xD

  • @VincentFulco
    @VincentFulco 3 года назад +2

    Extraordinary work...I am lazy and use the next.js starter with the tailwind.css flag. Sets up the internal tailwind settings for you.

    • @naderdabit
      @naderdabit  3 года назад

      Thanks, I actually wasn't aware of this!

  • @absyas5945
    @absyas5945 3 года назад +1

    Yo my guy Nader, fuck off bro, your killing it, I love it, Thank you sir, Hope u n ur fam r doin well.

    • @naderdabit
      @naderdabit  3 года назад

      Thank you friend 💯🙏

  • @trigun539
    @trigun539 3 года назад

    Great video, thanks for the tutorial!

  • @code3144
    @code3144 3 года назад +1

    excelent!!! thanks

  • @mannycolontech
    @mannycolontech 3 года назад

    Great work! Thanks

  • @AdnanSmajlovic
    @AdnanSmajlovic 3 года назад

    Excellent!

  • @RahulSharmax19
    @RahulSharmax19 3 года назад +2

    More CDK tuts please!

  • @andreitanasuca6358
    @andreitanasuca6358 3 года назад +1

    Great video!!!
    I was wondering if you plan to update this video info on how to add posts into a Location / category and setup the routing.
    Or where user will be able to pay a certain amount to get his posts/business featured?
    I’m thinking to use this setup for a business directory app.

  • @musbell
    @musbell 3 года назад

    Thanks for the video Nader, I would love to request a video tutorial on aws-mobile-appsync-sdk-js with the Apollo JavaScript client for an offline-first app.

  • @achonwachris8431
    @achonwachris8431 3 года назад

    🔥🔥🔥

  • @eugenesergio
    @eugenesergio 3 года назад

    great tutorial! waiting for SSR support of AWS amplify

  • @JohnWeland
    @JohnWeland 3 года назад

    DUDE! that is neat! I could see some backend Lambda that would run on say... an image upload to convert to some modern file types like .webp and maybe crop/scale images for smaller screens then in the front end you just as a image set that loads the appropriate image. (I bounced through the video so forgive me if you did do that.

  • @yepyep3897
    @yepyep3897 3 года назад +2

    I'm sure that I eventually could figure it out, but how complex would it be to add a comment section, per blog post, with a backend for moderation, please?

    • @naderdabit
      @naderdabit  3 года назад +1

      Would be pretty simple actually! You could add another type for Comment and then use the @connection directive to create a relationship between posts and comments docs.amplify.aws/cli/graphql-transformer/connection
      From there you could create an admin dashboard. The users of the Admin dashboard would have privileges that you could enable using the @auth directive

    • @yepyep3897
      @yepyep3897 3 года назад

      @@naderdabit Thank you.

  • @satyak1337
    @satyak1337 2 года назад

    Pls make video on how to manage dev, stage and prod environments for amplify apps.

  • @tatemo_labs
    @tatemo_labs 3 года назад +2

    Hi Nader. I have one question.
    What could be the estimated cost of this type of app that using AppSync, keeps querying the database?

    • @naderdabit
      @naderdabit  3 года назад

      Hey, sure. AppSync has a free tier, and after that the pricing is outlined here along with a few example app use cases: aws.amazon.com/appsync/pricing/

  • @oderooluoch994
    @oderooluoch994 2 года назад +1

    I have been coding along, but got into an error at 11:32 "message": "Not Authorized to access createPost on type Post". Any guidance on how I can go about this?

  • @Rprangerr
    @Rprangerr Год назад

    Interesting. Question though, can I use this multi-user blogging platform to allow users create a blog on my domain? much like top websites like blogger, blogsky, etc.?

  • @iPankBMW
    @iPankBMW Год назад

    Hi. Could you maybe make a new video on how to properly work with Amplify in Nextjs13 since its ”server components” by default? Would be nice to get some advice from you who knows AWS well.

  • @mellow-meanderings
    @mellow-meanderings 3 года назад +1

    how are you alwaysable to read my thoughts on what I'm looking to learn? thank you for the tutorial!!

    • @naderdabit
      @naderdabit  3 года назад

      That's awesome, thank you for sharing this it is really motivating to hear! :)

  • @VinayakNirvani
    @VinayakNirvani 3 года назад +1

    Thanks Nadar. Quick question: how would API Key work from react native? If expiry period for key is 365, does that mean I will need to keep adding new key to aws-exports.js every year before its expired?

    • @naderdabit
      @naderdabit  3 года назад +1

      Yes, you'd need to rotate the key every year. You can also use IAM authentication for public access which allows you to never need to rotate any keys and is equally simple to set up.

    • @VinayakNirvani
      @VinayakNirvani 3 года назад +4

      @@naderdabit thanks. I think everyone would appreciate if you can make video on how to manage dev, staging and production environments in Amplify and how can we make releases from dev to staging to production.

  • @rodrigofrancalacci1
    @rodrigofrancalacci1 Год назад

    Thanks for the content! I have a question though. Is there any way I could connect each Cognito user to one dynamodb table to get informations like "wish list", profile picture, and etc for each user? Thanks, appreciate your help!

  • @TheCryoFist
    @TheCryoFist 2 года назад

    Was this course updated to accommodate the 2.0 Amplify UI update?

  • @rickrothweiler9265
    @rickrothweiler9265 3 года назад

    Thank you, very good workshop! Is it possible to extend these models with the amplify adminUI and re publish? I see something about a DataStore when I try to connect with the adminUI?

  •  3 года назад

    Youre awesome Nader thanks a lot. I just want to know is there any specific reason for not using typescript I just wonder. thanks again

  • @mbele2553
    @mbele2553 3 года назад +2

    Help!!!
    After updating the API with an additional auth type and add the auth rules to the model, when I try to deploy I am getting this error.
    "@auth directive with 'userPools' provider found, but the project has no Cognito User Pools authentication provider configured."
    I deleted the deployment and start again from scratch but still having the same error. Is there something I am doing wrong I need help please,

    • @roddutra7265
      @roddutra7265 3 года назад +1

      I got caught on this one too but the answer is pretty simple:
      After you run 'amplify update api', add API as the default and then 'Configure additional auth types? Yes", at 27:11 on the video when it shows you the additional auth types you need to press the SPACE key to select Cognito
      Turns out that pressing ENTER doesn't do anything (when you see the circle selectors on the terminal) so if you just press enter it won't actually add Cognito User Pools

    • @Bargatlvr
      @Bargatlvr 3 года назад +1

      @@roddutra7265 Thank you!!!

  • @_yopee
    @_yopee 3 года назад

    Please, what VS code theme are you using ? Great content!

    • @JimKrillPDX
      @JimKrillPDX 2 года назад

      Pretty sure it's Cyberpunk, and the Activate UMBRA Protocol theme

  • @johnkucharsky6927
    @johnkucharsky6927 3 года назад +1

    Is it possible to use build in api and mongodb and deploy it to amazon? Store only photo on aws

    • @naderdabit
      @naderdabit  3 года назад

      Yes, absolutely. I'd probably recommend using Lambda to talk to MongoDB - using either API Gateway or AppSync as the API layer, along with S3 for image storage

    • @johnkucharsky6927
      @johnkucharsky6927 3 года назад

      @@naderdabit If I'll using stack in your video it seems like it's three times easier then mern. I am a beginner and i want to start with something easy. Can you give me advise, next.js plus aws services is good for me? And what are the advantages of using mern? Sorry for my English)

  • @Spykerel04d
    @Spykerel04d 3 года назад

    Hello Nader! First of all, thanks for the content!
    When we start a project with Amplify ($ amplify init), it automatically creates an s3 bucket with a zip and a json. Then, when we add some services (for example GraphQL api), it adds some files more..
    Those files are just "backups" to recover the amplify project? Since S3 is excluded from lifetime free tier, if we delete them, will cause some major broke on the project?
    Thanks

  • @vmailtk5
    @vmailtk5 3 года назад

    The serverless component deploys to Lambda@Edge, how do I deploy to Lambda instead?

  • @sangchoju
    @sangchoju 3 года назад

    Cool

  • @dipstickjimmy789
    @dipstickjimmy789 3 года назад

    OK all works fine local - tried the npx serverless - ok deploys. However when I update a post the post is updated on the database but the static props dont update - what am I not getting?

  • @md.maskawathossainmasuk1814
    @md.maskawathossainmasuk1814 3 года назад

    When I trying to deploy getting this error
    ```
    CredentialsError: Missing credentials in config, if using AWS_CONFIG_FILE, set AWS_SDK_LOAD_CONFIG=1
    ```

  • @mikeybravo9069
    @mikeybravo9069 2 года назад

    Whats the cost of using this stack (aws)?

  • @peterhironaka
    @peterhironaka 3 года назад

    This was great. Thank you for making this! One question - I was trying to deploy to Amplify, and I keep getting an error w/GraphQLAPI. It says 'Build error occurred. Error: No credentials' - which is odd since the identity pool id was created and generated in the aws-exports.js file. Any tips?

    • @yepyep3897
      @yepyep3897 3 года назад

      I'm receiving the same error.

  • @johnkucharsky6927
    @johnkucharsky6927 3 года назад

    ./pages/index.js
    Attempted import error: 'listPosts' is not exported from '../graphql/queries'.
    Amazon created for me automatically todo list instead of post list. Please help me, this is my schema from aws appsync console. I don't know how to change it, how can I fix it?
    type Mutation {
    createTodo(input: CreateTodoInput!, condition: ModelTodoConditionInput): Todo
    updateTodo(input: UpdateTodoInput!, condition: ModelTodoConditionInput): Todo
    deleteTodo(input: DeleteTodoInput!, condition: ModelTodoConditionInput): Todo
    There are many fields there

  • @DawidTomkalski
    @DawidTomkalski 3 года назад

    how did you setup data sources?

  • @netafado
    @netafado 3 года назад

    Thanks afor this video, does revalidate works in GetStaticProps?... I tried it doesn't work seems after hosting on serverless

    • @dipstickjimmy789
      @dipstickjimmy789 3 года назад

      Did you get any help on this?

    • @netafado
      @netafado 3 года назад

      @@dipstickjimmy789 It`s doesn`t works using serverless framework yet.

  • @ApoorvMote
    @ApoorvMote 3 года назад +1

    Its really bad idea to configure amplify on _app.js. If you have static marketing page then 300kb of amplify is downloaded. Even 404 page not found will require 300kb amplify. If I want some static pages to be amp pages then modifying _app.js ruins everything.

    • @whiskers_jelly
      @whiskers_jelly 3 года назад

      What would you suggest as an alternative?

    • @ApoorvMote
      @ApoorvMote 3 года назад +1

      @@whiskers_jelly Nader actually showed it in previous videos. You only configure amplify on pages that actually use amplify. So you can build marketing pages with amp pages. And first load of static pages is really fast.

    • @whiskers_jelly
      @whiskers_jelly 3 года назад

      @@ApoorvMote thanks for the response! I haven't seen all of his videos yet, so I haven't heard that yet. Thanks again

    • @mbele2553
      @mbele2553 3 года назад +1

      Help!!! Please I saw your github.com/aws-amplify/amplify-cli/issues/3480
      and I try the suggestions but still not working for me
      After updating the API with an additional auth type and add the auth rules to the model, when I try to deploy I am getting this error.
      "@auth directive with 'userPools' provider found, but the project has no Cognito User Pools authentication provider configured."
      I deleted the deployment and start again from scratch but still having the same error. Is there something I am doing wrong I need help please,

    • @matheson.phillip
      @matheson.phillip 3 года назад +1

      @@mbele2553 Hey mate, you need to press spacebar when selecting the additional authorisation types. It allows multiple selections so you need to be explicit. Just pressing enter on "Amazon Cognito Use
      r Pool" will skip.
      I got caught on the same step

  • @goodstuff2read
    @goodstuff2read Год назад

    this needs to be added at the top of the "configureAmplify.js" file.
    import "@aws-amplify/ui-react/styles.css";
    so it looks like this:
    import "@aws-amplify/ui-react/styles.css";
    import { Amplify } from "aws-amplify";
    import config from "./aws-exports";
    Amplify.configure(config);

  • @danielray8321
    @danielray8321 2 года назад

    server less but requires aws server hahaha

  • @iukeay
    @iukeay 2 года назад

    Any recommendations on how to create a user notifications when another user replies to a comment / or post