I am currently working on a web development project to enhance my skills in HTML, CSS, and Javascript. I am utilizing NPM and Express for my server.js file. My goal is to incorporate Particles.js as the background on all of my pages, however, it seems to be causing issues when I convert the page to an .ejs format.
Here is a snippet from my server.js:
const express = require('express')
const app = express()
const bodyParser = require('body-parser');
const request = require('request');
const apiKey = 'xxxxxxxxxxxxxxx';
app.use(express.static('public'));
app.set('view engine', 'ejs')
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/', function (req, res) {
res.render("index");
})
app.listen(8081, function () {
console.log('listening on port 8081!')
})
Below is my index.ejs file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/index.css">
</head>
<body>
<div id="the-container">
<header>
<nav>
<h1>Weather</h1>
<ul>
<li><a href="/">Home</a></li>
<li><a href="weather.ejs">Weather</a></li>
<li><a href="indexx.html"> index html</a></li>
</ul>
</nav>
</header>
</div>
<script>
/*particlesJS.load('the-container','basic.json');*/
console.log("abc");
</script>
<script src="/node_modules/particles.js/particles.js"></script>
</body>
</html>
Upon inspecting the source code on the page, I encountered the following errors:
Failed to load resource: the server responded with a status of 404 (Not Found) (index):1 Refused to execute script from 'http://localhost:8081/particles.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. (index):27 Uncaught ReferenceError: particlesJS is not defined at (index):27
After receiving suggestions from B. Sommers to update the server and index files, the following error occured:
C:\Users\myName\Development\tester\node_modules\particles.js\particle
s.js:1429
window.requestAnimFrame = (function(){
^
ReferenceError: window is not defined
at Object.<anonymous> (C:\Users\myName\Development\tester\node_mo
dules\particles.js\particles.js:1429:1)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (C:\Users\myName\Development\tester\server.
js:5:19)
at Module._compile (internal/modules/cjs/loader.js:702:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4c0d1c7c0d1c6f4859a849a84">[email protected]</a> start: `node server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1561706661706755243b253b25">[email protected]</a> start script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.