How to import files from node_modules / folder into my view files?

Question

I’m trying to learn some new technologies, so I decided to try npm, downloaded these packages (jquery and jquery-validation) using npm and now I’m trying to import these packages to my view file but can’t access any outside the public folder.

I have tried to import directly from the folder but it is not possible

<script src="../node_modules/jquery/dist/jquery.min.js"></script>

Should be using some other component I don’t know or is there any way to make my packages node_modules/ accessible?

Here is my structure folder and some important files:

• myproject
  • App
    • Controllers
    • Models
    • Views
      • Signup
        • new html.
      • html base.
  • Core
  • node_modules
    • jquery
    • jquery-validation
  • public
    • index.php(Front Controller)
  • etc....

Base.html (I am using Twig as template engine)

<nav>
    <a href="/">Home</a>
</nav>

{% block body %} 
{% endblock %}

<script src="../node_modules/jquery/dist/jquery.min.js"></script>

index php.

/**
 * Front Controller
 */

 /**
  * Composer
  */
require '../vendor/autoload.php';

/**
 * Error and Exception handling
 */
error_reporting(E_ALL);
set_error_handler('Core\Error::errorHandler');
set_exception_handler('Core\Error::exceptionHandler');

 /**
  * Routing
  */
$router = new Core\Router();

// Add the routes
$router->add('', ['controller' => 'Home', 'action' => 'index']);
$router->add('{controller}/{action}');
//$router->add('{controller}/{id:\d+}/{action}');
//$router->add('admin/{controller}/{action}', ['namespace' => 'Admin']);

$router->dispatch($_SERVER['QUERY_STRING']);

Answer 1

Hello, I imagine it is not possible to use directly from the node_modules folder because it is not public for security reasons.

1 Solution is to use the webpack and compile in conjunction with your app.js(main script). 2 Solution Move the desired folder to the public folder (create an Assets folder to keep it organized).