Particle.js + Node + Express - Can't get resource to load
Question
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?
2 answers
solution1
1 ACCPTED 2018-01-06 14:19:00
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.
solution2
0 2020-06-15 02:01:02
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.