Openlayers: Using PHP and npm

Question

I've got a rather large MySQL database containing polygons (coordinates) and their additional properties (e. g. text labels in different languages). I would like to use PHP to connect to my database in order to build GeoJSON polygons on demand to show in Openlayers (e. g. like here). My database structure allows for filtering them by their position so as to load only the necessary ones.

In an earlier version of my application, I used to use Leaflet and XAMPP for testing it locally before uploading it to a "real" web server. Now, with Openlayers I'm using npm as recommended (which might indeed come in handy if I need to use additional packages). However, doing so, I'm failing with something as simple as loading a php file. I've got XAMPP running, I have started my application using npm start and try to run an AJAX request in my code.

That simple AJAX request (using jQuery) won't work:

  $.ajax({
        type: "POST",
        url: "./php/labels.php",       
        data: {extent, resolution},
        dataType: 'json',
        success: function(output) {
          console.log("success");
        },
        error: function() {
         console.log("error");
        }
    });

This outputs the error message and I get jQuery reporting it could not find the php file. Do I have to use some additional package for node.js in order to be able to do that request at all? To me, that seems to be a bit redundant because when I put my code on the "real" web server (using the files from the dist folder), I expect it can directly communicate with the php files without using node.js. So, apparently node is only needed for the process but not for the end product. Or am I understanding this wrong?

I'm sorry if this is not a very clever question but I'm a beginner with npm and can't really wrap my head around how it works.

Answer 1

You don't have to use node on the server.

Don't forget about the JS bundling aspect described in the OL Getting Started doc.

Basically, one would/could:

• use NPM to acquire the OL library and its dependencies
• use a bundler (parcel, webpack or else) to extract the modules you are actually using from the entire OL library, and to pack them in a new javascript file
• use any webserver you like to serve the html (via php, asp etc) that refers to the JS files created in the previous step.

So when you work on the JS code of your app, you could have the webserver running and only re-run the bundler to transfer the changes to the running local webserver. In fact, some have a watch option to automatically re-bundle the JS should a change in the source file occur.