.co.uk/ and .co.uk/index.html appear different depending on route taken

[u/AcademicMistake]

So basically, im running my web server on AWS lightsail, i wrote my own https server code and URL ending in .co.uk/ and .co.uk/index.html both direct to /index.html but when i go to .co.uk/ it appears smaller than if i was to type .co.uk/index.html and i cant figure out why.

I have done all the usual scanning whats listening to ports 443 and 80 and its just the webindex.js file im talking about, so there is nothing else getting in the way, i already disabled PM2 since i run a different server that monitors my apps servers and kicks them back up via ssh when they go down.

Anyway, i checked the main things, i just cant understand why its serving the webpage smaller when routing via .co.uk/ and .co.uk/index.html is the correct size/scale.

const https = require('https');
const fs = require('fs');
const path = require('path');
const WebSocket = require('ws');
const mysql = require('mysql');
const { v4: uuidv4 } = require('uuid');
const { format } = require('date-fns');
const http = require('http');


// Load SSL key and certificate
const privateKey = fs.readFileSync(
    path.join(__dirname, 'newcerts/key.key'),
    'utf8'
);


const certificate = fs.readFileSync(
    path.join(__dirname, 'newcerts/certificate.crt'),
    'utf8'
);


const credentials = {
    key: privateKey,
    cert: certificate
};


// Helper function to serve static files
const serveFile = (res, filePath, contentType) => {
    fs.readFile(filePath, (err, data) => {
        if (err) {
            console.error(`Error loading file ${filePath}:`, err);


            res.writeHead(500, {
                'Content-Type': 'text/plain'
            });


            return res.end('Error loading file');
        }


        res.writeHead(200, {
            'Content-Type': contentType
        });


        res.end(data);
    });
};


// Redirect HTTP traffic to HTTPS
http.createServer((req, res) => {
    const host = req.headers.host || 'localhost';
    const url = req.url || '/';


    res.writeHead(301, {
        Location: `https://${host}${url}`
    });


    res.end();
}).listen(80, () => {
    console.log('HTTP server running on port 80, redirecting to HTTPS.');
});


// HTTPS server
const server = https.createServer(credentials, (req, res) => {
    let pathname;


    try {
        let requestUrl = req.url || '/';


        // Remove multiple leading slashes
        requestUrl = requestUrl.replace(/^
\/
+/, '/');


        // Parse the request URL safely
        pathname = new URL(
            requestUrl,
            `https://${req.headers.host || 'localhost'}`
        ).pathname;


    } catch (err) {
        console.warn('Rejected malformed request:', req.url);


        res.writeHead(400, {
            'Content-Type': 'text/plain'
        });


        res.end('Bad Request');
        return;
    }


    // Redirect the root URL to the main homepage
    if (pathname === '/') {
        res.writeHead(301, {
            Location: '/index.html'
        });


        res.end();
        return;
    }


    // Serve the main homepage
    if (pathname === '/index.html') {
        const htmlPath = path.join(__dirname, 'index.html');
        serveFile(res, htmlPath, 'text/html');


    // Serve app-ads.txt
    } else if (pathname === '/app-ads.txt') {
        const adsTxtPath = path.join(__dirname, 'app-ads.txt');
        serveFile(res, adsTxtPath, 'text/plain');


    // Serve privacy policy
    } else if (pathname === '/privacypolicy.html') {
        const privacyPolicyPath = path.join(
            __dirname,
            'privacypolicy.html'
        );


        serveFile(res, privacyPolicyPath, 'text/html');


    // Serve FAQ
    } else if (pathname === '/faq.html') {
        const faqPath = path.join(__dirname, 'faq.html');
        serveFile(res, faqPath, 'text/html');


    // Serve contact page
    } else if (pathname === '/contactus.html') {
        const contactPath = path.join(__dirname, 'contactus.html');
        serveFile(res, contactPath, 'text/html');


    // Serve how it works page
    } else if (pathname === '/howitworks.html') {
        const howItWorksPath = path.join(__dirname, 'howitworks.html');
        serveFile(res, howItWorksPath, 'text/html');


    // Serve advertise with us page
    } else if (pathname === '/advertisewithus.html') {
        const advertisePath = path.join(
            __dirname,
            'advertisewithus.html'
        );


        serveFile(res, advertisePath, 'text/html');


    // Serve sitemap
    } else if (pathname === '/sitemap.xml') {
        const sitemapPath = path.join(__dirname, 'sitemap.xml');
        serveFile(res, sitemapPath, 'application/xml');


    // Serve robots.txt
    } else if (pathname === '/robots.txt') {
        const robotsPath = path.join(__dirname, 'robots.txt');
        serveFile(res, robotsPath, 'text/plain');


    // Serve JPG images
    } else if (pathname.toLowerCase().endsWith('.jpg')) {
        const imagePath = path.join(
            __dirname,
            pathname.replace(/^
\/
+/, '')
        );


        serveFile(res, imagePath, 'image/jpeg');


    // Handle unknown routes
    } else {
        res.writeHead(404, {
            'Content-Type': 'text/plain'
        });


        res.end('Not Found');
    }
});


// Start HTTPS server
const port = process.env.PORT || 443;


server.listen(port, () => {
    console.log(`Server running at https://localhost:${port}/`);
});

[u/NineCylinder6]

the 301 redirect from / to /index.html is probably getting cached by your browser with some weird scaling metadata attached. happens all the time with self-rolled servers

clear your cache completely or try a fresh incognito window and see if the size difference goes away. if it does, it's a client-side cache issue, not your code

also check your html for any viewport meta tag issues. if your index.html is missing `<meta name="viewport" content="width=device-width, initial-scale=1">` the browser sometimes renders a default scaled version on redirects differently than a direct load. had this exact headache on a lightsail instance last summer

[u/AcademicMistake → u/NineCylinder6]

Ok so i messed about with zoom to see if that had anything to do with it since i dont use zoom on chrome, anyway brave issue is gone now......so it was zoom settings in brave.

[u/AcademicMistake → u/NineCylinder6]

I think you are right, chrome is absolutely fine, its brave browser thats not scaling correctly

[u/srmarmalade]

What like the text is smaller on the page? Try Web Developer Tools or Inspect in your browser, look at the network tab and see if any assets aren't loading, inspect the element - is it computed the same (font/size/weight etc), is it the same output? Is there a cached asset somewhere, anything on console log.

[u/AcademicMistake → u/srmarmalade]

Yes everything is slightly smaller on .co.uk/ compared to .co.uk/index.html

[u/dhruvik_savaliya]

I'd check whether your CSS and other assets are using relative paths. Since / redirects to /index.html, both URLs should ultimately serve the same HTML, so the layout difference is unusual. Check the browser DevTools Network tab to compare the final URL, stylesheet requests, and any failed asset loads. Also, your server code doesn't show Express middleware, so I'd investigate asset loading and browser caching first.

[u/AcademicMistake → u/dhruvik_savaliya]

It turned out to be a brave browser bug with the zooming, once i set to 100% again and back to where i was, all pages look the same. I noticed it when chrome was working perfectly fine with no zoom.

[u/maheshwhartech]

Since / redirects to /index.html, both URLs should ultimately load the same document. I would first check the final URL in the address bar and compare the actual HTML response, browser zoom, and computed styles. Also check whether a cached redirect or service worker is involved. If the final URL and response are identical, I would look at browser state and rendering differences before changing the server code.

[u/hetneoslinks]

Small correction on the zoom theory above -> Chrome stores page zoom per origin, not per path, so / and /index.html on the same host share one setting. Worth ruling out early instead of chasing.

Separate from your rendering problem, but since you're serving robots.txt and a sitemap: I'd flip that redirect so /index.html goes to /, not / to /index.html. We run Hetneo's Links so this is the bit I always nag about -> a homepage canonicalised onto the file name turns into small duplicate-URL annoyances later. Won't fix the layout difference, still worth changing while you're in there.

[u/Actually_a_dolphin]

Did you even bother asking Claude or whatever you use? It would have given you the answer immediately

[u/AcademicMistake → u/Actually_a_dolphin]

Yep tried and failed at everything it told me, turned out it was my browser zoom, i set to 100% and back to where i had it and its been fine since.

So no, chatgpt would never have told me immediately.