How can I get both a rendered template html page and swagger documentation of same flask app with differnt endpoint?

I have written this code:

from flask import Flask, render_template, request
from flask_restx import Api, Resource

app = Flask(__name__)
api = Api(app, version='1.0', title='Sample API', description='A sample API', doc='/api')

# Sample data
config = {
    'nodes': ['Node1', 'Node2', 'Node3'],
    'files': {
        'Node1': ['File1', 'File2'],
        'Node2': ['File3', 'File4'],
        'Node3': ['File5', 'File6']
    }
}

@app.route('/')
def index():
    return render_template('index.html', nodes=config['nodes'], files=[])

@api.route('/get_files')
class Files(Resource):
    def post(self):
        selected_node = request.form['selected_node']
        files = config['files'].get(selected_node, [])
        return {'files': files}

if __name__ == '__main__':
    app.run(debug=True)

and I am trying to use this same flask app to render the index.html with root 127.0.0.1:5000/ (doesn't work)

and 127.0.0.1:/5000/api gives me swagger documenation (works)

The index page doesn't work because Flask-RESTx APIs have a default base URL of "/", which clashes with the original Flask route. To fix this, you can add a prefix(Api(app,prefix='/your_api_prefix')) to the API route like shown below:

api = Api(app, version='1.0', title='Sample API', description='A sample API', doc='/api', prefix='/your_api_prefix')

After doing above change you index page will work.

JFYI: you can see the APIs base URL in swagger documentation as shown in below image.