I need help with my fullstack architecture for link shortener.

1. put a middleware that checks if the request is for any of the static pages /blog /about /pricing etc. if yes, dispatch the req to the static source.
2. if not, dispatch the request to the url resolver server.
3. if number 2 fails, dispatch the request to the static source for 404

The coding garden on youtube has 2 full streams about that I think, one of them is using Heroku. hope it helps

https://www.youtube.com/watch?v=szWlL4wlo6E
https://www.youtube.com/watch?v=gq5yubc1u18

Hi Justin,

Not exactly matching your current stack but:

1. Store hash => URL in DynamoDB
2. Host your static pages on Cloudfront
3. Have Cloudfront trigger a Lambda@Edge on :slug, which would check DynamoDB and return the redirect (and other logic if you have that)

And that's about it? That can also be mapped to other providers.

Hi @Harrjm!

To do what you want to do, here's what I'd advice (similar to what some folks already mentioned):

1. Handle all the routes you own or care about first (eg example.com, example.com/blog/*)

2. Handle everything else as though it was a short url (eg example.com/:slug)

However there are issues with this:

1. If I were to type example.com/bloog (a typo), that could possibly route me to someone else's short URL

2. Can you possibly know all paths you will need in the future? Remember these short urls could be permalinked somewhere else (eg Google). What if I take a short url at example.com/teams this means you can never ever take that path for your internal use cases

I suspect this is a similar reason why Github booted everybodys pages off the github.com domain and moved them to github.io

You can definitely special case all the routes you need, and also blacklist any paths you feel you may need in the future (eg /teams, /careers, /policy etc).

This can work, but for my use cases I just save myself all that trouble and use a separate domain. I am not comfortable with all the magical problems that could be waiting for me in the future. So I just have my site/app/api hosted at example.com, but shortlinks are hosted at example.io/:slug or examplelinks.com/:slug
This way, the only collisions will be between different people's shortlinks 👍🏾

Hope that helps!

bitly uses bitly.com for it's website and bit.ly for shortening.
I think it's better if you don't mix both!

Where are you hosting your project? If you're on AWS (and even if you're not), using Amazon CloudFront as a CDN is super cheap (will be free for most startups), and makes it really easy to create path based behaviours.

The easiest way is to combine your front-end and backend API to be served by the same Express server. IMO, if you're just getting started, trying to split up your API and front-end functionality is a bit of a premature optimization; starting with a monolith isn't a bad thing.

Since Express would be handling all of your traffic, all you have to do is define your "wildcard" url route as the very last thing and you're good to go. All of the /blog, /docs, etc would take precedence since you've defined them directly. You could even still host your static site assets through a CDN and have your server just serve up the equivalent of an "index.html" file. The other benefit of doing things this way is the flexibility of having that active server for your front-end; server-side rendering is now a few bits of configuration away if you want it.

Alternatively, if you were to put your site or the shortened URLs on a different domain/subdomain, you can pretty much avoid this all together.