@fionas76543059, it looks like you are going in the right direction.
For the Front-end Application, as you said, you can create a new page component (for a new template) OR edit the basePage cq:Component to include the <div id="root">. Next, ensure your client library is loading the JavaScript right before the </body> tag.
You can also create a new component to render an HTML element with an id-identifier, example: <div id="micro-app">, so your JavaScript will execute as expected. Next, ensure your client library is loading the JavaScript right before the </body> tag.
The "aem-clientlib-generator" npm plugin is a preferred way to generate AEM client libraries from custom front-end applications. Make sure you upload and install the client library to a your running development AEM environment. Next, check if the client library is installed propery. If your front-end application is coupled with your AEM maven project code, then you can utilise the 'maven front-end plugin' to automatically run npm build commands, and also maven build commands when your maven project is being built; check out this example.