Front end integration with FastAPI back end

I am trying to design a simple website that will display weather data like temperature, pressure, wind speed and direction. I have a working API that I developed by following along with the video series below.

FastAPI tutorial

It is based on FastAPI and works fine. I would like to design a simple front end using just the base building blocks of html, css and javascript. I took a 6 month coding class and have a decent base of knowledge in those languages. At least enough to create something with which I would be content.

My question is how do I go about simply allowing the front end to interact with the back end. The API will be receiving live weather data from a weather station I built myself. There is both a put and get capability of the API.

Can I simply write a website that is accessed via something like apache on the normal ports 80 and 443 and have the webpage itself get the data from the API running on the same machine. The API would be running on a port of my choosing and the webpage would make API requests to localhost:xxxx.

I am not concerned about security at this point. I just want to know if the concept will work or if not, what is the best way to accomplish my goal. I am entirely self taught so I apologize for not framing my questions with the appropriate lingo. I am doing my best.

More like you can have your fastapi server (basically a web server) also reply to your we browser’s requests for “/” (and also for example for “/style.css” and “/app.js” or similar).

So you can run fastapi on 80/443.

You absolutely can make this happen.
I just realised this thread is from February but I’ll give my 2 cents anyway.

To get started, in your frontend you can simply hardcode what the url of the website will be, so if you have the same machine for both the frontend and backend your url (when being accessed from the server) should point to the remote address of the server. since the Javascript is being run in the users browsers you need to point to there, otherwise you are point to the users localhost, which is not running your API.

The drawback of this approach is you are explicitly setting the remote address, which means you need to update the address between running the app locally and in “production” but for a small personal project, it should be fine. (look into environment variables to solve this problem)

If you use apache to host, the server setup is well documented and there are many tutorials on how to get started with plain html, css, js frontend.

Hope this helps.