Integrate JS application into WordPress plugin

Question

For running my js-application I need to open in browser index.html which consist many links to styles and others scripts

<script src="js/lib/jquery-2.1.1.min.js"></script>
<script src="js/lib/bootstrap.min.js"></script>
<script src="js/lib/bootstrap-select.min.js"></script>

I want make plugin that will be wrapping my js-application for WordPress.

<?php
    /*
    Plugin Name: Plugin
    Description: Just plugin
    Author: Me
    Version: 1.0
    */
    
    function showApp(){     
        $file = readfile("App/index.html", true);
        echo $file;
    }
    
    add_action('init', 'showApp');

The problem occurs in loading styles and dependent JS files.

UPDATE

<?php
    /*
    Plugin Name: Plugin
    Description: Just plugin
    Author: Me
    Version: 1.0
    */
    function showApp(){
        $PATH = 'D:\xampp\htdocs\wp\wp-content\plugins\APP\js\app';
    
        if (($_SERVER['REQUEST_URI']) == "/wp/2015/05/14/mypage/") {
            if ($handle = opendir($PATH)) {
                echo "Directory handle: $handle\n";
                echo "Entries:\n";
    
                while (false !== ($entry = readdir($handle))) {
                    echo "$entry\n";
                    enqueue_and_register_my_scripts($entry, $PATH);
                }
                closedir($handle);
    
                $file = readfile('D:\xampp\htdocs\wp\wp-content\plugins\APP\index.html');
                echo $file;
    
                die();
            }
        }
    }
    
    function enqueue_and_register_my_scripts($script, $path){
        wp_register_script($script, $path . $script);
        wp_enqueue_script ($script, $path . $script);
    }
    
    add_action('init', 'showApp');

This didn't work.

Answer 1

Register your style firsts, the idea is that you could load those files conditionally based on the current page (which would be your APP). All you would need is to make a custom page. page-{name}.php

Example

// Always use wp_enqueue_scripts action hook to both enqueue and register scripts
add_action( 'wp_enqueue_scripts', 'enqueue_and_register_my_scripts' );

function enqueue_and_register_my_scripts(){

    // Use `get_stylesheet_directroy_uri() if your script is inside your theme or child theme.
    wp_register_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js' );

    // Let's enqueue a script only to be used on a specific page of the site
    if ( is_page( 'careers' ) ){

        // Enqueue a script that has both jQuery (automatically registered by WordPress)
        // and my-script (registered earlier) as dependencies.
        wp_enqueue_script( 'my-careers-script', get_stylesheet_directory_uri() . '/js/my-careers-script.js', array( 'jquery', 'my-script' ) );
    }
}

https://codex.wordpress.org/Function_Reference/wp_register_script#Example_of_Automatic_Dependency_Loading

There is also another approach which would simply be to call the functions to return the path of the files. So if they are located within the theme folder. Use get_stylesheet_directroy_uri()

Otherwise if they are purely on a different path would would need to make a function to get that path. But that's not very efficient if your using wordpress better stick within its abundant functionality.

Edit: i skipped Plugin when reading my bad you can use this also as a reference. https://codex.wordpress.org/Function_Reference/plugins_url