How to utilize form submissions over web alongside gRPC communication?

Question

What I'm tring to do: I have a Node.js/Python application that is meant to practice gRPC. The Node client is meant to present a web frontend for users to input a string and number. From this, the client passes these arguments to a Python server to process and return some variable.

What I have done: I have the client-server communication working perfectly fine when implemented via CLI. I also have the frontend service working fine as well in isolation. However, I am having difficulties combining both concepts.

My code:

// Frontend for web presentation
async function frontend(query){
    const app = express();

    app.use(express.urlencoded({ extended: true }));
    app.use(express.json());

    app.set('view engine', 'pug');

    app.get('/', (req, res) => {
        res.render('index');
    });

    app.post("/submit", (req, res) => {
        query.word = req.body.word;
        query.mincount = req.body.mincount;
        res.redirect('/');
        return query;
    });    

    app.listen(3000);
}

// Caller for gRPC
async function main(){
    // ...

    var func;
    var query = {};

    await frontend(query);
    console.log(query);

    // Some options for loading .proto file
    const options = {
        keepCase: true,
        longs: String,
        enums: String,
        defaults: true,
        oneofs: true,
    };

    // Load the .proto file
    const packageDefinition = protoLoader.loadSync(PROTO_PATH, options);
    // Load the proto package 'proto.keysearch' into variable
    // This allows keysearchProto to recognize all of the definitions in the .proto file
    const keysearchProto = grpc.loadPackageDefinition(packageDefinition).proto.keysearch;

    // Create the client stub
    // This allows us to call the 'Whohas' function defined in the 'KeywordSearch' service
    // Additionally, send requests to port
    const client = new keysearchProto.KeywordSearch(SOCKET, grpc.credentials.createInsecure());
    // Finally, call the function
    client[func](query, (err, response) => {
        console.log(response.Results);
        process.exit(0);
    });
};

//frontend();
main();

What is going wrong: From what I'm observing, either one of two things happen. frontend immediately returns some empty values for query, as I'm assuming it listens once before any users can interact with the web presentation, captures the request (empty), and returns to main. Or main is not waiting for frontend to properly handle what it needs to do and continues with processing and empty query.

Side note: I am unsure of how to stall the frontend to wait for the backend processes to finish. The flow that I would like to happen is: frontend starts -> user inputs variables into web forms -> main then utilizes these values to send to the backend -> after processing, the backend sends a response to main -> frontend recognizes this response and presents the new information to the user through another web redirection.