On the root folder of GAIA API, go to the public folder and create a new folder called "ui".
Put inside this folder the files of the build of the UI that we saved on the previous section (the ones located at the dist folder, without including the dist folder, just the files).
Edit app/webapp.py and search at the top of it for the imports section and do the following addition: .
Code Block | ||||
---|---|---|---|---|
| ||||
#VERSION 2 # This it the import you need to change: from app import __version__, GaiaAPILogger # Change it to this: from app import __version__, GaiaAPILogger, api #=============================================== #VERSION 3+ # This it the import you need to change: from app import __version__ # Change it to this: from app import __version__, api |
In the same app/webapp.py file, search for the "# Static Files" commented section. Look for the comments in the code below and replaced the commented area with the following code.
Code Block | ||||
---|---|---|---|---|
| ||||
# TODO: UI stuff should be configurable try: app.mount(f'{BASE_HREF}/ui/assets', StaticFiles(directory=join(dirname(__file__), '..', 'public', 'ui', 'assets')), name='assets') <================================================================ except Exception as e: logger.error(f'Unable to load ui {str(e)}') # Import Router from Core API app.include_router(api.ui_router, prefix=f'{BASE_HREF}', dependencies=[]) |
Info |
---|
The line of code pointed with an arrow is the path where we're going to locate the UI assets. If you didn't follow the previous steps please make sure that the files are located on the path /public/ui. If you don't want to use this folder then change the path in that line of code. |
Go to app/api/ui_api.py and modify the routes that may contain html. These routes must coincide with the routes at the UI's router. For example, if you have a homepage, login, and results page the code should look like this:
Code Block | ||||
---|---|---|---|---|
| ||||
from os.path import join, dirname from fastapi import APIRouter, Request from fastapi.responses import HTMLResponse from starlette import status router: APIRouter = APIRouter(prefix='/ui', redirect_slashes=True) # These routes must match the ones in React. @router.get('/', include_in_schema=False) @router.get('/login', include_in_schema=False) @router.get('/results', include_in_schema=False) # @router.get('/{rest_of_path:path}', include_in_schema=False) <====== This line allows the browser to interpret every path as html, not recommended since resources that fail loading may not be notified. def get_app_angular(): ''' Main endpoint for the UI loading, the endpoint response to *<base_url>/ui/*, the file to load is the index.html located in the *<root_folder>/dist/ui* folder, in order to generate this folder you need to build the *<root_fodler>/ui folder* NOTE!!! : The React UI must have the basehref in the vite.config, in the BrowserRouter and in the index.html For this you can execute the command `ng build` in the ui folder ''' with open(join(dirname(__file__), '..', '..', 'public', 'ui', 'index.html'), 'rb') as file_index: <=============================================================== html_content = file_index.read() return HTMLResponse(html_content, status_code=status.HTTP_200_OK) |
Info |
---|
The line of code pointed with an arrow is the path where we're going to locate the UI assets. If you didn't follow the previous steps please make sure that the files are located on the path /public/ui. If you don't want to use this folder then change the path in that line of code. |
Related articles
Content by Label | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Page properties | ||
---|---|---|
| ||
|