Did this using react for the front-end back in August. It took me a while since I was new to using MongoDB at the time but I was satisfied when I got it done.
@14:15, I'd recommend adding a then statement after mongoose.connect with a console log message to verify the connection to MongoDB. Aside from that, great tutorial!
These kind of micro projects are great for connecting the dots for beginners like me. Thank you very much for that. Also I love how you setup the dev environment from the very beginning all the time. Appreciate it !
U can create a route (REST) for delete... create a function, something like this in your backend: async destroy(req, res){ const id = req.params.id let shorturl= await ShortUrl.findById(id); if(!shorturl){ res.json({"message": "some message error"}); } shorturl = await ShortUrl.findByIdAndDelete(id); return res.json(shorturl); } and your front just add a function that will delete in a button: async function handleDeleteUrl(){ const response = await api.delete(`/shorturls/delete/${props.match.params._id}`); setShortURL(response.data); props.history.push('/'); } {...} Delete PS: I used react for this tutorial.
Kyle, I know you know, mention optimizations also as Key-Value storage is better then DOCUMENT based storage in this type of Design. + you need attach some meaning to the hashed value as if you shorten a link 5 number of times the system will generate 5 different ids to that single URL.
short hint: you can use mdl (material-design lite) like bootstrap and it's design is exactly material design. I for example don't like bootstrap ^^ but for the backend part: THX a lot 💙
It's terrible when people fawn all over tutorials then the creator never updates it and 2-3 years go by. He should either remove this or update it or explain the many problems anyone faces today trying to follow his tutorial. Terrible.
Dude that was intense, thanks a lot. Please, can you HEROKU this, to make it full, from local to live. There're tips and tricks in handling deploying to heroku we can learn from you in a simplified manner. Thanks again, Greetings from Tanzania 🇹🇿
1. on "server.js" file, change "mongodb://localhost/urlShortener" to process.env.MONGO_URL || "mongodb://localhost/urlShortener" 2. in package.json create a "start" script with "node ./server.js" 3. create a free Heroku account 4. create a free Heroku app 5. add free MongoDB in "Resources" under your Heroku application settings 6. commit changes and deploy to Heroku (follow "Deploy" steps) 7. you're done, enjoy! created a PR so you can see the changes and a nice "Deploy to Heroku button" github.com/WebDevSimplified/url-shortener/pull/1
Nice tutorial! But there is a little problem that I got lost since 19:23 , the page didn't reflash and keep loading. Finally I googled a lot and I've solve the problem. I didn't install anything about MongoDB. I got the same problem in another tutorial "How To Build A Markdown Blog Using Node.js, Express, And MongoDB " few days ago. I guess this is the same problem: I didn't install MongoDB first.
Nice one. It would be cool though, to show how to make this on a live web page! Because i have no idea how i can transfer it to my live web page. Do i have to use MySQL then or what?...
@@WebDevSimplified Hi. Me again. So i took on this project and i am getting an error at this step 19:27, when i click on shorten, nothing happens and the console in visual studio code shows "UnhandledPromiseRejectionWarning: MongooseServerSelectionError: connect ECONNREFUSED 127.0.0.1:27017" I've googled it, and it seemed like it had to do with mongodb not being installed, so i've installed it but it still doesn't work. Do you have any idea what could cause this problem?
I have one question about shortId: How is it guaranteed that the generated Id is unique everytime? Since it isnt based on the full url or on the database, Im kind of confused. Apart from that: Thank You for all these great videos! I really like the way you're always starting from ground zero and taking things step by step from there. Keep doing what you're doing!
try to check the shortid package from npmjs website. The package described this "Can generate any number of ids without duplicates, even millions per day."
@Rob Hogan uniqueness just requires evaluation. you either have to do seeded randomness that is proven and checked to not collide until N reaches a certain number or alternatively id's have to be constrained with "unique" in database management systems to prevent insertion of doublettes. all in all i see no point in blindly trusting code i didn't write myself. thus why i ended up here and even found this github issue. in case of this url shortener it wouldn't be hard to just evaluate newly created id's for existence.
what about the mongodb db? should we create it or it created automateclly with the setup you did? i used to use mongo atlas so i dont know how local db work.
If you don't have it installed, you'll have to install MongoDb on your local machine. Otherwise, using Atlas (free version) and using the available connection string will work just fine.
Maybe its a dumb question, but where is the database stored? Or for example, with your other project "Mybrary" we needed to connect the Database to MongoDB Atlas, for Heroku to have a connection to a database. In this project its all on localhost, could I just add this Code to my domain and it would work? What would I put in the mongoose function: mongoose.connect('URL')?
I love this tutorial but.... i guess its not working anymore.... I did follow the same steps exactly. and i faced few issues first was with Bootstrap where some of the classes been removed from the new bootstrap and then other functions is not working and it doesn't let me run the server anymore... I don't know if this is only me or everyone else have same issue
@@brianogas5245 same here bro LOL ... the thing is with mongoose there is some functionality has been changed with the new version. so if you want to follow up on the older version you need to install the mongoose same version as its in the tutorial. BUT better thing is if Kyle make's an updated version video :D
Bootstrap is probably on a new version hence Kyle mentions some deprecrated classes. About the server not running: Not sure if you have the exact same issue as i had, but lots of people some to run into similar issues: make sure you have MongoDB (Community Edition) installed on your machine. Check out either one of following guides on how to do that: www.mongodb.com/docs/guides/server/install/ www.mongodb.com/docs/manual/administration/install-community/ Maybe you already installed MongoDB but i'll mentoin it anyways since i was getting lost until i realized the obvious: that i had to install MongoDB on my computer first, haha
Awesome video! Just a quick question. How does shortid.generate() know about all it’s previous generations if it does not know about the rest of the database. I understand it know about a history of a given sever session but what is the server stopped and started. Again amazing video! This is left me Curious.
A quick solution would be to check for that newly generated shorturl in the database before assigning it to any full url. That way we can make sure if that url is going duplicate we can generate a new one
Great video Kyle. I try to follow it and run after I done. But I got this error "UnhandledPromiseRejectionWarning: MongooseServerSelectionError: connect ECONNREFUSED 127.0.0.1:27017". Do you or anyone have idea how to fix this and run code on localhost:5000?
I think i had the same issue, make sure you have MongoDB (Community Edition) installed on your machine. Check out either one of following guides on how to do that: www.mongodb.com/docs/guides/server/install/ www.mongodb.com/docs/manual/administration/install-community/ Maybe you already installed MongoDB but i'll mentoin it anyways since i was getting lost until i realized the obvious: that i had to install MongoDB on my computer first, haha
@@SatyamCodesss i believe that :27017 port is used for your database connection, so your localhost should be something different than that, for example :5000 or something else you prefer, as long it's not the same as your database port or another port that's already in use
Not sure if you have the exact same issue as i had, but make sure you have MongoDB (Community Edition) installed on your machine. Check out either one of following guides on how to do that: www.mongodb.com/docs/guides/server/install/ www.mongodb.com/docs/manual/administration/install-community/ Maybe you already installed MongoDB but i'll mentoin it anyways since i was getting lost until i realized the obvious: that i had to install MongoDB on my computer first, haha
Though it's highly unlikely to get the same shortened URL for two different URLs, it is still possible.. so shouldn't you verify everytime that a shortened URL doesn't already exist in the database ?
sir, if we have to display shor url on server then we need to call ShortUrl.find() but an error show up on cmd that ShortUrl.find is not a function . please sir explain it
If you have error message during the tutorial maybe it's because you haven't installed MongoDB. mongoose doesn't do it. Kyle did a video about this : ua-cam.com/video/wcx3f0eUiAw/v-deo.html
Hi Kyle, Thank you for such an informative video on url shortner. But while following your code, I found that "shortid" has now been deprecated. So I was trying to use nanoid instead, but require statement is not working for that. Could you please help me with the updated code and how I can use nanoid in this project? Any help would be much appreciated. Thanks!
The amount of clarity in this tutorial is just amazing. The way you teach the way you explain all the stuff.... It's just simply jumps into mind
Maybe 2 years ago, but not now.
@@SilvaOnTubeI have commented 2 years ago😉
@@abdullahirfan3078 I know, that is exactly my point.
@@SilvaOnTube Still a great tutorial by today's standard what are you talking about bruh
For those doing the tutorial in 2022, "sr-only" has been replaced with "visually-hidden" in bootstrap
Thanks. Can you also help how to use nanoid in place of shortid (as it is depreciated). Thanks
What about table-responsive
@@dmusic9465 Don't know, try googling it, that's how I found out when it didn't work
The Way he writes code..its beautiful 😊 to watch
he is also very beautiful guy
Did this using react for the front-end back in August. It took me a while since I was new to using MongoDB at the time but I was satisfied when I got it done.
Nice. That sounds like a fun project.
@14:15, I'd recommend adding a then statement after mongoose.connect with a console log message to verify the connection to MongoDB. Aside from that, great tutorial!
hey, about this, my mongodb connection is failing. could you give some more insight
Yes same
Awesome video, I'd love to see it expanded to maybe have a login screen (for the UI) and protected routes with JWT or something.
ua-cam.com/video/gmiDuqU3avE/v-deo.html
These kind of micro projects are great for connecting the dots for beginners like me. Thank you very much for that. Also I love how you setup the dev environment from the very beginning all the time. Appreciate it !
Not when dependencies deprecate and there is no help getting around that.
This is a great project. One thing I would add is the ability to Delete one of the short URLs if you don't need it anymore. Thanks for sharing.
U can create a route (REST) for delete... create a function, something like this in your backend:
async destroy(req, res){
const id = req.params.id
let shorturl= await ShortUrl.findById(id);
if(!shorturl){
res.json({"message": "some message error"});
}
shorturl = await ShortUrl.findByIdAndDelete(id);
return res.json(shorturl);
}
and your front just add a function that will delete in a button:
async function handleDeleteUrl(){
const response = await api.delete(`/shorturls/delete/${props.match.params._id}`);
setShortURL(response.data);
props.history.push('/');
}
{...}
Delete
PS: I used react for this tutorial.
@@ncscorp3538 Thanks for sharing this with us.
A YEAR OF FREE HOSTING?!?!?! NANI!?!
I don't know what to say... You guys save lives... I'm so emotional, thanks for all you do for the community kyle
Just wanted to let you know, I voted for a backend project on your poll, so psyched for this👌🏼👌🏼👌🏼
Nice! I plan to make more backend tutorials like this in the future.
@@WebDevSimplified
Maybe do an extended video on fetch or http request in general, talking about how to handle basic authorization, etc.
Kyle, I know you know, mention optimizations also as Key-Value storage is better then DOCUMENT based storage in this type of Design. + you need attach some meaning to the hashed value as if you shorten a link 5 number of times the system will generate 5 different ids to that single URL.
thanks for the free teaching video for those who have financial kids to bring up their future dreams.
short hint: you can use mdl (material-design lite) like bootstrap and it's design is exactly material design. I for example don't like bootstrap ^^ but for the backend part: THX a lot 💙
getmdl.io/
the best programming channel on youtube that i found 👍❤️
if you run npm init -y it fills in the defaults automatically, no need to press enter a bunch of times
Thanks for the knowledge
Thanks Kyle for another ★★★★★ upload!
*Video Request:* Error handling and logging with Express.
Very Nice explanation sir, Thank you!
If you could add a Short Introduction or Functioning of how final project will look, That will be a huge plus point @Kyle
And for the mongo-schema: timestamps would be good to add, that you can see when a url was shortened. it's just a built-in { timestamps: true }
Good point
This video is awesome! I'm learning so much with you!
Dude, This was so amazing!!! Made my day!
Thanks Kyle, new to development I enjoyed this.
the tutorial is so smooth (y)
can't get clearer than that great project
Easy , clear , modern tools . amazing !
Fantastic tutorial! Absolutely loved it!
Any chance of a follow-up where you teach us how to deploy it?
It's terrible when people fawn all over tutorials then the creator never updates it and 2-3 years go by. He should either remove this or update it or explain the many problems anyone faces today trying to follow his tutorial. Terrible.
Wow pretty cool man! I’m still working on my MVC PHP OOP MYSQL DATABASE, just grinding and learning the process
Dude that was intense, thanks a lot.
Please, can you HEROKU this, to make it full, from local to live.
There're tips and tricks in handling deploying to heroku we can learn from you in a simplified manner.
Thanks again,
Greetings from Tanzania 🇹🇿
1. on "server.js" file, change "mongodb://localhost/urlShortener" to process.env.MONGO_URL || "mongodb://localhost/urlShortener"
2. in package.json create a "start" script with "node ./server.js"
3. create a free Heroku account
4. create a free Heroku app
5. add free MongoDB in "Resources" under your Heroku application settings
6. commit changes and deploy to Heroku (follow "Deploy" steps)
7. you're done, enjoy!
created a PR so you can see the changes and a nice "Deploy to Heroku button"
github.com/WebDevSimplified/url-shortener/pull/1
@@brunoalexandre2352 Thanks so much!
Nice tutorial! But there is a little problem that I got lost since 19:23 , the page didn't reflash and keep loading. Finally I googled a lot and I've solve the problem. I didn't install anything about MongoDB.
I got the same problem in another tutorial "How To Build A Markdown Blog Using Node.js, Express, And MongoDB
" few days ago. I guess this is the same problem: I didn't install MongoDB first.
Thanks. I get the same problem.
first you need to install mongo db on the project or in your computer?
you need to install mongod in your computer and run the db by writing mongod in the terminal
Bro you are so awesome I really like your videos, the explanation is so good and easy to understand. Keep Making Node.js and Mongo db videos.
Very clear!! Thank you Kyle!
Awesome Video !
Thank You very much !!
Nothing new to me, but I love your style of coding and explaining! That's why I'm watching all of your videos
This is nice, I Love this, we need more projects👍🏾
To the point and really amazing way of explaining stuff !
Thanks, I'm beginner in node.js, and this tutorial helped me a lot!
I personally like monk for connecting to mongodb because it is simpler than using schemas.
If anyone is not able to hide URL lable.
replace sr-only To visually-hidden
thank you!
You are a very good teacher :)👍🏻
Thank you very much, Kyle! Great video.
more backend please
coffee + 2 AM + no_sleep == website!
Great tutorial. Can you also show how to deploy it on AWS or GCP? Thank you :)
Excellent .
Nice one. It would be cool though, to show how to make this on a live web page!
Because i have no idea how i can transfer it to my live web page. Do i have to use MySQL then or what?...
I second this. I feel like process.env.PORT is always brought up but not really shown in production.
Checkout my Node.js fullstack tutorial for an explanation on how to deploy to a live site.
@@WebDevSimplified Hi. Me again. So i took on this project and i am getting an error at this step 19:27, when i click on shorten, nothing happens and the console in visual studio code shows "UnhandledPromiseRejectionWarning: MongooseServerSelectionError: connect ECONNREFUSED 127.0.0.1:27017"
I've googled it, and it seemed like it had to do with mongodb not being installed, so i've installed it but it still doesn't work. Do you have any idea what could cause this problem?
@@punch3n3ergy37 maybe if you open cmd and type "mongod" and then run, it might work.
Awesome content...learning so much. Thank you
You forgot to mention: you need mongodb-server too, because the npm package is just the client
Wow! Thanks!! I find it very informative. 😎
thankyou for this tutorial
great tutorial
I have one question about shortId: How is it guaranteed that the generated Id is unique everytime? Since it isnt based on the full url or on the database, Im kind of confused.
Apart from that: Thank You for all these great videos! I really like the way you're always starting from ground zero and taking things step by step from there. Keep doing what you're doing!
You're right, you should use the full URL to make those IDs, though the likeliness of a collision is very low.
A hashing function would be good.
try to check the shortid package from npmjs website.
The package described this "Can generate any number of ids without duplicates, even millions per day."
@Rob Hogan uniqueness just requires evaluation. you either have to do seeded randomness that is proven and checked to not collide until N reaches a certain number or alternatively id's have to be constrained with "unique" in database management systems to prevent insertion of doublettes.
all in all i see no point in blindly trusting code i didn't write myself. thus why i ended up here and even found this github issue.
in case of this url shortener it wouldn't be hard to just evaluate newly created id's for existence.
@@GottZ this is sad.. didn't use this package anyways xD
for those trying in 2024, as beginner i think it would be waste of time, after watching 19 mins, i have to drop this video. not upto dated
bootstarp 5 is will not work, give error, mongoDB connection not shown
Dude that was great, thanks a lot.
Please, can you HEROKU this, to make it full, from local to live.
we can learn from you in a simplified manner.
Really good video 10/10
Smooth AF....but the clicks only increment after I reload my page manually....is there any solution?
what about the mongodb db? should we create it or it created automateclly with the setup you did?
i used to use mongo atlas so i dont know how local db work.
Type mongo
type use yourdb
type show collections
db.collectionName.find()
If you don't have it installed, you'll have to install MongoDb on your local machine. Otherwise, using Atlas (free version) and using the available connection string will work just fine.
ty@@manofqwerty
Great tutorial I was able to created it and it works great. Next I have to add authentication. Do you have tutorials on that?
That is a useful project for beginners 😍
Kyle: redirects instantly
Everyone: H0w 2 ads? mE nEeDs M0n1
I didn't know the name attribute could be used to access specific input values on req.body.
Neat.
if you do a console.log(req.body) you would see that's just an object with params as that's how a form will post :)
Npm init -y is helpful to skip taps :)
Hi, This code working on local machine but when i put the code in live server its showing an error
how make it such that the shortened url is sharable ? or accessed from anywhere
Maybe its a dumb question, but where is the database stored? Or for example, with your other project "Mybrary" we needed to connect the Database to MongoDB Atlas, for Heroku to have a connection to a database.
In this project its all on localhost, could I just add this Code to my domain and it would work? What would I put in the mongoose function: mongoose.connect('URL')?
I couldn't get to work. Would start hanging after adding in await and async functions. Not sure if I installed Mongo correctly :(
Lesson starts at 1:25
if you get error just npm install shortid in terminal
THANKS UR BEST!!!!!!
A video about Deno?
When I give any url in input field all the time it is showing please enter the url although I have written correct code
thanks codebro
I love this tutorial but.... i guess its not working anymore.... I did follow the same steps exactly. and i faced few issues first was with Bootstrap where some of the classes been removed from the new bootstrap and then other functions is not working and it doesn't let me run the server anymore... I don't know if this is only me or everyone else have same issue
well I feel a little bit less stupid now, I given up trying to find out where my code was broken... it's like this is not the right implementation now
@@brianogas5245 same here bro LOL ... the thing is with mongoose there is some functionality has been changed with the new version. so if you want to follow up on the older version you need to install the mongoose same version as its in the tutorial.
BUT better thing is if Kyle make's an updated version video :D
I'm new here, and I also have the same problems with mongodb, I don’t know how to fix it :(
Bootstrap is probably on a new version hence Kyle mentions some deprecrated classes.
About the server not running: Not sure if you have the exact same issue as i had, but lots of people some to run into similar issues: make sure you have MongoDB (Community Edition) installed on your machine. Check out either one of following guides on how to do that:
www.mongodb.com/docs/guides/server/install/
www.mongodb.com/docs/manual/administration/install-community/
Maybe you already installed MongoDB but i'll mentoin it anyways since i was getting lost until i realized the obvious: that i had to install MongoDB on my computer first, haha
@@Max-mo9mf I had mongodb on my computer and even connected to it but was facing an issue "ShortUrl.find() not a function"
this i beautiful, kyle please how do we charging credit cards for each purchase that is made please please do a video on that
I have a project on Stripe you can checkout with this.
May I know how to add new page automatically to navigation bar using node js?
Awesome tutorial...loved it..bt i have one issue when i am clicking on shorturl to open in new page it can't open....??
hey, I am having the same issues. were you able to fix it?
Awesome video! Just a quick question. How does shortid.generate() know about all it’s previous generations if it does not know about the rest of the database. I understand it know about a history of a given sever session but what is the server stopped and started. Again amazing video! This is left me Curious.
A quick solution would be to check for that newly generated shorturl in the database before assigning it to any full url. That way we can make sure if that url is going duplicate we can generate a new one
you are amazing, thank you!
You used mongoose.connect() function without starting a mongo server. Is that possible?
When installing MongoDB, you can check the option "Install MongoD as a Service". That's what makes it possible.
@@StanislavZaburdaev Thanks 😁
Thanks for this amazing tutorial.
thank you
Great video Kyle. I try to follow it and run after I done. But I got this error "UnhandledPromiseRejectionWarning: MongooseServerSelectionError: connect ECONNREFUSED 127.0.0.1:27017". Do you or anyone have idea how to fix this and run code on localhost:5000?
Do you have mongo on your pc?
I think i had the same issue, make sure you have MongoDB (Community Edition) installed on your machine. Check out either one of following guides on how to do that:
www.mongodb.com/docs/guides/server/install/
www.mongodb.com/docs/manual/administration/install-community/
Maybe you already installed MongoDB but i'll mentoin it anyways since i was getting lost until i realized the obvious: that i had to install MongoDB on my computer first, haha
@@Max-mo9mf and replace the local host with that host no.
@@SatyamCodesss i believe that :27017 port is used for your database connection, so your localhost should be something different than that, for example :5000 or something else you prefer, as long it's not the same as your database port or another port that's already in use
I had an error... nodemon] starting `node server.js`
(node:38724) UnhandledPromiseRejectionWarning: MongooseServerSelectionError: connect ECONNREFUSED
Not sure if you have the exact same issue as i had, but make sure you have MongoDB (Community Edition) installed on your machine. Check out either one of following guides on how to do that:
www.mongodb.com/docs/guides/server/install/
www.mongodb.com/docs/manual/administration/install-community/
Maybe you already installed MongoDB but i'll mentoin it anyways since i was getting lost until i realized the obvious: that i had to install MongoDB on my computer first, haha
How to include meta tags when shortening url?
Fuck yeah, back-end stuff 👍
Thanks!
is this a production ready solution?
This can be done without MongoDb, node or express right?
Awesome! 👏 More projects like this, please
can i copy that short url and send it to someone and it works?
wow, amazing
Thanks
Though it's highly unlikely to get the same shortened URL for two different URLs, it is still possible.. so shouldn't you verify everytime that a shortened URL doesn't already exist in the database ?
sir, if we have to display shor url on server then we need to call ShortUrl.find() but an error show up on cmd that ShortUrl.find is not a function . please sir explain it
I have same error and cant fix
plz create a node js tutorial course
I have a question about is MEAN stack develpper a good choice to creat web app
I have a question, so can this url shortener IP log? if so, is there a way to not have it where anyone can manipulate to ip log?
excellent videos
If you have error message during the tutorial maybe it's because you haven't installed MongoDB. mongoose doesn't do it.
Kyle did a video about this :
ua-cam.com/video/wcx3f0eUiAw/v-deo.html
Hi Kyle, Thank you for such an informative video on url shortner. But while following your code, I found that "shortid" has now been deprecated. So I was trying to use nanoid instead, but require statement is not working for that. Could you please help me with the updated code and how I can use nanoid in this project? Any help would be much appreciated. Thanks!