DevSpot
DevSpot
  • Видео 41
  • Просмотров 46 242

Видео

Web Developer Portfolio Contact Form (Vue.js, AWS, Postman)
Просмотров 1,9 тыс.Год назад
In this video we go over how you can use AWS services to create a contact form on your portfolio. It will only take you 30 minutes to set it up and start receiving emails!
Scroll Based Animations In Under 10 minutes!
Просмотров 85Год назад
Here is a quick run down on how to use intersection observer in your JavaScript project. Links: Website: devspot.netlify.app/ TikTok: www.tiktok.com/@dev.spot Instagram: devspot.blog
Build a Basic Weather App w/ Vue [Learn how to use API's in your project!]
Просмотров 2,2 тыс.Год назад
Build a Basic Weather App w/ Vue [Learn how to use API's in your project!]
Secure API Gateway with Cognito User Pool [AWS 2022]
Просмотров 3062 года назад
Secure API Gateway with Cognito User Pool [AWS 2022]
Vue Navigation Guards (AWS Amplify/Cognito User Auth)
Просмотров 2,7 тыс.2 года назад
Vue Navigation Guards (AWS Amplify/Cognito User Auth)
AWS API Gateway, Lambda and DynamoDB | Create a REST API [FREE] | An easy way to create a blog!
Просмотров 5982 года назад
AWS API Gateway, Lambda and DynamoDB | Create a REST API [FREE] | An easy way to create a blog!
How to build a portfolio website with Vue.js! [SUPER EASY]
Просмотров 18 тыс.2 года назад
How to build a portfolio website with Vue.js! [SUPER EASY]
The Basics of Props in Vue [QUICK and EASY]
Просмотров 502 года назад
The Basics of Props in Vue [QUICK and EASY]
Basics of JavaScript String Methods [MUST KNOW]
Просмотров 502 года назад
Basics of JavaScript String Methods [MUST KNOW]
EASY Multi-Page Web Application [JS,HTML,CSS]
Просмотров 2,7 тыс.2 года назад
EASY Multi-Page Web Application [JS,HTML,CSS]
Event Handling in Vue [EASY]
Просмотров 1262 года назад
Event Handling in Vue [EASY]
IMPROVE your Vue project with these rendering directives!!
Просмотров 1142 года назад
IMPROVE your Vue project with these rendering directives!!
Deploy Website to Netlify [Github+Netlify]
Просмотров 1772 года назад
Deploy Website to Netlify [Github Netlify]
How to use JSON Data in your Vue Project!
Просмотров 8 тыс.2 года назад
How to use JSON Data in your Vue Project!
JavaScript Array Methods (Mutating Arrays)
Просмотров 1182 года назад
JavaScript Array Methods (Mutating Arrays)
How to setup Vue Router
Просмотров 1052 года назад
How to setup Vue Router
Using Methods in Vue [2021]
Просмотров 532 года назад
Using Methods in Vue [2021]
How to get your first Vue project up and running [2021]
Просмотров 1372 года назад
How to get your first Vue project up and running [2021]

Комментарии

  • @michalfrankowski5328
    @michalfrankowski5328 Месяц назад

    thanks for the vid, very helpful. I wonder how/where did you learn all of this? any course you can recommend for vue+aws applications? I am just starting out with Vue and want to use AWS for my infrastructure. I am a bit lost more I am reading about this.

  • @joanzaldivar9103
    @joanzaldivar9103 3 месяца назад

    Not sure if you'll respond but I have an issue where I cannot use require but I can use import but when testing it on AWS I keep getting errors on errors. but right now this is the error: "{ "errorType": "Error", "errorMessage": "Cannot find package 'aws-sdk' imported from /var/task/index.mjs",".

  • @devanshjain832
    @devanshjain832 4 месяца назад

    Thank you so much for this. Deployed my first CI-CD pipeline using your content.

  • @vicenteaviles8445
    @vicenteaviles8445 4 месяца назад

    where is the video with the animations an firebase?? thanks man

  • @pegienpatrick
    @pegienpatrick 5 месяцев назад

    Very clear explanation

  • @mohammadkhattab2934
    @mohammadkhattab2934 5 месяцев назад

    User I have a first json file named values_and_save and a second file named filedProperty. I want to add a new line in the first file. At the same time, the line added in the first file brings the name of Opekt to the second file using vue 3 and typescript and json server.

  • @psychochef8058
    @psychochef8058 5 месяцев назад

    hello

  • @sainthokaha5630
    @sainthokaha5630 7 месяцев назад

    Can you please make a video of how you hosted this particular portfolio website online

    • @devspot3864
      @devspot3864 7 месяцев назад

      Checkout my video on AWS codepipeline CICD. That video shows how you can host a site on s3. I am working on a video currently on how to use Amplify as well.

  • @tejaspatel7240
    @tejaspatel7240 7 месяцев назад

    I can't thank you enough for this tutorial, it was very useful. I searched for tutorials that would allow me to host my app directly on S3, but almost evry other tutorial video on youtube was suggesting to purchase domain. Yours was the only tutorial that perfectly suited my requirements, even though my project is in React, i only had to change the buildspec slightly, everything else was on spot. Again, thank you very much for this.

    • @devspot3864
      @devspot3864 7 месяцев назад

      I'm glad I could help! Thank you for watching. 🙏

  • @tiffswan8785
    @tiffswan8785 8 месяцев назад

    Hi! Thank you so much for your video. Kindly ask your assistance on this. I'm still encountering a 502 Bad Gateway Internal Server Error, even after adding the EmailPolicy. Can you assist me with this? I hope you can respond.

    • @devspot3864
      @devspot3864 8 месяцев назад

      Have you checked the cloud watch logs? That may help. Your response format for the lambda may also be incorrect. I have been wanting to make some more videos so I will work on a video going over this very soon.

    • @velialbeniz596
      @velialbeniz596 7 месяцев назад

      @@devspot3864 ty for your time. i am also getting that 502 Bad Gateway error. I also checked logs it returns some errors that i don't understand. 2023-11-19T23:36:58.279+03:00 INIT_START Runtime Version: nodejs:20.v13 Runtime Version ARN: arn:aws:lambda:eu-north-1::runtime:0593533e3a90a967b5685780855b7a89f7ba80b7d910603abf59369c6c4c7331 2023-11-19T23:36:58.350+03:00 2023-11-19T20:36:58.350Z undefined ERROR Uncaught Exception {"errorType":"Runtime.UserCodeSyntaxError","errorMessage":"SyntaxError: Unexpected token ';'","stack":["Runtime.UserCodeSyntaxError: SyntaxError: Unexpected token ';'"," at _loadUserApp (file:///var/runtime/index.mjs:1084:17)"," at async UserFunction.js.module.exports.load (file:///var/runtime/index.mjs:1119:21)"," at async start (file:///var/runtime/index.mjs:1282:23)"," at async file:///var/runtime/index.mjs:1288:1"]} 2023-11-19T23:36:58.371+03:00 INIT_REPORT Init Duration: 92.03 ms Phase: init Status: error Error Type: Runtime.ExitError ps: i 've checked after i post this message. i think i did several syntax error while i was writing the lambda function.

  • @bryantfeld4709
    @bryantfeld4709 9 месяцев назад

    Would you mind sharing the repo for this tutorial? Thanks!

  • @UCcdTp7XpCkVLkaRCsDcifFg
    @UCcdTp7XpCkVLkaRCsDcifFg 9 месяцев назад

    peace life

  • @SithO
    @SithO 11 месяцев назад

    Great tech explanation! Disgusting the sounds you make with your mouth, sounds like you are trying to remove some meat from your teeth

  • @GovindaShah-bj6pd
    @GovindaShah-bj6pd Год назад

    Could you please upload code

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

    I followed it the the T but am getting an error message "{"message":"Missing Authentication Token"}"

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

      This could be a couple of things! Make sure that the IAM role has the correct permissions. If that is not the issue then make sure you are passing the correct JWT from your cognito session if you are using that. Let me know if that helps.

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

      @@devspot3864 Thanks for the reply! The IAM role definitely has the right permissions. I don't think I am using a cognito session, how could I check this? I'm very new to all this backend stuff

    • @georgeritho3914
      @georgeritho3914 8 месяцев назад

      @@stratocaster1134 I did some research, since I received the same message. (FYI I'm also new to this backend developing) Found out postman needs to be authenticated to aws to invoke the API. Still wasn't successful with the '200 Ok' message response but I believe I resolved the "missing authentication token" and now receiving "internal server error". On the mission of resolving that now. Thanks @devspot3864 for the content. Looking forward for more! Also lmk if I didn't need to authenticate postman with AWS signature.

    • @georgeritho3914
      @georgeritho3914 8 месяцев назад

      Received a successful status: 200 Ok! Found out my "internal server error" was due to the lambda runtime I was using. I created a new lambda function and used Node.js 14.x instead of Node.js 18.x

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

    can please share the code?

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

    Thanks I see you posted the video about S3 pipeline! I managed to do this before watching this - but I will check that to see if this is any different :)

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

      Oh nice! You'll have to let me know if you set it up differently or more efficiently.

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

    hello and thank u for this amazing video i am having this issue when i invoke my url {"message":"Missing Authentication Token"} what could be the case?

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

      This could be a couple of things! Make sure that the IAM role has the correct permissions. If that is not the issue then make sure you are passing the correct JWT from your cognito session if you are using that. Let me know if that helps.

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

      @@devspot3864 Thank you for the quick response and the awesome content!

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

    Thanks a lot for this video!!! It's really clear and helpful for beginner :)))

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

      I'm glad you found it helpful!

  • @dev-mantas
    @dev-mantas Год назад

    Good to see u back 😁

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

      It has been a while! I have some more video ideas so there is more to come. Thanks for sticking around. 🙌

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

    Where can I get the JWT token to put in header from?

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

      You should use the currentAuthenticatedUser method to get all info on the user. So import 'Auth' from 'aws-amplfiy' and then call Auth.currentAuthenticatedUser

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

      docs.amplify.aws/lib/auth/manageusers/q/platform/js/#account-recovery-verification

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

    Thanks for those videos, could you make an video on how to actually deploy the webpage somwhere, not on localhost?

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

      I am making a video on this right now actually. I'll show you how to make a CICD Piepline and host the site in an s3 bucket. Hopefully this weekend I'll get the video up.

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

      @@devspot3864 Thank You! Looking forward to that! I have followed all the previous tutorials, and now I only lack that JWT token to make everything work

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

      Check my reply to your other question. I linked you some documentation that shows you what to do. You need to use Auth.currentAuthenticatedUser

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

      @@devspot3864 I solved it thanks! I tried to put my code here in comments for others, but I think youtube removes all my comments with code

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

    could you please specify package versions you use for amplify? I have a problem reproducing the code, to get it to work

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

      it works for me with older packages: "@aws-amplify/ui-components": "^1.7.2", "amplify": "^0.0.11",

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

    I am getting an error trying to access postProjects: "errorType": "Runtime.ImportModuleError", "errorMessage": "Error: Cannot find module 'aws-sdk' Require stack: - /var/task/index.js - /var/runtime/index.mjs",

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

      solved: nodejs 16 is by default now, need to revert to 14

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

      You probably need to include the node modules folder. Let me know if that helps.

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

      Disregard the reply then! I do believe you should be able to use nodejs 16 tho

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

      Can you see my questions? After I referesh my answers disappear here...

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

    Really really great instruction Blake! Hope you keep at it. Finding all of your tutorials extremely helpful in building out my portfolio.

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

      I'm glad you found them to be helpful! I do have some video ideas in mind so hopefully you'll see those soon.

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

    i got a auth token failed. woudl have been cool to show how to create or find that.

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

      If you are using Amplify just check the Current Authenticated User object. Within that object you should see all of the user data including Current auth token

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

      @@devspot3864 hmm dont know what amplify is. ill look it up really quick. my friend sent me some notes from this same project that he did about a week ago. with his notes i got this error in Postman. { "statusCode": 400, "body": "\"Unsupported route: \\\"undefined\\\"\"", "headers": { "Content-Type": "application/json" } } the code actually changed around a little bit from what you originally had. i'm not quit sure where im getting the error from.

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

    how about nested json data like arrays of object and you want specific data, should i go traditional map() or theres a vue function for it?

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

      The v-for directive allows for use of indexes. That might help you get specific nested items.

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

    Other than that I found this one of the best tutorials I've used as it's short and concise, very straightforward. Thanks! It'd be great if you could link the code as you skip a few things here or there.

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

      I'm glad you found it helpful. Future videos I will link some sample code. I've been building alot with some other AWS technologies so there are more videos on the way.

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

    Hello, can i ask u please, which extensions exactly are u using? i did everything according this tutorial, but this code is all red underlined in my VScode.... and i have almost every vue extension downloaded :D

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

      Hmm that's interesting. Did you properly install all the correct dependencies? If the code is all underlined I am wondering if you have vue installed properly.

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

      Can you paste the dependencies that are in your package.json?

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

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

    What about images???

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

      You could use base64 encoded images!

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

    code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: my-project@2.0.251 npm ERR! Found: aws-amplify@5.0.5 npm ERR! node_modules/aws-amplify npm ERR! aws-amplify@"^5.0.5" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer aws-amplify@"3.x.x || 4.x.x" from @aws-amplify/ui-components@1.9.40 npm ERR! node_modules/@aws-amplify/ui-components npm ERR! @aws-amplify/ui-components@"*" from the root project

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

      Is your package.json in the correct location?

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

      I had the same error, solution was to install older packages. For me it worked with "@aws-amplify/ui-components": "^1.7.2", "amplify": "^0.0.11",

  • @mr.gegenpress7750
    @mr.gegenpress7750 Год назад

    I'm very new to AWS and also needed to hook a server up for my portfolio form so this video came in handy. Thanks a lot and keep up the great work!!

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

      I'm glad you found it helpful!!

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

    Bro Put Videos about React js

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

      I could do that! Thanks for the suggestion.

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

    great how can i get jwt?

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

      If you set up aws amplify the jwt should be in your user data! Let me know if that helps or not. I believe I made a video on this. I will check. If not I will make a video on it this week.

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

      @@devspot3864 thanks

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

    Can you include the name of the VS code extension you used for auto complete?

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

      Sorry for the delay! I've been off socials for a month. I use Intellicode as well as HTML CSS Support for setting up html and css faster. Hopefully that helps!

  • @dev-mantas
    @dev-mantas Год назад

    When I started I was using this but then I found gsap lib it makes stuff like this way easier with plugins like scrollTrigger it also allows for timelines. Another like from me tho

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

      I'll have to check that out!! Thanks for commenting!! 🤙👍

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

    Great!

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

    Do you have any other topics you want to see covered?

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

    DJ Khalid couldn't of said it better him self 🔑 keep up the good work

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

      You right haha Major key 🔑

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

    Crear video, I have a problem with the image Path not working I think for a Base VueJs path for storing images

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

      Were you able to figure out your issue?

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

      @@devspot3864 Yep

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

    great tutorial, do you happen to have the repo? I would need those png files , please

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

      Thank you!! And that's a great idea I should set a repo up. I will do that this evening and send the link to you here. 👍🤙

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

    Thanks for that video, very helpful! I would like to know, is that possible to create an input text to change the city? Maybe I have to convert the city to latitude and longitude with an API and then change the data in the code you provided.

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

      I'm glad you found it helpful!! I believe OpenWeather API (the api in the video) only gets data based on lat and long. So yes you would need to use another API to get the lat and long based on the city. I know AWS Location has a feature that could do this for you. I recommend checking that out. I might put together a video on how to set that up 👌👌

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

    Really helpful thanks

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

    Hii, good video!, can I get the token data in the lambda?

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

      Thank you! And yes you can. You can either configure the lambda to handle the token data directly or you could send token data in the header or body of the request. I guess it depends on the security you are looking for. I could put together a video on how to go about doing that 🤙🤙

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

    You should be a frontend dev

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

      Part of my work involves front-end development! I'm not the best at design tho haha

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

    When it comes to programing, I shamefully prefer light mode but I need dark mode on for everything else

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

      I respect that. Light mode gets too much hate imo

    • @343Paladin
      @343Paladin Год назад

      @@devspot3864 it’s just too fuckin bright

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

    Thank you for video. If I am understood correct the protected routs are only for ''visual' protection, because we are speaking about frontend part, i.e. user could alter the code and load protected component (the attacker could request from the API directly without a JS client). So the main question is how to protect backend... for example how to protect access to database in Vue with using Cognito. If you could record such video, I would be very grateful.

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

      That is a great point! I'll put together a video going over securing the api as well. Thanks for the comment 👍

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

      New video up! I go over how to secure your API Gateway with a Cognito user pool. Check it out. Let me know what you think! ruclips.net/video/z4ExxuXl6lg/видео.html

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

    I was wondering if you could do a video on adding/deleting stuff to a json file?

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

      Are meaning delete and add stuff to a local json file? Or do you mean deleting and adding stuff to a json based database? Let me know! I can put together a video for you either way 👌

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

      @@devspot3864 I believe the json based database, like the one you are iterating through in this video. That would be very much appreciated if you considered making a video on that!

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

      Okay cool! Ya I can definitely put a video together over the topic of adding and deleting on a database. I did actually make video on how to add data to dynamodb as well as pull the data in to your project so check that out here ruclips.net/video/o51HXC1-q1E/видео.html But I could definitely go more in depth on showing how to POST, DELETE, PUT, etc...

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

      You'll have to let me know what you think of the video I just linked. Hopefully that can help you until I put together a new video.

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

    I wanted to leave React for Vue, that's a perfect start ;) Can't wait to see part 2 :) Subscribed !

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

      Thank you for subscribing, Loïs! And you can actually watch part 2 here. ruclips.net/video/o51HXC1-q1E/видео.html I probably should have named the video better than I did haha I'm learning as I go 👍😄