Node - Help - Githubissues

WalterSmuts commented 3 years ago

I've created a "Hello, World" node.js package with app.js

const http = require('http');
var chess = require('@chrisoakman/chessboardjs');
var fs = require('fs');

const hostname = '0.0.0.0';
const port = 3000;

const server = http.createServer((req, res) => {
        fs.readFile('index.html', function(err, data) {
                res.writeHead(200, {'Content-Type': 'text/html'});
                res.write(data);
                return res.end();
        });
});

server.listen(port, hostname, () => {
        console.log(`Server running at http://${hostname}:${port}/`);
});

and index.html:

<html>
<body>

<h1>My Header</h1>
<div id="myBoard" style="width: 400px"></div>
<p>My paragraph.</p>

<script>
        var board = Chessboard('myBoard')
</script>

</body>
</html>

and installed the dependency using npm:

npm install @chrisoakman/chessboardjs

Some proof it installed:

walter@fluffy:~/chess-web-frontend$ tree node_modules/ -L 2
node_modules/
|-- @chrisoakman
|   `-- chessboardjs
`-- jquery
    |-- AUTHORS.txt
    |-- LICENSE.txt
    |-- README.md
    |-- bower.json
    |-- dist
    |-- external
    |-- package.json
    `-- src

6 directories, 5 files

So first issue is I node is not seeing the module:

walter@fluffy:~/chess-web-frontend$ node app.js
node:internal/modules/cjs/loader:928
  throw err;
  ^

Error: Cannot find module '@chrisoakman/chessboardjs'
Require stack:
- /home/walter/chess-web-frontend/app.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/home/walter/chess-web-frontend/app.js:2:13)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/home/walter/chess-web-frontend/app.js' ]
}

And then I'm pretty sure I need to include the chess library (module?) so the client can actually access it. This is definitely just my unfamiliarity with how node and npm plays together and is probably quite straight forward. Might be a nice idea to have such an example on your website so folks like me can bootstrap easier :)

oakmac commented 3 years ago

Hi - thank you for the detailed issue report!

chessboard.js is a JavaScript library that is intended to be used in a browser context. In other words, it is not designed to run on Node.js.

If you are using Node.js as a backend platform for your project, then that will be orthogonal from anything that chessboard.js is doing. Most likely you will want to include jQuery and chessboard.js on the webpage that is delivered by your Node.js server to the browser as static assets.

WalterSmuts commented 3 years ago

Quick response :D Awesome!

Yip that's mostly what I understood before. What threw me off was that your downloads page has a section for installing using npm. i.e.:

# using npm
npm install @chrisoakman/chessboardjs

This made me think that there's maybe some idiomatic way client side javascript modules are imported from node using npm or something that I'm unfamiliar with (since this is my first dive into node npm etc)

oakmac commented 3 years ago

This made me think that there's maybe some idiomatic way client side javascript modules are imported from node using npm or something that I'm unfamiliar with (since this is my first dive into node npm etc)

Yes - I can see how this is causing confusion. Many "modern JavaScript" projects are built using tooling that pulls together files from npm and bundles them together into something that is ultimately delivered to a web browser (Browserify and webpack exist for this purpose, for example). Often these files go through a compilation phase using Babel or additional tooling as well.

Most of this tooling is built on top of Node.js, and they naturally use npm for the "fetch my frontend dependencies" part of the equation. The bottom line is that many npm modules these days are ultimately destined for a web browser, and may not even work on the Node.js platform.

chessboard.js was created largely before this ecosystem gained traction and only has one dependency: jQuery.

I added chessboard.js to npm so that folks using "modern tooling" could easily require and fetch chessboard.js as a dependency for their projects. How chessboard.js gets bundled and shipped to a web browser will be different for every project.

Another reason to put chessboard.js on npm is to enable certain CDNs that automatically mirror the npm registry. This is how you are able to use https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.js for serving up chessboard.js if you prefer that route. See the "Content Delivery Network" section on the Download page or "view source" on one of the Example pages for an example of using chessboard.js via CDN.

WalterSmuts commented 3 years ago

Oh! That was easy. Got it up and running in less that 10 minutes :P

Thanks for the detailed explanation and history lesson!

Thanks for the project! So glad when others maintain such high quality projects. Will let you know when I've got setup what I wanted to do with your project (visualization of chess-ai games).

Thanks a bunch!

oakmac / chessboardjs

Node - Help #208