How To Build A URL Shortener With Node.js, Express, and MongoDB

[@abdullahirfan3078]

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

[@SilvaOnTube]

Maybe 2 years ago, but not now.

[@abdullahirfan3078]

@@SilvaOnTubeI have commented 2 years ago😉

[@SilvaOnTube]

@@abdullahirfan3078 I know, that is exactly my point.

[@bruvhellnah]

@@SilvaOnTube Still a great tutorial by today's standard what are you talking about bruh

[@glorysinkhonde197]

For those doing the tutorial in 2022, "sr-only" has been replaced with "visually-hidden" in bootstrap

[@RajeshSays]

Thanks. Can you also help how to use nanoid in place of shortid (as it is depreciated). Thanks

[@dmusic9465]

What about table-responsive

[@glorysinkhonde197]

@@dmusic9465 Don't know, try googling it, that's how I found out when it didn't work

[@RiversDelay]

if you run npm init -y it fills in the defaults automatically, no need to press enter a bunch of times

[@lovishdhingra801]

Thanks for the knowledge

[@EnesKab]

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 !

[@SilvaOnTube]

Not when dependencies deprecate and there is no help getting around that.

[@frankorefice4115]

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.

[@WebDevSimplified]

Nice. That sounds like a fun project.

[@mobileeats-q2i]

@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!

[@ananyagouda8200]

hey, about this, my mongodb connection is failing. could you give some more insight

[@timstongaming]

Yes same

[@mohammedsayeed330]

The Way he writes code..its beautiful 😊 to watch

[@robertreinhold1036]

he is also very beautiful guy

[@roku1892]

the best programming channel on youtube that i found 👍❤️

[@bafana_mhlamvu]

A YEAR OF FREE HOSTING?!?!?! NANI!?!

[@kdkchy]

the tutorial is so smooth (y)

[@kk10-]

Dude, This was so amazing!!! Made my day!

[@threeone6012]

Thanks Kyle for another ★★★★★ upload! *Video Request:* Error handling and logging with Express.

[@JohnWeland]

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.

[@code_mint_yt]

kzbin.info/www/bejne/nZ7MdainipiUrKc

[@shawnlee5956]

thanks for the free teaching video for those who have financial kids to bring up their future dreams.

[@VishalYadav-gk1kg]

Very Nice explanation sir, Thank you!

[@onyekaogbusuo3157]

I don't know what to say... You guys save lives... I'm so emotional, thanks for all you do for the community kyle

[@fndfernandu]

This video is awesome! I'm learning so much with you!

[@mverma7845]

Thanks Kyle, new to development I enjoyed this.

[@robertbornschein5583]

Just wanted to let you know, I voted for a backend project on your poll, so psyched for this👌🏼👌🏼👌🏼

[@WebDevSimplified]

Nice! I plan to make more backend tutorials like this in the future.

[@robertbornschein5583]

@@WebDevSimplified Maybe do an extended video on fetch or http request in general, talking about how to handle basic authorization, etc.

[@saiyedali561]

Easy , clear , modern tools . amazing !

[@jeremyopriasa9961]

Very clear!! Thank you Kyle!

[@kennyakins3536]

This is nice, I Love this, we need more projects👍🏾

[@rootdev8106]

Nothing new to me, but I love your style of coding and explaining! That's why I'm watching all of your videos

[@SoundsOfAum]

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.

[@eddyelamin9015]

can't get clearer than that great project

[@prabaljainn]

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.

[@sonoftroy8572]

Wow pretty cool man! I’m still working on my MVC PHP OOP MYSQL DATABASE, just grinding and learning the process

[@pritishmaheta9435]

To the point and really amazing way of explaining stuff !

[@_timestamp]

You are a very good teacher :)👍🏻

[@prajalbadjatya]

Awesome Video ! Thank You very much !!

[@LinkChenTW]

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.

[@csablons]

Thanks. I get the same problem.

[@JuandeLellis]

first you need to install mongo db on the project or in your computer?

[@ahmadmuslih]

you need to install mongod in your computer and run the db by writing mongod in the terminal

[@tacowilco7515]

Thank you very much, Kyle! Great video.

[@raymondmichael4987]

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 🇹🇿

[@brunoalexandre2352]

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

[@alvinqingxing]

@@brunoalexandre2352 Thanks so much!

[@bishopshawiii7292]

Awesome content...learning so much. Thank you

[@veronicarivera1352]

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.

[@ncscorp3538]

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.

[@DameDiabolique]

@@ncscorp3538 Thanks for sharing this with us.

[@asafhagbi3638]

Wow! Thanks!! I find it very informative. 😎

[@143_nimit6]

If anyone is not able to hide URL lable. replace sr-only To visually-hidden

[@sinxenon3181]

thank you!

[@usama57926]

great tutorial

[@GauravKumar-ue7nz]

If you could add a Short Introduction or Functioning of how final project will look, That will be a huge plus point @Kyle

[@Norfeldt]

Fantastic tutorial! Absolutely loved it! Any chance of a follow-up where you teach us how to deploy it?

[@SilvaOnTube]

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.

[@matrikater]

coffee + 2 AM + no_sleep == website!

[@rebarius]

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 💙

[@rebarius]

getmdl.io/

[@Dracolmao_]

Kyle: redirects instantly Everyone: H0w 2 ads? mE nEeDs M0n1

[@andres98]

Really good video 10/10

[@Sksahu_123]

more backend please

[@CodePhilipYT]

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')?

[@aadishjain8827]

thankyou for this tutorial

[@mehdismaeili3743]

Excellent .

[@lexasusopra8704]

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.

[@dibashthapa4773]

Type mongo type use yourdb type show collections db.collectionName.find()

[@manofqwerty]

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.

[@lexasusopra8704]

ty@@manofqwerty

[@pranjaldoorwar9743]

That is a useful project for beginners 😍

[@rebarius]

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 }

[@WebDevSimplified]

Good point

[@punch3n3ergy37]

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?...

[@JoshChagani]

I second this. I feel like process.env.PORT is always brought up but not really shown in production.

[@WebDevSimplified]

Checkout my Node.js fullstack tutorial for an explanation on how to deploy to a live site.

[@punch3n3ergy37]

@@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?

[@alekyakowta7122]

@@punch3n3ergy37 maybe if you open cmd and type "mongod" and then run, it might work.

[@akashshrivastav1518]

how make it such that the shortened url is sharable ? or accessed from anywhere

[@NickDavies100]

I couldn't get to work. Would start hanging after adding in await and async functions. Not sure if I installed Mongo correctly :(

[@Richard_Schmidt]

Great tutorial. Can you also show how to deploy it on AWS or GCP? Thank you :)

[@stephenfunmishoadegbola2888]

Thanks a lot for this. Please is anyone getting the error MongooseServerSelectionError it references to the line: mongoose.connect(...) Kindly help

[@ushaadiga8889]

It's because you haven't started mongo db server in background

[@Max-mo9mf]

As the guy before me already mentoins, it's probably related to the absence of MongoDB. 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

[@AgustinAstronomy]

you are amazing, thank you!

[@user-ev2pl8ey2r]

Thanks, I'm beginner in node.js, and this tutorial helped me a lot!

[@jakubdornicak9125]

THANKS UR BEST!!!!!!

[@callmejd9665]

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!

[@devilmanscott]

You're right, you should use the full URL to make those IDs, though the likeliness of a collision is very low.

[@t_kon]

A hashing function would be good.

[@KenKoyVlogs]

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."

[@GottZ]

​@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.

[@KenKoyVlogs]

@@GottZ this is sad.. didn't use this package anyways xD

[@erlendryan]

Fuck yeah, back-end stuff 👍

[@raulramirezalvarado1900]

when piewdiepie does coding

[@englesh]

Raúl Ramírez Alvarado pewdiepie looks more like an orange than this man

[@Kawanyahenri]

You read my mind xD

[@gradientO]

A video about Deno?

[@LexterCarlAlmirol]

How to include meta tags when shortening url?

[@vallimayilm2964]

Hi, This code working on local machine but when i put the code in live server its showing an error

[@ishan7824]

Thanks for this amazing tutorial.

[@ygi6106]

thanks codebro

[@africanchina1]

Lesson starts at 1:25

[@wesson818]

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?

[@bilalkureshi7437]

Do you have mongo on your pc?

[@Max-mo9mf]

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]

@@Max-mo9mf and replace the local host with that host no.

[@Max-mo9mf]

@@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

[@syedfurqaniqbal1592]

When I give any url in input field all the time it is showing please enter the url although I have written correct code

[@TheOPtmal]

You forgot to mention: you need mongodb-server too, because the npm package is just the client

[@logantheyoyoman]

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.

[@HassanMehdi98]

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

[@TheoParis]

I personally like monk for connecting to mongodb because it is simpler than using schemas.

[@juancarlosnunez9388]

Awesome! 👏 More projects like this, please

[@abdulhamidkhorajiya2256]

excellent videos

[@bhavyasura]

Smooth AF....but the clicks only increment after I reload my page manually....is there any solution?

[@pratiknalawade3267]

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.

[@snehikareddykunta8995]

May I know how to add new page automatically to navigation bar using node js?

[@davidjunghan91]

Thanks!

[@sohanbafna2282]

Nice work. Really liked it. URL shrinker simplified 😀

[@WebDevSimplified]

Thanks! I'm glad you liked it.

[@BlackberryBoy]

Great tutorial I was able to created it and it works great. Next I have to add authentication. Do you have tutorials on that?

[@khotambakhromov]

wow, amazing

[@DragonStoneCreations]

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 ?

[@kmgulsaba2361]

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

[@harveyinmotionn]

I have same error and cant fix

[@minstreet_studio6265]

this i beautiful, kyle please how do we charging credit cards for each purchase that is made please please do a video on that

[@WebDevSimplified]

I have a project on Stripe you can checkout with this.

[@sametpalitci1273]

thank you

[@abhilashkokkonda1713]

is this a production ready solution?

[@SilvaOnTube]

at 14:19 on restarting nodemon, got useNewUrlParser deprecated & also useUnifiedTopology & mongodb crashes.

[@ridhankumar474]

same error for me aswell

[@YTSprocx]

I had an error... nodemon] starting `node server.js` (node:38724) UnhandledPromiseRejectionWarning: MongooseServerSelectionError: connect ECONNREFUSED

[@Max-mo9mf]

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

[@DarbazDara]

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]

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

[@DarbazDara]

@@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

[@LiftTrue]

I'm new here, and I also have the same problems with mongodb, I don’t know how to fix it :(

[@Max-mo9mf]

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

[@richardisrael9552]

@@Max-mo9mf I had mongodb on my computer and even connected to it but was facing an issue "ShortUrl.find() not a function"

[@acine4594]

I have a question about is MEAN stack develpper a good choice to creat web app

[@nileshinkane6034]

You used mongoose.connect() function without starting a mongo server. Is that possible?

[@StanislavZaburdaev]

When installing MongoDB, you can check the option "Install MongoD as a Service". That's what makes it possible.

[@nileshinkane6034]

@@StanislavZaburdaev Thanks 😁

[@Samuels691]

Npm init -y is helpful to skip taps :)

[@d3_xd900]

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?

[@kevinorlando4932]

can i copy that short url and send it to someone and it works?

[@csablons]

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 : kzbin.info/www/bejne/rZTbZJlmmrqcd9k

[@RajeshSays]

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!

[@danastudebaker6480]

how then do we host on a paid domain,? should we open port 5000 for the server we gonna use like centos or ubuntu?

[@mrm8940]

Superb

[@SofiaGoyal]

I think someone can play a drinking game everytime he says OOPS... 😬 😆