I am currently making a url shortener site where I will be able to shorten links and then get the shortened URL and its unique id stored on the database. This(it isn't wholly ready) is where I have hosted it for testing. Now, when I try adding a slug to it, I get an issue that this does not exist.

enter image description here

I guess this can be done using the .htaccess file, but I have no idea how it works. The task for me could be easier if I specified the slug like mainUrl.com/abc or anything like that, but in my case, the slug can change to anything in this format:


Also, I have no idea about adding a dynamic slug.

Here is my code


function createShortUrl(longUrl, isLoggedIn) {
    const shortUrl = randomString(10);
    set(ref(db, "Urls/" + shortUrl), {
        actualUrl: document.getElementById("link-input").value,
        shortUrl: shortUrl,
        .then(() => {
            const view = document.getElementById("link-preview");
            document.getElementById("link-text-preview").textContent = longUrl;
            document.getElementById("shortened-link").textContent =
                "link.shortly.in/" + shortUrl;
            view.style.display = "flex";
        .catch((error) => {
                "Link could not be created due to some issues on our side. Please try again or if it does not work, try again later"
            console.log("Fail: " + error);

function randomString(length) {
    var letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"
    var rString = "";
    var i = 0;
    while (i < length) {
        var letterIndex = Math.floor(Math.random() * letters.length);
        var letter = letters.charAt(letterIndex);
        rString = rString + letter;
    return rString;

and the other one which looks for links and the decides which page to be shown, the main page or the redirecting page.


const showUrlView = document.getElementById("link-opener");
const mainView = document.getElementById("mainContainer");
const lastUrlSegment = currentUrl.split("/")[currentUrl.split("/").length - 1];
console.log(`Last segment ${lastUrlSegment}`);

const firebaseConfig = {
    apiKey: "AIzaSyCqhOLwA2VJXJNPSmXq7Bfp3lnpMEksljw",
    authDomain: "shorty-eea1d.firebaseapp.com",
    projectId: "shorty-eea1d",
    storageBucket: "shorty-eea1d.appspot.com",
    messagingSenderId: "379580693572",
    appId: "1:379580693572:web:8fa99035bc12cfe03e9011",
const db = getDatabase();


const dbref = ref(db);
if (lastUrlSegment == "") {
    mainView.style.display = "block";
} else {
    get(child(dbref, "Urls/" + lastUrlSegment)).then((snapshot) => {
        if (snapshot.exists()) {
            showUrlView.style.display = "block";
        } else {
            mainView.style.display = "block";

also, here is the main body of my HTML so it becomes easy

enter image description here

  • This is being closed because it appears you already answered this on Stack Overflow here. In the future, please only post questions to one Stack Exchange site. If you'd like to have it migrated to another site, then you can flag it to ask a moderator to migrate it for you.
    – dan
    Aug 6, 2022 at 20:29


Browse other questions tagged or ask your own question.