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

🚨 IMPORTANT:
1 Year Free Hosting: www.atlantic.net/webdevsimpli...
Use code KYLE for an additional $50
I finally did another backend video. In this video we will be covering every step needed in order to build a url shortener fro scratch. We will do this using Node.js, Express, and MongoDB. I really hope you enjoy this video, and if you want more backend videos like this let me know in the comments.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/u...
How To Install Node.js: • Your First Node.js Web...
Async/Await Tutorial: • JavaScript Async Await
🧠 Concepts Covered:
- How to setup an express server
- How to use MongoDB with express
- The best way to create dynamic routes
- Using mongoose with express
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#UrlShortener #WDS #Nodejs

[@kennyakins3536]

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

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

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

[@saiyedali561]

Easy , clear , modern tools . amazing !

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

[@pritishmaheta9435]

To the point and really amazing way of explaining stuff !

[@kk10-]

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

[@fndfernandu]

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

[@mverma7845]

Thanks Kyle, new to development I enjoyed this.

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

[@jeremyopriasa9961]

Very clear!! Thank you Kyle!

[@roku1892]

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

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

[@sonoftroy8572]

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

[@kdkchy]

the tutorial is so smooth (y)

[@tacowilco7515]

Thank you very much, Kyle! Great video.

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

[@oynxmedia]

kzbin.info/www/bejne/nZ7MdainipiUrKc

[@bishopshawiii7292]

Awesome content...learning so much. Thank you

[@asafhagbi3638]

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

[@majjikishore8689]

really enjoyed,thanks for such wonder-full video.

[@threeone6012]

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

[@shawnlee5956]

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

[@prajalbadjatya]

Awesome Video ! Thank You very much !!

[@mohammedsayeed330]

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

[@robertreinhold1036]

he is also very beautiful guy

[@_timestamp]

You are a very good teacher :)👍🏻

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

[@bafana_mhlamvu]

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

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

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

[@rootdev8106]

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

[@pranjaldoorwar9743]

That is a useful project for beginners 😍

[@VishalYadav-gk1kg]

Very Nice explanation sir, Thank you!

[@AgustinAstronomy]

you are amazing, thank you!

[@eddyelamin9015]

can't get clearer than that great project

[@aadishjain8827]

thankyou for this tutorial

[@Abhishekn._]

thanks for the 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

[@usama57926]

great tutorial

[@mygodThatsmyShit]

clear walkthrough from 0 to 1. Cannot leave it without a comment. Thx man

[@andres98]

Really good video 10/10

[@davidjunghan91]

Thanks!

[@jakubdornicak9125]

THANKS UR BEST!!!!!!

[@khotambakhromov]

wow, amazing

[@user-ev2pl8ey2r]

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

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

[@vuestacks]

@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

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

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

[@akashshrivastav1518]

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

[@abdulhamidkhorajiya2256]

excellent videos

[@juancarlosnunez9388]

Awesome! 👏 More projects like this, please

[@ygi6106]

thanks codebro

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

[@sametpalitci1273]

thank you

[@mrm8940]

Superb

[@monireol]

Thanks

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

[@suryacheruvu4002]

Is it possible to run the program afresh? Because when I rerun the program or run it after restarting the pc, I can still see the URLs shortened in the previous run?

[@sm1ley732]

thanks

[@erlendryan]

Fuck yeah, back-end stuff 👍

[@vallimayilm2964]

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

[@Dracolmao_]

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

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

[@NickDavies100]

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

[@kunalarora1824]

I tried building this but if I enter the same url again it unfortunately keeps on adding it in the database and the table. I was just thinking if it could match in the database and could return the shorten url if it already exists

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

[@Richard_Schmidt]

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

[@BeattapeFactory]

u are amazing

[@143_nimit6]

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

[@sinxenon3181]

thank you!

[@Sksahu_123]

more backend please

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

[@HarveyTriathlon98]

I have same error and cant fix

[@TheoParis]

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

[@snehikareddykunta8995]

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

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

[@acine4594]

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

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

[@shoainkhan7377]

what a great explanation skills you have. The vedio was amazing it helped me in understanding and making this project. Thanks Once Again

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

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

[@tajamulhusen6051]

Great Video kyle, i have one question which template engine would u recommend for beginners, like maybe easy to work with?

[@WebDevSimplified]

EJS since it is the most like HTML.

[@twi4458]

I learnt PUG😎 after i got to know about ejs!

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

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

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

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

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

[@Samuels691]

Npm init -y is helpful to skip taps :)

[@kevinorlando4932]

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

[@ishan7824]

Thanks for this amazing tutorial.

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

[@abhilashkokkonda1713]

is this a production ready solution?

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

[@satpreetsingh2162]

Is it working even now? Facing multiple issues with shortid and mongoose both are not working at this time perfectly . Even when i moved back to the previous version too

[@user-ni4ln8ps2n]

How to include meta tags when shortening url?

[@VikasSingh-jm3ih]

I am getting reference error in line

[@matrikater]

coffee + 2 AM + no_sleep == website!

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

[@554_tycs_jay8]

Can u please help me out i'am always getting an error [nodemon] app crashed -wating for file changes before starting...

[@poojamandal2755]

After npm i express mongoose ejs command my node_modules and package-lock.json doesn't install. Can anyone help?

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

[@bhavyasura]

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