How to use VSC's Live Server extension when using a ./src, ./build and ./public folder?

Question

I've recently learned how to structure my projects.

I'm using Typescript and have understood a best practice is to use ./src as an input directory, ./build as an output directory when compiling my code. I have my static assets like index.html and images in ./public and have a script in package.json which copies the contents of the ./public folder into the ./build folder so that everything's accessible there.

The problem I'm running into is that as I'm working on HTML and CSS files in the ./public folder, I have no way of previewing the changes in real-time. Either I run Visual Studio Code's Live Preview on ./public/index.html and then it doesn't have access to the /scripts/ folder with my Javascript, or I run it on ./build/index.html but then I don't see my changes unless I rebuild the site (using my npm run build command).

What's the best practice for editing while retaining real-time preview with a local server? Thanks!

My tree is as follows:

❯ tree --gitignore
.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── assets
│   ├── index.html
│   └── styles
│       └── style.css
├── src
│   └── scripts
│       └── index.ts
└── tsconfig.json

6 directories, 7 files

package.json:

{
    "name": "jl_weather_app",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "tsc --noEmit",
        "prebuild": "rm -rf ./build/*",
        "build": "tsc && ncp ./public/ ./build/",
        "dev": "tsc-watch --onSuccess \"node ./build/scripts/index.js\""
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "ncp": "^2.0.0",
        "prettier": "^3.0.3",
        "tsc-watch": "^6.0.4",
        "typescript": "^5.2.2"
    }
}

launch.json:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

    // Great suggestions on how to set this up in this tutorial: https://www.youtube.com/watch?v=JdvkaW2xeiI
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug Typescript",
            "preLaunchTask": "npm: build",
            "skipFiles": ["<node_internals>/**"],
            "program": "${workspaceFolder}/build/scripts/index.js",
            "outFiles": ["${workspaceFolder}/build/**/*.js"]
        }
    ]
}