how to construct an array on server that is passed to client as part of a script.JS file

I’m trying to build a small single page web application. the application has the basic index.html script.JS and style.CSS files. The body element (in index.html) sets up a button and an empty section element. the script populates the section element with the first of two lists. currently the script includes the lists in array objects like the following:

let list_1 = [ 'a', 'b', 'c']
let list_2 = [ 'd', 'e', 'f']

canBtn.innerText = "CAN'T"
tagLine.innerText = 'I can still ...'
list_1.forEach(el => {
    const div = document.createElement('div')
    div.innerText = el
    document.querySelector('.text-container').appendChild(div)

initially, the client renders the first list. After that, when the user clicks the button, the script switches to show the second list. the button can be used to toggle between the lists.

what I want to do is build each list by reading a corresponding file. Something like:

const fileContent = fs.readFileSync(filePath, 'utf-8');
const lines = fileContent.split('n');

this should create the array I’m looking for, but how do I include this in the script.JS file sent to the client?

Or is there a better way to accomplish what I’m trying to do? I only started learning JavaScript last month and node.JS a week ago so I am pretty new to this.

I’ve tried using node and EJS templates. I was expecting, well at least hoping, to have the server read the files each time the pages is requested