how do I connect my backend flask micro services with my frontend flask code?

Question

I am working on someone else's code. I need to debug and resolve issue. I have pretty good experience with backend but zero knowledge on front-end. I believe his code is full stack code which includes front-end and backend micro-services implemented using flask. I need to connect his front end code with backend one. backend works fine. I have already verified. However, not sure what's wrong in his code which connects backend and reflects output in web browser. Below is his code :

 #backend flask (works totally fine)- from flask import Flask import os, sys from drivers.snapshot.snapshot_service import SnapshotService from drivers.comparison.comparison_service import ComparisonService import json os.environ['JSNAPY_HOME'] = sys.path[0] app = Flask(__name__) @app.after_request def after_request(response): response.headers.add('Access-Control-Allow-Origin', '*') response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization') response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS') return response @app.route("/") def hello(): return "Initiate App!" @app.route('/snapshot/<hostname>') def snapshot(hostname): return SnapshotService().snapshot(hostname) #frontend flask from flask import Flask, render_template, redirect app = Flask(__name__) @app.after_request def after_request(response): response.headers.add('Access-Control-Allow-Origin', '*') response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization') response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS') return response @app.route('/') def index(): return redirect('/snapshot/') @app.route('/snapshot/') def view_snap(): return render_template('snap.html')

 {% extends 'base.html' %} {% block content %} <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <!-- general form elements --> <div class="box box-primary"> <div class="box-header with-border"> <h3 class="box-title">Snapshot</h3> </div> <!-- /.box-header --> <!-- form start --> <form role="form"> <div class="box-body"> <div class="form-group"> <input type="text" class="form-control" id="hostname" value="ASBNVAEG1CW" placeholder="Hostname/IP"> </div> <button type="submit" id="submit_snap_button" class="btn btn-primary btn-block"><i class="fa fa-camera"></i> Snap</button> </div> </form> <div id="div_result" class="alert alert-success" style="display: none;"> <div id="div_result_msg" class="text-center"></div> </div> </div> <!-- /.box --> </div> </div> {% endblock %} {% block page_javascript %} <script> $(document).ready(function() { $('#submit_snap_button').click(function(e) { $('#submit_snap_button').html('<i class="fa fa-refresh fa-spin"></i>'); $('#submit_snap_button').attr("disabled", true); $('#div_result').hide(); $.getJSON("http://molab-backend:5000/snapshot/" + $('#hostname').val(), function(data) { $('#div_result_msg').html(data.message); if (data.success === 0) { $('#div_result').addClass('alert-danger').removeClass('alert-success') } else { $('#div_result').addClass('alert-success').removeClass('alert-danger') } $('#div_result').show(); $('#submit_snap_button').attr("disabled", false); $('#submit_snap_button').html('<i class="fa fa-camera"></i> Snap'); }, function() { }, 'json'); e.preventDefault(); }); }) </script> {% endblock %}

Answer 1

Whenever the HTML element with id '#submit_snap_button' is clicked, this jquery piece of code makes a request to your 'snapshot' route:

$.getJSON("http://molab-backend:5000/snapshot/" + $('#hostname').val(), function(data) {
        $('#div_result_msg').html(data.message);
        if (data.success === 0) {
            $('#div_result').addClass('alert-danger').removeClass('alert-success')
        }
        else {
            $('#div_result').addClass('alert-success').removeClass('alert-danger')
        }

        $('#div_result').show();
        $('#submit_snap_button').attr("disabled", false);
        $('#submit_snap_button').html('<i class="fa fa-camera"></i> Snap');
}

If the request is successful, it adds the class 'alert-danger' and removes the class 'alert-success' from the element with id '#div_result' . If the request is not successful it does the opposite.

Then it makes the element with id '#div_result' visible.

It then changes the attribute 'disabled' of the element with id '#submit_snap_button' to false, and the HTML to '<i class="fa fa-camera"></i> Snap'

Your route should return a json file to be accessed by the front end.

@app.route('/snapshot/<hostname>')
def snapshot(hostname):
        return SnapshotService().snapshot(hostname)