Minimalistic URL Shortener with JavaScript - Deployment with Heroku and Netlify
This is the lasi video in the series to build a URL Shortener using vanilla JavaScript, HTML, and CSS for the frontend. NodeJS and Express, and MongoDB for the backend and finally Heroku and Netlify as hosting platforms to deploy the web app.
I am going to fix the small bug I left last week, in my API when creating a new record, I wasn't checking whether the new slug was unique, and even though it was not enforced by MongoDB, a non-unique slug might point to 2 different URLs. That means that redirection might fail sometimes, I don't want that to happen so I want to make sure that the new slug is always unique.
Then, I code the JavaScript on the frontend, using the fetch API I make AJAX calls to my backend that will shorten the URL and give me back the processed version, and I will display it right there and then on the webpage, dynamically.
Last step is deploying the app: install homebrew, if you own a mac, install git and heroku so that you can access them via the terminal. Now go to github and create 2 repositories, one for the frontend one for the backend.
Then git init both and add the remote repo. In the case of the server, heroku can be set via the command line usign the heroku create command, this will create the repo and stage all our files to be built, one last command gi push heroku main starts the build and generate a random https address. There the API works, everything is smooth as silk. Don't forget to set the environment variables.
Netlify is even more straight forward, you create a commit in the dashboard of the website, and select the github repo netlify has to deploy, and watch. Run the command and in a few seconds the app has an address, and you can visit it. Not only that, but since it is watching your github repo, every change to that will trigger a new build and the website will be updated almost instantly. How cool is that?
After all this, the app is on the web, we can test and play with it. It works and we can shorten our URLs good job!
This was the last episode of this project, but follow me and subscribe for more challenging and interesting projects.
I see you soon,
BeGeos
Social:
Twitter: / begeosdev
GitHub: https://github.com/BeGeos
Timestamps:
00:00:00 URLs Shortener with JavaScript
00:00:58 Fixing the Bug
00:04:10 Frontend JavaScript
00:24:30 Testing backend && frontend
00:29:38 Deployment steps
00:34:07 Deploy Frontend to Netlify and GitHub
00:43:13 Deploy Backend with Heroku and GitHub
00:54:45 Real-life Test
00:56:40 Restrict CORS origin
01:00:45 Final Remarks
