I've been exploring JavaScript game development utilizing the HTML canvas and Socket.io, and I just came across the canvas framework PixiJS.
I decided to try it out, so I started a new project and npm install-ed express, socket.io and pixi.js. I did a typical express and socketio static server, serving '/public'
'./index.js:'
const express = require('express')
const app = express()
const http = require('http')
const server = http.createServer(app)
const { Server } = require('socket.io')
const io = new Server(server)
app.use(express.static('public'))
io.on('connection', (socket) => {
console.log(`Socket ${socket.id} connected!`)
socket.once('disconnect', () => {
console.log(`Socket ${socket.id} disconnect!`)
})
})
server.listen(process.env.PORT || 3000, () => {
console.log(`Listening on ${process.env.PORT || 3000}`)
})
But then it hit me, on the client-side JavaScript I can't access the pixi.js package. I don't even really know where to start to utilize the framework client-side. Here's how it's supposed to work:
'./public/js/main.js'
import * as PIXI from 'pixi.js'
const app = new PIXI.Application()
document.body.appendChild(app.view)
But obviously I get 'Failed to resolve module specifier....' because it's a server-side package.
I'm super new to HTTP servers and full-stack development, how do I go about utilizing an NPM package on an express-served client directory? I apologize if this is a duplicate question.