2

folks. It's stupid question time again.

I was looking into using particles.js as a background as i learned to use node and express. On the documentation available on the github, it says to use:

npm install particles.js

After doing this, i've added this to call it in my app.js:

var particleJS = require("particle.js")

At this point however, when i try to run my app, nodes error states:

ReferenceError: window is not defined

There is also another code block which is supposed to be called to create this which is supposed to be run on the frontend, using a jade file.

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});

There's a few things i'm not too sure about. Firstly, from my fun with node, npm install modules should be able to be called in the app.js. So i find it strange that it doesn't work.. Is this because the code in question isn't based around using a framework like express?

Secondly, if this is the case and i've installed the particles.js module through npm, in order to have jade pick it up, i'd have to copy the js over to the "javascript" public directory so it can find it?

And if thats the case i don't need to have it installed through npm in the first place?

So many questions... sorry. I'm still learning, and getting a little run around with this. Maybe my logic is wrong somewhere.

Can anyone help?

Dan Ruxton
  • 386
  • 1
  • 3
  • 18
  • 1
    Use a bundling tool such as Webpack. You can't run frontend libraries inside Node's context. You essentially use NPM to manage the libraries your projects depends. For using them, you need to *bundle* everything in a `.js` file, loaded in the view. – Adam Azad Jan 06 '18 at 14:23
  • I think you mix up back libraries like express installed with npm or yarn and the front libraries you have to add in the public directory of your Express. http://expressjs.com/en/starter/static-files.html . You can download your lib with npm and add a route to your lib but it's not very clean :) . Look at this topic : https://stackoverflow.com/questions/11372408/how-can-i-use-npm-for-front-end-dependencies – damien marchand Jan 06 '18 at 14:24

2 Answers2

1

So you are on the right track that when you npm install a frontend library, you will need to use another library to load it into the view. I guess that they are assuming that you are using such a framework, or putting it into a frontend framework's app.js (react etc). I would just download the library and put it into your static folder and run it that way.

Aldose
  • 131
  • 3
  • I went about it this way and it worked as intended. I wasn't sure if this was the correct way to go about it though, however i decided to do it anyway. At a later date i will be looking at react and may consider some of the other options people mentioned. Thank you very much for your help :) – Dan Ruxton Jan 06 '18 at 15:34
0

I changed the scripts and referenced to the archives particles.js and particles.json of a folder i created outside

HTML

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Menu</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

    <style>
        body{
            background-color: lightgrey;
        }
        *{
            padding : 0px;
            margin : 0px;
            font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
        }
      </style>

<!--<div id="particles-js"></div>-->
<div id="particles-js" style="position : absolute; width:100%; height:100%; z-index:-1; background-color: #000000"></div>

  <div class="container">
      <img src="../logo.jpg" width="600" class="img-fluid wall" style="display: block; margin: 0 auto">
  </div>

  <div class="container">
      <Form action = "/game" method = "POST">
        <button id="Iniciar_juego" type="submit" class="btn btn-primary btn-lg">Iniciar juego</button>
        <Input name="textbox" id="usuario" class="form-control" aria-label="Nombre de usuario:" aria-describedby="inputGroup-sizing-default" type="text" value="${salida}"style="display: none">
      </Form>
      <Form action = "/tabla" method = "GET">
        <button id="Ranking" type="submit" class="btn btn-primary btn-lg">Ver Ranking</button>
      </Form>
      <Form action = "/inst" method = "GET">
        <button id="Instrucciones" type="submit" class="btn btn-primary btn-lg">Instrucciones</button>
      </Form>
      <Form action = "/" method = "GET">
        <button id="Salir" type="submit" class="btn btn-primary btn-lg">Salir</button>
      </Form>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>

  <script>
    particlesJS.load('particles-js','../particles.json',function(){
      console.log('particles.json loaded...');
    });
  </script>
</body>
</html>
Tetoxflo
  • 1