Firebase for Web Issues – Blancer.com Tutorials and projects

I’m building a web app to store and retrieve data from the firebase database, they recently changed the way I’d do this and I’m having trouble figuring it out.
My file setup is as follows:

project-folder/
|-- index.html
|-- assets/
    |-- js/
        |-- setup.js

My HTML file is:

<!DOCTYPE html>
<html>
<head>
    <title>Firebase Integration</title>
</head>
<body> 
    <script type="module">
        // Import the functions you need from the SDKs you want to use
        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.5.2/firebase-app.js";
        import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/10.5.2/firebase-database.js";
        import { getAuth } from "https://www.gstatic.com/firebasejs/10.5.2/firebase-auth.js";
        
        // Your web app's Firebase configuration
        const firebaseConfig = {
            apiKey: "stuff",
            authDomain: "stuff",
            databaseURL: "stuff",
            projectId: "stuff",
            storageBucket: "stuff",
            messagingSenderId: "stuff",
            appId: "stuff"
        };
        
        // Initialize Firebase
        const app = initializeApp(firebaseConfig);
        const db = getDatabase();

        function writeData(url, data) {
            const reference = ref(db, url);
            set(reference, data);
        }
    </script>

    <script src="assets/js/setup.js"></script> <!-- Corrected the path separator -->

</body>
</html>

The firebase functions work as long as they are used in the script in the HTML file. However, I’ve written the code that runs the web app in setup.js, When I attempt to use the writeData() function in setup.js I get a CROSS Origin error. I’m totally lost on how to structure this, I really prefer not to need to write all the code for the web app in the HTML file.